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

Health 💜

Consider supporting efforts to make this project healthy and sustainable. Thank you!

- Become a sponsor
- Donate via PayPal

Quickstart ⚡️

$3

- Upgrade guide
- Docs v1

$3

``bash
npm i vue-stripe-js @stripe/stripe-js
`

$3

`vue

`

Alternatively, include a script tag. Make sure Stripe.js is loaded before you mount Vue components.

`html

`

$3

Based on – deferred payment guide

`vue


`

Examples 🌿

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

$3

!Vue Stripe.js demo screenshot

Advanced integration 🏗️

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
`

Events

`html

`
Following events are emitted on StripeElement

- change
- ready
- focus
- blur
- click
- escape
- loaderror
- loaderstart




Styling

Add classes to components

`html



`

Style element via options - read documentation

`ts
const cardOptions = ref({
style: {
base: {
iconColor: "green",
},
invalid: {
iconColor: "red",
},
},
})
``