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 CheckoutProvider allows you to use Element components with Checkout Sessions. This is used for Elements with Checkout Sessions integrations.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CheckoutProvider } 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>
<CheckoutProvider
:stripe="stripePromise"
:options="{ clientSecret: fetchClientSecret }"
>
<CheckoutForm />
</CheckoutProvider>
</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 | CheckoutProviderOptions | CheckoutProvider configuration options. See available options. You must provide the clientSecret (string or function that returns a Promise |
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.