Vue Stripe provides two main ways to integrate Stripe into your application:
The Elements provider allows you to use Element components and access the Stripe object in any nested component. Render an Elements provider at the root of your Vue app.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'
import CheckoutForm from './CheckoutForm.vue'
const stripePromise = loadStripe('pk_test_xxx')
const options = {
// Optional Elements configuration
appearance: {
theme: 'stripe',
},
}
</script>
<template>
<Elements :stripe="stripePromise" :options="options">
<CheckoutForm />
</Elements>
</template>
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'
import CheckoutForm from './CheckoutForm.vue'
const stripePromise = loadStripe('pk_test_xxx')
const options = {
// Passing the client secret obtained from the server
clientSecret: '{{CLIENT_SECRET}}',
}
</script>
<template>
<Elements :stripe="stripePromise" :options="options">
<CheckoutForm />
</Elements>
</template>
| Prop | Type | Description |
|---|---|---|
stripe | Stripe | PromiseLike<Stripe | null> | null | A Stripe object or a Promise resolving to a Stripe object. Can initially be null for SSR apps. |
options | StripeElementsOptions | Optional Elements configuration options. See available options. |
The CheckoutElementsProvider allows you to use Element components with Checkout Sessions. This is used when you want to lay out your own checkout from individual Elements. Stripe also offers CheckoutFormProvider for its single prebuilt Checkout form. See Checkout for both.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CheckoutElementsProvider } from 'vue-stripe/checkout'
const stripePromise = loadStripe('pk_test_xxx')
function fetchClientSecret() {
return fetch('/create-checkout-session', { method: 'POST' })
.then(response => response.json())
.then(data => data.clientSecret)
}
</script>
<template>
<CheckoutElementsProvider
:stripe="stripePromise"
:options="{ clientSecret: fetchClientSecret }"
>
<CheckoutForm />
</CheckoutElementsProvider>
</template>
Appearance and font options are nested under options.elementsOptions, not at the top level:
const options = {
clientSecret: fetchClientSecret,
elementsOptions: {
appearance: { theme: 'stripe' },
},
}
| Prop | Type | Description |
|---|---|---|
stripe | Stripe | PromiseLike<Stripe | null> | null | A Stripe object or a Promise resolving to a Stripe object. Can initially be null for SSR apps. |
options | StripeCheckoutElementsSdkOptions | CheckoutElementsProvider configuration options. See available options. You must provide the clientSecret (string or function that returns a Promise |
Read the session inside the provider with useCheckoutElements(). useCheckout() still works but is deprecated in favor of useCheckoutElements(). See Service Composables for details.
The loadStripe function from @stripe/stripe-js is the recommended way to initialize Stripe.js:
<script setup>
import { loadStripe } from '@stripe/stripe-js'
// Load Stripe asynchronously
const stripePromise = loadStripe('pk_test_xxx')
</script>
For detailed information about initializing Stripe.js, refer to the Stripe documentation.