# Vue Stripe

> Vue Stripe (@vue-stripe/vue-stripe) is a Vue library for the browser side of a Stripe integration. It wraps Stripe.js 10 (Endive) Elements, embedded Checkout and the Stripe.js methods in Vue components and composables. One build runs on Vue 3 and Vue 2.7.

Vue Stripe was created in 2017 by Joff Tiquez (https://jofftiquez.dev, https://github.com/jofftiquez, https://x.com/jrtiquez), who still maintains it. It is MIT licensed and a Stripe Verified Partner.

- Package: `@vue-stripe/vue-stripe` 6.0.0 on npm (https://www.npmjs.com/package/@vue-stripe/vue-stripe)
- Install: `npm install @vue-stripe/vue-stripe@^6 @stripe/stripe-js@^10`, then import `@vue-stripe/vue-stripe/style.css` once
- Peer dependencies: @stripe/stripe-js ^10.0.0, vue ^2.7.0 || ^3.0.0
- Source code and issues: https://github.com/vue-stripe/vue-stripe
- Documentation: https://vuestripe.com/
- The whole documentation in one file: https://vuestripe.com/llms-full.txt
- Every page is also available as Markdown at its URL plus `.md` (section overviews end in `/index.md`), as linked below.

The docs follow Diataxis: tutorials teach by doing, how-to guides solve one task each, the reference documents every export, and explanation pages cover how and why the library works. The live demos run each flow against Stripe's test mode.

## Start here

- [Vue Stripe home page](https://vuestripe.com/index.md): Vue components and composables for every Stripe.js 10 element and method. Vue 3 and Vue 2.7, typed, Stripe Verified Partner.

## Tutorials

- [Take your first test payment](https://vuestripe.com/guide/first-payment.md): Tutorial: build a small Vue app and Node server that takes a Stripe test payment with the Payment Element, including 3D Secure and a declined card.

## How-to guides

- [Documentation overview](https://vuestripe.com/guide/index.md): Overview of the Vue Stripe documentation: tutorials, how-to guides, reference and explanation, and which section to start with for your task.
- [Install and set up](https://vuestripe.com/guide/installation.md): Install @vue-stripe/vue-stripe and @stripe/stripe-js, import the stylesheet, set your publishable key and check that Stripe.js loads in your Vue app.
- [Use Vue Stripe on Vue 2.7](https://vuestripe.com/guide/vue-2.md): Use Vue Stripe in a Vue 2.7 app: install the packages, let vue-demi switch to Vue 2, import the stylesheet, and use the components or the plugin.
- [Use Vue Stripe with Nuxt and SSR](https://vuestripe.com/guide/ssr.md): Use Vue Stripe with Nuxt and other server-rendered Vue apps: fetch client secrets in the browser, keep the key set on the server, and add the return pages.
- [Use Vue Stripe in a Vite SSR app](https://vuestripe.com/guide/vite-ssr.md): Use Vue Stripe in a Vite SSR app: create the app per request, serve the API from the same server and fetch client secrets in the browser.
- [Use Vue Stripe in VitePress](https://vuestripe.com/guide/vitepress.md): Use Vue Stripe in VitePress: where the key goes, the plugin in enhanceApp, the dev proxy, and an API next to the static build.
- [Use Vue Stripe with Quasar](https://vuestripe.com/guide/quasar.md): Set up Vue Stripe in a Quasar app: the QCLI_ key prefix, a boot file, the CSP meta tag, the dev proxy, return_url routing, SSR mode and webpack mode.
- [Use Vue Stripe with Laravel and Inertia](https://vuestripe.com/guide/laravel.md): Set up Vue Stripe with Laravel and Inertia: keys in .env, the plugin, stripe-php routes without CSRF errors, webhooks and Back.
- [Provide Stripe app-wide](https://vuestripe.com/guide/plugin.md): Provide Stripe to a whole Vue app with the createVueStripe plugin, and combine it with VueStripeProvider where a page needs another key or account.
- [Upgrade from v5 to v6](https://vuestripe.com/guide/migration-v6.md): Upgrade a Vue Stripe 5 app to Vue Stripe 6 and Stripe.js 10 (Endive): removed elements and props, the Checkout Elements SDK and new requirements.
- [Accept a payment with the Payment Element](https://vuestripe.com/guide/payment-element.md): Accept a payment in Vue with VueStripePaymentElement and usePaymentIntent: create a PaymentIntent on your server, render the form and confirm it.
- [Collect payment details before creating an Intent](https://vuestripe.com/guide/deferred-intent.md): Render the Stripe Payment Element in Vue before a PaymentIntent exists, then create and confirm the Intent on your server when the customer pays.
- [Add Apple Pay, Google Pay and Link buttons](https://vuestripe.com/guide/express-checkout.md): Add Apple Pay, Google Pay and Link buttons to a Vue checkout with VueStripeExpressCheckoutElement and confirm the payment with usePaymentIntent.
- [Add Link to a Payment Element checkout](https://vuestripe.com/guide/link-authentication.md): Add Stripe Link to a Vue Payment Element checkout with VueStripeLinkAuthenticationElement, so returning customers pay with their saved details.
- [Collect a shipping or billing address](https://vuestripe.com/guide/address-element.md): Collect a shipping or billing address in Vue with VueStripeAddressElement: country-aware fields, validation and address autocomplete from Stripe.
- [Accept card payments with the Card Element](https://vuestripe.com/guide/card-element.md): Accept card payments in Vue with VueStripeCardElement or split card fields, and confirm them with useConfirmCardPayment, including 3D Secure.
- [Show buy-now-pay-later messaging](https://vuestripe.com/guide/payment-method-messaging.md): Show Affirm, Klarna and Afterpay / Clearpay installment messaging on Vue product and cart pages with VueStripePaymentMethodMessagingElement.
- [Confirm payments on your server](https://vuestripe.com/guide/tokens.md): Confirm payments on your server from Vue: create a ConfirmationToken from the Payment Element with useCreateConfirmationToken, then confirm it server-side.
- [Handle errors and declines](https://vuestripe.com/guide/error-handling.md): Handle Stripe errors in a Vue app: Stripe.js load failures, validation errors, card declines and error codes, the return page and Checkout errors.
- [Accept SEPA Direct Debit](https://vuestripe.com/guide/iban-element.md): Accept SEPA Direct Debit payments in Vue with VueStripeIbanElement and useConfirmSepaDebitPayment, including the mandate text and settlement timing.
- [Accept BECS Direct Debit (Australia)](https://vuestripe.com/guide/au-bank-account-element.md): Accept BECS Direct Debit from Australian bank accounts in Vue with VueStripeAuBankAccountElement, the mandate text and useConfirmAuBecsDebitPayment.
- [Accept ACH Direct Debit](https://vuestripe.com/guide/ach-debit.md): Accept ACH Direct Debit payments from US bank accounts in Vue with Stripe Financial Connections, a mandate and useConfirmUsBankAccountPayment.
- [Redirect to Stripe Checkout](https://vuestripe.com/guide/checkout.md): Redirect customers to a Stripe-hosted Checkout page from Vue with VueStripeCheckout or useStripeCheckout, using the session URL from your server.
- [Embed Stripe Checkout](https://vuestripe.com/guide/embedded-checkout.md): Embed Stripe's prebuilt Checkout page in a Vue app with VueStripeEmbeddedCheckout, a Checkout Session with ui_mode embedded_page and a return page.
- [Build your own checkout page on a Checkout Session](https://vuestripe.com/guide/custom-checkout.md): Build your own checkout page in Vue on a Stripe Checkout Session with the Checkout Elements SDK, the Payment Element and useCheckoutSession.
- [Add the Checkout Form (beta)](https://vuestripe.com/guide/checkout-form.md): Add Stripe's Checkout Form (beta) to a Vue page: create a Checkout Session with ui_mode form, render VueStripeCheckoutForm, confirm with useCheckoutForm.
- [Save a payment method for later](https://vuestripe.com/guide/setup-intent.md): Save a customer's payment method for later in Vue with a SetupIntent, the Payment Element and useSetupIntent, ready for off-session charges.
- [Start a subscription](https://vuestripe.com/guide/subscriptions.md): Start a Stripe subscription from Vue with Stripe Checkout, the Payment Element or a saved card, keep access in sync with webhooks, and test renewals.
- [Embed a pricing table](https://vuestripe.com/guide/pricing-table.md): Embed a Stripe pricing table configured in the Dashboard in a Vue app with VueStripePricingTable, so customers pick a plan and subscribe via Checkout.
- [Style Stripe Elements in Vue](https://vuestripe.com/guide/styling.md): Style Stripe Elements in Vue: the Appearance API for the fields inside the iframes, and CSS classes and slots for the Vue Stripe wrapper around them.
- [Test your integration](https://vuestripe.com/guide/testing.md): Stripe test cards, bank accounts, wallets and webhooks for testing a Vue Stripe integration end to end before you go live with real keys.
- [Fulfil orders with webhooks](https://vuestripe.com/guide/webhooks.md): Fulfil orders from Stripe webhooks on your server: handle the events for your integration, make fulfilment idempotent and test with the Stripe CLI.
- [Troubleshoot common problems](https://vuestripe.com/guide/troubleshooting.md): Fixes for common Vue Stripe problems: missing keys, provider errors, unstyled or empty elements, Vue 2.7 and SSR issues, and missing wallet buttons.
- [Display issued card details](https://vuestripe.com/guide/issuing.md): Display the card number, CVC, expiry and PIN of cards issued with Stripe Issuing in a Vue app, inside Stripe iframes that keep you out of PCI scope.
- [Verify a customer's identity](https://vuestripe.com/guide/identity.md): Verify a customer's identity in Vue with Stripe Identity: create a VerificationSession on your server and open the verification modal with useIdentity.

## Reference

- [API reference: components and composables](https://vuestripe.com/api/index.md): API reference for @vue-stripe/vue-stripe: every component, composable, plugin option and type, with compatibility for Vue 3, Vue 2.7 and Stripe.js 10.
- [Stripe.js Coverage](https://vuestripe.com/coverage.md): Every Stripe.js 10 element and method next to the Vue Stripe component or composable that wraps it, with links to guides, reference and demos.
- [Types and errors: TypeScript reference](https://vuestripe.com/api/types.md): TypeScript types and error classes exported by @vue-stripe/vue-stripe, including the re-exported Stripe.js types and the typed Vue Stripe errors.
- [VueStripeProvider](https://vuestripe.com/api/components/stripe-provider.md): VueStripeProvider reference: load Stripe.js once and provide the Stripe instance to Vue components and composables. Props, loading and error slots, events.
- [VueStripeElements](https://vuestripe.com/api/components/stripe-elements.md): VueStripeElements reference: create a Stripe Elements group in Vue from a client secret or a deferred Intent, with Appearance API options, fonts and slots.
- [VueStripePaymentElement](https://vuestripe.com/api/components/stripe-payment-element.md): VueStripePaymentElement reference: Stripe's Payment Element for Vue, one form for cards, wallets, bank debits and BNPL. Props, events, slots, methods.
- [VueStripeExpressCheckoutElement](https://vuestripe.com/api/components/stripe-express-checkout-element.md): VueStripeExpressCheckoutElement reference: Apple Pay, Google Pay, Link, PayPal, Amazon Pay and Klarna buttons in Vue. Props, events and confirming.
- [VueStripeCardElement](https://vuestripe.com/api/components/stripe-card-element.md): VueStripeCardElement reference: a single Stripe card field (number, expiry, CVC, postal code) for Vue. Props, events, slots and exposed methods.
- [Split Card Elements](https://vuestripe.com/api/components/stripe-split-card-elements.md): Split Card Elements reference: VueStripeCardNumberElement, VueStripeCardExpiryElement and VueStripeCardCvcElement for card forms with separate fields.
- [VueStripeAddressElement](https://vuestripe.com/api/components/stripe-address-element.md): VueStripeAddressElement reference: collect a shipping or billing address with autocomplete in Vue, inside VueStripeElements or a Checkout Session.
- [VueStripeLinkAuthenticationElement](https://vuestripe.com/api/components/stripe-link-authentication-element.md): VueStripeLinkAuthenticationElement reference: collect the customer's email and sign them in to Stripe Link so the Payment Element fills saved details.
- [VueStripePaymentMethodMessagingElement](https://vuestripe.com/api/components/stripe-payment-method-messaging-element.md): VueStripePaymentMethodMessagingElement reference: show Affirm, Klarna and Afterpay messaging for an amount and currency on Vue product and cart pages.
- [VueStripeTaxIdElement](https://vuestripe.com/api/components/stripe-tax-id-element.md): VueStripeTaxIdElement reference: collect a business name and tax ID such as EU VAT, GST or ABN in Vue on a Checkout Session, with real-time verification.
- [VueStripeCurrencySelectorElement](https://vuestripe.com/api/components/stripe-currency-selector-element.md): VueStripeCurrencySelectorElement reference: let customers choose the currency they pay in, with the Checkout Elements SDK or the Checkout Form SDK in Vue.
- [VueStripeContactDetailsElement](https://vuestripe.com/api/components/stripe-contact-details-element.md): VueStripeContactDetailsElement reference: collect and validate the customer's email in Vue, on a Checkout Session or inside VueStripeElements.
- [VueStripeTermsElement](https://vuestripe.com/api/components/stripe-terms-element.md): VueStripeTermsElement reference (beta): show the terms a customer agrees to by paying, on a Checkout Session or inside VueStripeElements in Vue.
- [VueStripeLinkSignupElement](https://vuestripe.com/api/components/stripe-link-signup-element.md): VueStripeLinkSignupElement reference (beta): offer customers to save their details with Stripe Link, on a Checkout Session or inside VueStripeElements.
- [VueStripeIbanElement](https://vuestripe.com/api/components/stripe-iban-element.md): VueStripeIbanElement reference: collect and validate an IBAN for SEPA Direct Debit in Vue. Props, change events, and the payment and setup confirmers.
- [VueStripeAuBankAccountElement](https://vuestripe.com/api/components/stripe-au-bank-account-element.md): VueStripeAuBankAccountElement reference: collect an Australian BSB and account number for BECS Direct Debit in Vue. Props, events, confirm composables.
- [Issuing Elements: show issued card details](https://vuestripe.com/api/components/stripe-issuing-elements.md): Issuing Elements reference: six Vue components that show an issued card's number, CVC, expiry and PIN in Stripe iframes, copy them or add it to a wallet.
- [VueStripeCheckout](https://vuestripe.com/api/components/stripe-checkout.md): VueStripeCheckout reference: a Vue button that redirects to a hosted Stripe Checkout page from the session URL your server returns. Props, events, v5 changes.
- [VueStripeEmbeddedCheckout](https://vuestripe.com/api/components/stripe-embedded-checkout.md): VueStripeEmbeddedCheckout reference: embed Stripe's prebuilt Checkout page in a Vue app with createEmbeddedCheckoutPage. Props, events and slots.
- [VueStripeCheckoutElementsProvider](https://vuestripe.com/api/components/stripe-checkout-provider.md): VueStripeCheckoutElementsProvider reference: run Stripe's Checkout Elements SDK on a Checkout Session and lay out your own checkout page in Vue.
- [VueStripeCheckoutFormProvider](https://vuestripe.com/api/components/stripe-checkout-form-provider.md): VueStripeCheckoutFormProvider reference: initialize Stripe's Checkout Form SDK (beta) for a Checkout Session and provide it to Vue components.
- [VueStripeCheckoutForm](https://vuestripe.com/api/components/stripe-checkout-form.md): VueStripeCheckoutForm reference: render Stripe's complete Checkout Form (beta), from contact details to the Pay button, as one Vue component.
- [VueStripePricingTable](https://vuestripe.com/api/components/stripe-pricing-table.md): VueStripePricingTable reference: embed a Stripe pricing table configured in the Dashboard in a Vue app. Props, events, slots and Content Security Policy.
- [VueStripeFinancialAccountDisclosure](https://vuestripe.com/api/components/stripe-financial-account-disclosure.md): VueStripeFinancialAccountDisclosure reference: render the legal disclosure Stripe requires for Financial Accounts for platforms in a Vue app.
- [VueStripeIssuingDisclosure](https://vuestripe.com/api/components/stripe-issuing-disclosure.md): VueStripeIssuingDisclosure reference: render the legal disclosure Stripe requires for an Issuing card program in a Vue app, via createIssuingDisclosure.
- [VueStripeTreasuryDisclosure](https://vuestripe.com/api/components/stripe-treasury-disclosure.md): VueStripeTreasuryDisclosure reference: render the legal disclosure Stripe requires for Treasury financial accounts in a Vue app, via createTreasuryDisclosure.
- [useStripe: access the Stripe.js instance](https://vuestripe.com/api/composables/use-stripe.md): useStripe reference: get the Stripe instance and its loading and error state in any Vue component under VueStripeProvider or the createVueStripe plugin.
- [useStripeElements](https://vuestripe.com/api/composables/use-stripe-elements.md): useStripeElements reference: get the nearest Stripe Elements group in a Vue component, with the submit, fetchUpdates and getElement helpers.
- [usePaymentIntent: confirm a PaymentIntent](https://vuestripe.com/api/composables/use-payment-intent.md): usePaymentIntent reference: confirm a PaymentIntent from the Payment Element in Vue, with the automatic elements.submit() call and loading and error refs.
- [useSetupIntent: confirm a SetupIntent](https://vuestripe.com/api/composables/use-setup-intent.md): useSetupIntent reference: confirm a SetupIntent from the Payment Element in Vue to save a payment method for later, with loading and error refs.
- [useStripeCheckout](https://vuestripe.com/api/composables/use-stripe-checkout.md): useStripeCheckout reference: redirect the browser to a hosted Stripe Checkout Session URL from Vue, with loading and error refs and no Stripe.js load.
- [useCheckoutSession](https://vuestripe.com/api/composables/use-checkout-session.md): useCheckoutSession reference: reactive Checkout Session state and actions (confirm, promotion codes, email, shipping) for the Checkout Elements SDK in Vue.
- [useCheckoutForm: Checkout Form state (beta)](https://vuestripe.com/api/composables/use-checkout-form.md): useCheckoutForm reference (beta): read the Checkout Session state and call confirm, promotion code and line item actions from a Vue Checkout Form.
- [useCreatePaymentMethod](https://vuestripe.com/api/composables/use-create-payment-method.md): useCreatePaymentMethod reference: create a reusable Stripe PaymentMethod from the Payment Element or Card Element in Vue, without confirming a payment.
- [useHandleNextAction](https://vuestripe.com/api/composables/use-handle-next-action.md): useHandleNextAction reference: complete 3D Secure or another required action on an Intent you confirmed on your server, from a Vue component.
- [useCreateConfirmationToken](https://vuestripe.com/api/composables/use-create-confirmation-token.md): useCreateConfirmationToken reference: create a Stripe ConfirmationToken from the Payment Element in Vue and confirm the PaymentIntent on your server.
- [useCreateToken: create Stripe Tokens in Vue](https://vuestripe.com/api/composables/use-create-token.md): useCreateToken reference: create single-use Stripe Tokens in Vue for cards, bank accounts, PII, CVC recollection and Connect account or person data.
- [useHandleCardAction](https://vuestripe.com/api/composables/use-handle-card-action.md): useHandleCardAction reference: run 3D Secure in Vue for a PaymentIntent confirmed on the server with manual confirmation, the legacy Stripe flow.
- [useVerifyMicrodepositsForPayment](https://vuestripe.com/api/composables/use-verify-microdeposits-for-payment.md): useVerifyMicrodepositsForPayment reference: verify a PaymentIntent's bank account with micro-deposit amounts for ACH Direct Debit and ACSS in Vue.
- [useVerifyMicrodepositsForSetup](https://vuestripe.com/api/composables/use-verify-microdeposits-for-setup.md): useVerifyMicrodepositsForSetup reference: verify a SetupIntent's bank account with micro-deposit amounts or a descriptor code for ACH and ACSS in Vue.
- [useRadarSession: Stripe Radar Sessions in Vue](https://vuestripe.com/api/composables/use-radar-session.md): useRadarSession reference: create a Stripe Radar Session in Vue to send device signals for fraud scoring when you collect payment details outside Stripe.js.
- [useEphemeralKeyNonce](https://vuestripe.com/api/composables/use-ephemeral-key-nonce.md): useEphemeralKeyNonce reference: create the nonce Stripe Issuing Elements need before they show a card's details, then the ephemeral key on your server.
- [Method confirmers](https://vuestripe.com/api/composables/confirm/index.md): Method confirmers: a Vue composable for each of the 46 Stripe.js confirm methods, with loading and error refs, and when to use them over usePaymentIntent.
- [Card confirmers: confirm card payments in Vue](https://vuestripe.com/api/composables/confirm/cards.md): useConfirmCardPayment and useConfirmCardSetup reference: Vue composables that confirm a PaymentIntent or SetupIntent with card details and 3D Secure.
- [Bank debit confirmers](https://vuestripe.com/api/composables/confirm/bank-debits.md): Vue composables that confirm bank debit payments and setups with Stripe.js: ACSS, BECS, Bacs, SEPA Direct Debit and US bank accounts (ACH).
- [Redirect and bank transfer confirmers](https://vuestripe.com/api/composables/confirm/redirects.md): Vue composables that confirm bank redirect and bank transfer payments with Stripe.js: iDEAL, Bancontact, EPS, FPX, Przelewy24, Sofort, Multibanco and more.
- [Wallet confirmers](https://vuestripe.com/api/composables/confirm/wallets.md): Vue composables that confirm wallet payments with Stripe.js: Alipay, Amazon Pay, BLIK, Cash App Pay, PayPal, Pix, TWINT, WeChat Pay and others.
- [Buy now, pay later confirmers](https://vuestripe.com/api/composables/confirm/bnpl.md): Vue composables that confirm buy now, pay later payments with Stripe.js: Affirm, Afterpay / Clearpay, Billie and Klarna, with the redirect back to your app.
- [Voucher confirmers](https://vuestripe.com/api/composables/confirm/vouchers.md): Vue composables that confirm cash voucher payments with Stripe.js: Boleto in Brazil, Konbini in Japan and OXXO in Mexico, settled through your webhook.
- [useFinancialConnections](https://vuestripe.com/api/composables/use-financial-connections.md): useFinancialConnections reference: link bank accounts with Stripe Financial Connections and collect ACH Direct Debit accounts from a Vue app.
- [useIdentity: Stripe Identity verification](https://vuestripe.com/api/composables/use-identity.md): useIdentity reference: open Stripe Identity's verification modal for a VerificationSession from a Vue component and read the result.
- [usePaymentRequest](https://vuestripe.com/api/composables/use-payment-request.md): usePaymentRequest reference: open the browser payment sheet for Apple Pay, Google Pay or Link behind your own Vue button with Stripe's Payment Request API.
- [createVueStripe Plugin](https://vuestripe.com/api/plugin.md): createVueStripe reference: a Vue plugin that provides Stripe to the whole app instead of VueStripeProvider. Options, provided values and TypeScript.

## Explanation

- [About Vue Stripe: Stripe for Vue 3 and Vue 2.7](https://vuestripe.com/guide/introduction.md): About Vue Stripe: a Vue 3 and Vue 2.7 library that wraps Stripe.js 10 Elements, Checkout and methods in components and composables, and why.
- [How Vue Stripe works](https://vuestripe.com/guide/architecture.md): How Vue Stripe passes Stripe.js objects through Vue provide/inject: the provider chain, render timing, and why composables must run inside providers.
- [Choosing an integration](https://vuestripe.com/guide/approaches.md): Compare the ways to take a Stripe payment in Vue: hosted, embedded or custom Checkout, the Payment Element or the Card Element, plugin or provider.
- [Payment objects: Intents, Sessions and tokens](https://vuestripe.com/guide/payment-objects.md): What PaymentIntents, SetupIntents, Checkout Sessions, PaymentMethods and tokens are, and which Vue Stripe components and composables use each one.
- [How confirming works](https://vuestripe.com/guide/confirming-payments.md): What confirming a Stripe PaymentIntent does, why the Payment Element is submitted first, and how redirects, next actions and delayed methods work.
- [How Stripe.js is loaded](https://vuestripe.com/guide/stripe-js-loading.md): How Vue Stripe loads Stripe.js: nothing on import, one shared script per page, where to mount the provider, fraud signals and server-side rendering.
- [Vue Stripe bundle size: what each import costs](https://vuestripe.com/guide/bundle-size.md): Vue Stripe tree-shakes: your bundle gets only what you import. Sizes for the whole library, typical checkouts and every export, measured when the site is built.
- [Stripe.js versions and what v6 changed](https://vuestripe.com/guide/stripe-js-versions.md): How Stripe versions Stripe.js (Basil, Clover, Dahlia, Endive), what each release changed for Vue apps, and why some Vue Stripe 5 components are gone.
- [What runs where: keys, iframes and PCI scope](https://vuestripe.com/guide/security.md): Which Stripe keys and secrets belong in the browser and which on your server, how Stripe iframes keep card data off your page, and what PCI scope means.

## Live demos

- [Live demos in Stripe test mode](https://vuestripe.com/live-demo/index.md): Live demos of every Vue Stripe flow in Stripe test mode: Checkout, the Payment Element, wallets, bank debits, saved cards, tokens and subscriptions.
- [Stripe Checkout (URL Redirect)](https://vuestripe.com/live-demo/checkout-redirect.md): Live demo of a one-time payment through hosted Stripe Checkout: the server creates a session and Vue redirects to its URL with VueStripeCheckout.
- [Payment Element Example](https://vuestripe.com/live-demo/payment-element.md): Live demo of VueStripePaymentElement: create a PaymentIntent and accept a one-time test payment in Vue with Stripe's Payment Element.
- [Embedded Checkout Example](https://vuestripe.com/live-demo/embedded-checkout.md): Live demo of VueStripeEmbeddedCheckout: Stripe's prebuilt Checkout page embedded in a Vue page and paid with a test card in Stripe test mode.
- [Custom Checkout Example](https://vuestripe.com/live-demo/custom-checkout.md): Live demo of a custom checkout page in Vue on a Stripe Checkout Session, with the Checkout Elements SDK, the Payment Element and an Address Element.
- [Checkout Form Example](https://vuestripe.com/live-demo/checkout-form.md): Live demo of Stripe's complete Checkout Form (beta) in Vue with VueStripeCheckoutFormProvider, VueStripeCheckoutForm and useCheckoutForm.
- [Card Element Example](https://vuestripe.com/live-demo/card-element.md): Live demo of VueStripeCardElement: accept a test card payment in Vue with Stripe's single-field Card Element and useConfirmCardPayment.
- [Split Card Elements Example](https://vuestripe.com/live-demo/split-card-elements.md): Live demo of Split Card Elements: separate card number, expiry and CVC fields in Vue, confirmed with a test card in Stripe test mode.
- [Link Authentication Example](https://vuestripe.com/live-demo/link-authentication.md): Live demo of VueStripeLinkAuthenticationElement: collect an email and let returning Stripe Link customers pay with saved details in Vue.
- [Express Checkout Example](https://vuestripe.com/live-demo/express-checkout.md): Live demo of VueStripeExpressCheckoutElement: Apple Pay, Google Pay, Link and PayPal buttons in Vue, shown according to the browser and device.
- [Payment Request Example](https://vuestripe.com/live-demo/payment-request.md): Live demo of usePaymentRequest: pay through the browser's payment sheet behind your own Vue button and confirm with useConfirmCardPayment.
- [Address Element Example](https://vuestripe.com/live-demo/address-element.md): Live demo of VueStripeAddressElement: collect a validated shipping or billing address with autocomplete and read its change events in Vue.
- [Save a Card Example](https://vuestripe.com/live-demo/setup-intent.md): Live demo of saving a card for future payments in Vue with a SetupIntent, the Payment Element and useSetupIntent, in Stripe test mode.
- [Create Payment Method Example](https://vuestripe.com/live-demo/create-payment-method.md): Live demo of useCreatePaymentMethod: turn card details into a reusable Stripe PaymentMethod in Vue without confirming a payment.
- [Tokens demo: ConfirmationToken, Token, Radar](https://vuestripe.com/live-demo/tokens.md): Live demo of tokens in Vue: create a ConfirmationToken, a card Token and a Radar Session with useCreateConfirmationToken, useCreateToken, useRadarSession.
- [Payment Method Messaging (BNPL) Example](https://vuestripe.com/live-demo/payment-method-messaging.md): Live demo of VueStripePaymentMethodMessagingElement: Affirm, Klarna and Afterpay / Clearpay installment messaging for an amount in Vue.
- [SEPA Direct Debit Example](https://vuestripe.com/live-demo/iban-element.md): Live demo of SEPA Direct Debit in Vue: collect an IBAN with VueStripeIbanElement and confirm a euro payment in Stripe test mode.
- [BECS Direct Debit Example](https://vuestripe.com/live-demo/becs-payment.md): Live demo of BECS Direct Debit in Vue: collect an Australian bank account with VueStripeAuBankAccountElement and confirm it in Stripe test mode.
- [ACH Direct Debit Example](https://vuestripe.com/live-demo/ach-debit.md): Live demo of ACH Direct Debit in Vue: link a US bank account with Financial Connections and confirm with useConfirmUsBankAccountPayment in test mode.
- [Identity Verification Example](https://vuestripe.com/live-demo/identity.md): Live demo of Stripe Identity in Vue: open the verification modal with useIdentity and complete it with Stripe test data, with no real ID needed.
- [Subscription Checkout Example](https://vuestripe.com/live-demo/subscription-checkout.md): Live demo of a Stripe subscription in Vue through hosted Stripe Checkout: choose a price, redirect to Checkout and pay with a test card.
- [Embedded Subscription Example](https://vuestripe.com/live-demo/subscription-embedded.md): Live demo of a Stripe subscription in Vue with the Payment Element on your own page, confirmed with a test card in Stripe test mode.

## Other

- [Vue Stripe usage: downloads, stars and CDN hits](https://vuestripe.com/usage.md): How widely Vue Stripe is used: npm downloads since 2017, weekly downloads for the past year, GitHub stars and contributors, and jsDelivr CDN hits.