Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
useStripe
✓ import { useStripe } from 'vue-use-stripe'
✗ const { useStripe } = require('vue-use-stripe')
Primary hook for integrating Stripe.js; this library is ESM-first. For CDN usage, it's available as `window.VueUseStripe.useStripe`.
StripeElement
✓ import { StripeElement } from 'vue-use-stripe'
Vue component for rendering Stripe Elements. Typically imported alongside `useStripe` for UI integration.
Stripe
✓ import type { Stripe } from '@stripe/stripe-js'
Type import for the Stripe instance. While `vue-use-stripe` provides reactive Stripe instance, direct type imports from `@stripe/stripe-js` are often needed for advanced type checking.
This quickstart demonstrates how to initialize Stripe, create a 'card' element, and handle its change events in a Vue 3 Composition API setup. It also shows a basic `confirmCardSetup` call, emphasizing the need for a backend-provided client secret.
import { defineComponent, ref } from 'vue'
import { useStripe, StripeElement } from 'vue-use-stripe'
export default defineComponent({
components: { StripeElement },
setup() {
const event = ref(null)
const { stripe, elements: [cardElement] } = useStripe({
key: process.env.VUE_APP_STRIPE_PUBLIC_KEY ?? '',
elements: [{ type: 'card', options: {} }],
})
const registerCard = async () => {
if (event.value?.complete && stripe.value && cardElement.value) {
// Example: Confirm card setup. Replace with your actual Stripe API call.
// Ensure a client secret is provided from your backend.
const { setupIntent, error } = await stripe.value.confirmCardSetup(
'<YOUR_CLIENT_SECRET_FROM_BACKEND>', // Replace with actual client secret
{
payment_method: {
card: cardElement.value,
},
}
)
if (error) {
console.error('Error confirming card setup:', error.message)
} else if (setupIntent) {
console.log('Card setup successful:', setupIntent)
// Send setupIntent.id to your server for further processing
}
}
}
return {
event,
cardElement,
registerCard,
}
},
template: `
<div>
<StripeElement :element="cardElement" @change="event = $event" />
<button @click="registerCard">Add Card</button>
<div v-if="event && event.error" style="color: red;">{{ event.error.message }}</div>
<div v-else-if="event && event.complete">Card input complete.</div>
</div>
`
})
Errors
Common errors & fixes
TypeError: Cannot read properties of null (reading 'confirmCardSetup')
The `stripe` instance is `null` because Stripe.js has not finished loading or initializing when `useStripe` is called.
fixEnsure Stripe.js is loaded and the component has mounted before attempting to use the `stripe` object. The `stripe` ref provided by `useStripe` is reactive, so watch for its value to become non-null.
Component is missing template or render function.
When using `StripeElement`, you must correctly assign the `element` prop with a reactive Stripe element instance obtained from `useStripe`.
fixEnsure your `StripeElement` component has `:element="cardElement"` (or similar) where `cardElement` is one of the reactive elements returned by `useStripe`.
Audit
Dependencies
@stripe/stripe-jsrequiredProvides the underlying Stripe.js functionality and TypeScript types. Can be a dev dependency if Stripe.js is loaded via a script tag.
@vue/composition-apioptionalRequired for Vue 2 support to enable Composition API features.
vue-demirequiredEnables Vue 2 and Vue 3 compatibility for the library.