Stripe

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.

Types

To use the Stripe with full TypeScript support, you will need to install the @stripe/stripe-js dependency.

pnpm add -D @stripe/stripe-js

Loading Globally

Stripe recommends loading their script globally on your app to improve fraud detection.

export default defineNuxtConfig({
  scripts: {
    registry: {
      stripe: true,
    }
  }
})

ScriptStripePricingTable

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.

Demo

Component API

See the Facade Component API for full props, events, and slots.

Props

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.

useScriptStripe

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.

Options

export const StripeOptions = object({
  advancedFraudSignals: optional(boolean()),
})

StripeApi

export interface StripeApi {
  Stripe: stripe.StripeStatic
}

Example

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>