Usage
useStripe()
A Vue composable to create a Stripe instance.
On the client side, window.Stripe it your main entry point to the Stripe API.
The useStripe() composable let you create a Ref<Stripe>, behind the scene loadStripe is used.
Setup
This module leave up to you if you want to inject the Stripe script in every pages of you app.
It is recommended by Stripe that you load the script for every page of your application to take advantage of the advanced fraud detection Stripe.
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: 'https://js.stripe.com/v3/' },
],
},
},
})
Read more about including the Stripe.js script in your application from the official doc.
Usage
pages/index.vue
<script setup lang="ts">
const stripe = useStripe()
async function redirectToCheckout() {
// Stripe is not ready yet
if (!stripe.value) {
return
}
await stripe.value.redirectToCheckout({
sessionId: '',
})
}
</script>
We plan to return a Proxy object that will throw an error if you try to use it on the server side in the next major iteration of this module.
Components
<script setup lang="ts">
const stripe = useStripe()
const elements = useStripeElements()
const elementsOptions = ref<StripeElementsOptions>({
mode: 'payment',
amount: 1000,
currency: 'usd',
})
const paymentOptions = ref<StripePaymentElementOptions>({
layout: 'accordion',
})
async function submit() {
const submitResult = await elements.value.submit()
if (submitResult.error) {
return
}
const { clientSecret } = await $fetch(`/api/confirm-payment`, {
method: 'post',
})
const { error, paymentIntent } = await stripe.value.confirmPayment({
clientSecret,
elements: elements.value,
})
}
</script>
<template>
<form @submit.prevent="submit">
<StripeElements :options="elementsOptions">
<StripePaymentElement :options="paymentOptions" />
</StripeElements>
</form>
</template>