Vue Stripe

npm bundle size npm downloads

Vue.js library for Stripe Checkout and Elements
Vue 3.x with TypeScript-first development

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! ## Installation ```bash npm install @vue-stripe/vue-stripe @stripe/stripe-js ``` ## Basic Usage ```vue ``` ## Components ### Provider Components | Component | Description | |-----------|-------------| | `VueStripeProvider` | Root component that loads Stripe.js and provides context | | `VueStripeElements` | Creates an Elements instance and provides it to child components | ### Payment Components | Component | Description | |-----------|-------------| | `VueStripePaymentElement` | Modern payment element supporting 40+ payment methods | | `VueStripeExpressCheckoutElement` | Wallet payments (Apple Pay, Google Pay, etc.) | | `VueStripeLinkAuthenticationElement` | Link authentication element | | `VueStripeAddressElement` | Address collection with Google Maps autocomplete | | `VueStripeCheckout` | Embedded Stripe Checkout | ### VueStripeAddressElement Collect shipping or billing addresses with Google Maps autocomplete: ```vue ``` ### VueStripeLinkAuthenticationElement Enable Stripe Link for faster checkout by collecting and authenticating the customer's email. > **Note:** This element collects email only and **must be paired with `VueStripePaymentElement`** for a complete checkout flow. It cannot process payments on its own. ```vue ``` ### Legacy Card Components | Component | Description | |-----------|-------------| | `VueStripeCardElement` | Single card input field | | `VueStripeCardNumberElement` | Card number input | | `VueStripeCardExpiryElement` | Expiry date input | | `VueStripeCardCvcElement` | CVC input | ### European Regional Elements | Component | Description | |-----------|-------------| | `VueStripeIbanElement` | IBAN input for SEPA payments | | `VueStripeIdealBankElement` | iDEAL bank selector (Netherlands) | | `VueStripeP24BankElement` | Przelewy24 bank selector (Poland) | | `VueStripeEpsBankElement` | EPS bank selector (Austria) | ## Composables | Composable | Description | |------------|-------------| | `useStripe()` | Access Stripe instance | | `useStripeElements()` | Access Elements instance | | `usePaymentIntent()` | Payment confirmation helpers | | `useSetupIntent()` | Setup intent handling | | `useStripeCheckout()` | Checkout session management | ## TypeScript Full TypeScript support with re-exported Stripe.js types: ```typescript import type { StripeElementChangeEvent, PaymentIntent, SetupIntent } from '@vue-stripe/vue-stripe' ``` ## Documentation - [Website](https://vuestripe.com) - Official website for Vue Stripe - [Guides](https://vuestripe.com/guide/introduction) - Guides for using Vue Stripe - [API Reference](https://vuestripe.com/api/) - API reference for Vue Stripe components and composables - [Playground](https://playground.vuestripe.com) - Interactive playground for testing Vue Stripe components and integrations - [Backend](https://backend.vuestripe.com) - Backend for the playground ## License [MIT](LICENSE) License © 2017-2025 Vue Stripe Contributors