Vue 3 components for Stripe.js
npm install vue-stripe-js




Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle. Works with Nuxt 3.
š¢ Live demo
- Become a sponsor
- Donate via PayPal
``bash`
npm i vue-stripe-js @stripe/stripe-js
`vue`
Alternatively, include a script tag. Make sure Stripe.js is loaded before you mount Vue components.
`html`
Based on ā deferred payment guide
`vue
v-if="stripeLoaded"
@submit.prevent="handleSubmit"
>
:instance-options="stripeOptions"
:elements-options="elementsOptions"
ref="elementsComponent"
>
:options="paymentElementOptions"
ref="paymentComponent"
/>
type="submit"
>
Submit
`
Thanks to the Provider Pattern used in StripeElements, you get minimalist tools with full access to Stripe.js methods and properties. This results in better developer experience (DX), simpler code, and fewer bugs.
These examples use Vue Composition API and TypeScript.
- All
- Payment
- Card
- Express Checkout
!Vue Stripe.js demo screenshot
All features of Stripe.js are available in two components. The benefits of Vue solution: element is created and destroyed automatically, options are reactive, event listeners are attached to StripeElement. Simple and future-proof.
š„ Most important property is type š„
`html`
Available types
`ts
type StripeElementType =
| 'address'
| 'affirmMessage'
| 'afterpayClearpayMessage'
| 'auBankAccount'
| 'card'
| 'cardNumber'
| 'cardExpiry'
| 'cardCvc'
| 'currencySelector'
| 'epsBank'
| 'expressCheckout'
| 'fpxBank'
| 'iban'
| 'idealBank'
| 'p24Bank'
| 'payment'
| 'paymentMethodMessaging'
| 'paymentRequestButton'
| 'linkAuthentication'
| 'shippingAddress'
| 'issuingCardNumberDisplay'
| 'issuingCardCvcDisplay'
| 'issuingCardExpiryDisplay'
| 'issuingCardPinDisplay'
| 'issuingCardCopyButton'
// Check actual element types in @stripe/stripe-js
`
`html`
Following events are emitted on StripeElement
- change
- ready
- focus
- blur
- click
- escape
- loaderror
- loaderstart
Add classes to components
`html`
Style element via options - read documentation
`ts``
const cardOptions = ref
style: {
base: {
iconColor: "green",
},
invalid: {
iconColor: "red",
},
},
})