Vue.js library for Stripe Checkout and Elements
Vue 3 and Vue 2.7, TypeScript-first
Website | Guides | API Playground Backend
--- > [Vue Stripe](https://vuestripe.com) is an official [Stripe partner](https://stripe.com/partners/vue-stripe) ## Announcement Thank you for your patience! This is an early release of the new Vue Stripe. As with any early release, you may encounter bugs. If you find any issues or have suggestions, please [create an issue](https://github.com/vue-stripe/vue-stripe/issues) or [submit a pull request](https://github.com/vue-stripe/vue-stripe/pulls). Your contributions are greatly appreciated! ## Requirements | Package | Version | |---------|---------| | `vue` | `^2.7.0 \|\| ^3.0.0` (Vue 2.6 is not supported) | | `@stripe/stripe-js` | `^10.0.0` (Stripe.js Endive) | Upgrading from v5? Read [Migrating from v5 to v6](https://vuestripe.com/guide/migration-v6). ## Installation ```bash npm install @vue-stripe/vue-stripe@^6 @stripe/stripe-js@^10 ``` Import the component styles once, for example in `main.ts`: ```ts import '@vue-stripe/vue-stripe/style.css' ``` ## Basic Usage Composables such as `usePaymentIntent()` read the Stripe context, so call them in a component rendered **inside** `VueStripeElements`: ```vue{{ error }}
## Components ### Providers | Component | Description | |-----------|-------------| | `VueStripeProvider` | Loads Stripe.js and provides the Stripe instance | | `VueStripeElements` | Creates an Elements group (client secret or mode/currency/amount) | | `VueStripeCheckoutElementsProvider` | Elements with Checkout Sessions (`ui_mode: 'elements'`); `VueStripeCheckoutProvider` is a deprecated alias | | `VueStripeCheckoutFormProvider` | Checkout Form SDK for a Checkout Session with `ui_mode: 'form'` (Stripe beta) | Or install the `createVueStripe()` plugin to provide Stripe to the whole app without a `VueStripeProvider`. ### Elements | Component | Description | |-----------|-------------| | `VueStripePaymentElement` | Every payment method in one UI (recommended) | | `VueStripeExpressCheckoutElement` | Apple Pay, Google Pay, Link and other wallets | | `VueStripeLinkAuthenticationElement` | Email collection and Link sign-in | | `VueStripeAddressElement` | Billing or shipping address with autocomplete | | `VueStripePaymentMethodMessagingElement` | Buy now, pay later messaging | | `VueStripeCardElement` | Single card input | | `VueStripeCardNumberElement`, `VueStripeCardExpiryElement`, `VueStripeCardCvcElement` | Split card inputs | | `VueStripeIbanElement` | IBAN for SEPA Direct Debit | | `VueStripeAuBankAccountElement` | BECS Direct Debit (Australia) | | `VueStripeTaxIdElement` | Business tax ID (Checkout Sessions, Stripe beta) | | `VueStripeCurrencySelectorElement` | Local currency selection (Checkout Sessions, Adaptive Pricing) | | `VueStripeContactDetailsElement` | Customer email (Checkout Sessions or Elements) | | `VueStripeTermsElement` | Terms the customer accepts (Stripe beta) | | `VueStripeLinkSignupElement` | Save details to Link (Stripe beta) | | `VueStripeIssuingCardNumberDisplayElement`, `VueStripeIssuingCardCvcDisplayElement`, `VueStripeIssuingCardExpiryDisplayElement`, `VueStripeIssuingCardPinDisplayElement` | Stripe Issuing card details in Stripe-hosted iframes | | `VueStripeIssuingCardCopyButtonElement`, `VueStripeIssuingAddToWalletButtonElement` | Copy an issued card detail; add an issued card to a wallet (Stripe private preview) | Stripe removed the standalone iDEAL, P24, EPS and FPX elements; the Payment Element collects these payment methods. ### Checkout | Component | Description | |-----------|-------------| | `VueStripeCheckout` | Button that redirects to a hosted Checkout Session URL | | `VueStripeEmbeddedCheckout` | Stripe's Checkout page embedded in your page (`ui_mode: 'embedded_page'`) | | `VueStripeCheckoutForm` | Stripe's complete checkout form as one element, inside `VueStripeCheckoutFormProvider` (Stripe beta) | | `VueStripePricingTable` | Embeds a pricing table configured in the Stripe Dashboard | ### Disclosures | Component | Description | |-----------|-------------| | `VueStripeFinancialAccountDisclosure`, `VueStripeIssuingDisclosure`, `VueStripeTreasuryDisclosure` | Legal text rendered by Stripe.js (React Stripe.js 7 parity) | ## Composables | Composable | Description | |------------|-------------| | `useStripe()` | The Stripe instance | | `useStripeElements()` | The Elements group, `submit()`, `fetchUpdates()` and `getElement()` | | `usePaymentIntent()` | Confirm and retrieve PaymentIntents | | `useSetupIntent()` | Confirm and retrieve SetupIntents | | `useConfirmCardPayment()`, `useConfirmSepaDebitSetup()`, ... | One composable per Stripe.js `confirm