Vue Stripe provides two checkout solutions:
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, PaymentElement, useCheckout } 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>
<script setup>
import { PaymentElement, useCheckout } from 'vue-stripe/checkout'
const checkout = useCheckout()
async function handleSubmit() {
if (checkout.value?.type === 'loading') {
return
}
if (checkout.value?.type === 'error') {
console.error(checkout.value.error)
return
}
// checkout.value.type === 'success'
const { checkout: checkoutInstance } = checkout.value
const result = await checkoutInstance.confirm()
if (result.type === 'error') {
console.error(result.error.message)
}
else {
// Customer will be redirected to return_url
}
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<PaymentElement />
<button type="submit">
Submit
</button>
</form>
</template>
| Prop | Type | Description |
|---|---|---|
stripe | Stripe | PromiseLike<Stripe | null> | null | A Stripe object or Promise resolving to a Stripe object |
options | CheckoutProviderOptions | Configuration options. See available options. Must provide clientSecret (string or function returning Promise |
The EmbeddedCheckout component provides a pre-built checkout UI that you embed directly in your application. It's simpler to use but offers less customization than Elements.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from 'vue-stripe'
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>
<EmbeddedCheckoutProvider
:stripe="stripePromise"
:options="{ fetchClientSecret }"
>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</template>
<template>
<EmbeddedCheckoutProvider
:stripe="stripePromise"
:options="{
fetchClientSecret,
onComplete: () => {
console.log('Checkout completed')
},
}"
>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</template>
| Prop | Type | Description |
|---|---|---|
stripe | Stripe | PromiseLike<Stripe | null> | null | A Stripe object or Promise resolving to a Stripe object |
options | EmbeddedCheckoutOptions | Configuration options. See available options. Must provide fetchClientSecret function. |
| Prop | Type | Description |
|---|---|---|
options | EmbeddedCheckoutElementOptions | Optional configuration for the embedded checkout element. See available options. |
| Event | Description |
|---|---|
@ready | Triggered when Embedded Checkout is fully loaded |
@complete | Triggered when the checkout is completed |
@error | Triggered when there is an error |
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import {
CheckoutProvider,
ExpressCheckoutElement,
PaymentElement,
useCheckout
} from 'vue-stripe/checkout'
const stripePromise = loadStripe('pk_test_xxx')
const checkout = useCheckout()
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 }"
>
<form>
<ExpressCheckoutElement />
<PaymentElement />
<button type="submit">
Pay
</button>
</form>
</CheckoutProvider>
</template>
For detailed information about Checkout and its usage, refer to the Stripe Checkout documentation.