Stripe is a popular payment gateway that allows you to accept payments online.
Nuxt Scripts provides two Stripe features:
useScriptStripe
composable which loads the script https://js.stripe.com/v3/
.ScriptStripePricingTable
component that allows you to embed a Stripe Pricing Table on your site using https://js.stripe.com/v3/pricing-table.js
.To use the Stripe with full TypeScript support, you will need
to install the @stripe/stripe-js
dependency.
pnpm add -D @stripe/stripe-js
Stripe recommends loading their script globally on your app to improve fraud detection.
export default defineNuxtConfig({
scripts: {
registry: {
stripe: true,
}
}
})
export default defineNuxtConfig({
$production: {
scripts: {
registry: {
stripe: true,
}
}
}
})
The ScriptStripePricingTable
component allows you to embed a Stripe Pricing Table on your site
in an optimized way.
To improve performance it will load the table when it's visible using the Element Event Triggers.
<template>
<ScriptStripePricingTable
pricing-table-id="prctbl_1PD0MMEclFNgdHcR8t0Jop2H"
publishable-key="pk_live_51OhXSKEclFNgdHcRNi5xBjBClxsA0alYgt6NzBwUZ880pLG88rYSCYPQqpzM3TedzNYu5g2AynKiPI5QVLYSorLJ002iD4VZIB"
/>
</template>
See the Facade Component API for full props, events, and slots.
The ScriptStripePricingTable
component accepts the following props:
trigger
: The trigger event to load the Stripe. Default is mouseover
. See Element Event Triggers for more information.pricing-table-id
: The ID of the Pricing Table you created in the Stripe Dashboard.publishable-key
: Your Stripe publishable key.client-reference-id
: A unique identifier for the client.customer-email
: The email of the customer.customer-session-client-secret
: The client secret of the customer session.The useScriptStripe
composable lets you have fine-grain control over the Stripe SDK. It provides a way to load the Stripe SDK and interact with it programmatically.
export function useScriptStripe<T extends StripeApi>(_options?: StripeInput) {}
Please follow the Registry Scripts guide to learn more about advanced usage.
export const StripeOptions = object({
advancedFraudSignals: optional(boolean()),
})
export interface StripeApi {
Stripe: stripe.StripeStatic
}
Loading the Stripe SDK and using it to create a payment element.
<script setup lang="ts">
const paymentEl = ref(null)
const { onLoaded } = useScriptStripe()
onMounted(() => {
onLoaded(({ Stripe }) => {
const stripe = Stripe('YOUR_STRIPE_KEY')
const elements = stripe.elements()
const paymentElement = elements.create('payment', { /* pass keys */})
paymentElement.mount(paymentEl.value)
})
})
</script>
<template>
<div ref="paymentEl" />
</template>