Skip to main content
Scripts

Stripe provides payment APIs and hosted checkout components.

Nuxt Scripts provides two Stripe features:

Stripe

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Stripe globally. Alternatively you can use the useScriptStripe composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      stripe: {
        trigger: 'onNuxtReady',
      }
    }
  }
})

useScriptStripe()

The useScriptStripe composable lets you have fine-grain control over when and how Stripe is loaded on your site. 

const { proxy } = useScriptStripe()

const stripe = await proxy.Stripe('pk_test_xxx')

Please follow the Registry Scripts guide to learn more about advanced usage.

Example

Using Stripe in a component. 

<script setup lang="ts">
const { proxy } = useScriptStripe()

// noop in development, ssr
// just works in production, client
function handleAction() {
  const stripe = await proxy.Stripe('pk_test_xxx')
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Types

Install @stripe/stripe-js for full TypeScript support.

pnpm add -D @stripe/stripe-js

Loading Globally

Stripe recommends loading Stripe.js on every page so its advanced fraud detection can observe browsing behavior before checkout.

export default defineNuxtConfig({
  scripts: {
    registry: {
      stripe: { trigger: 'onNuxtReady' },
    }
  }
})

ScriptStripePricingTable

ScriptStripePricingTable embeds a Stripe Pricing Table and defers its script until the component is visible.

An Element Event Trigger delays the pricing table script until the component becomes visible.

You'll need to create your own Pricing Table before proceeding.

Demo

Component API

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

useScriptStripe()

Use useScriptStripe() when you need to load Stripe.js and call it programmatically.

export function useScriptStripe<T extends StripeApi>(_options?: StripeInput) {}

For triggers and other script options, see Registry Scripts.

advancedFraudSignalsboolean = true

Whether to load Stripe's advanced fraud detection signals. Set to `false` to opt out.

version'v3' | 'acacia' | 'basil' | 'clover' | 'dahlia' | string = 'basil'

The Stripe.js SDK version to load. Named releases get autocomplete; any future codename is also accepted.

Example

This mounts a Payment Element for a $10.99 USD payment. You still need to finish the payment on your server; Stripe's deferred-intent guide covers the complete flow.

<script setup lang="ts">
const paymentEl = ref<HTMLElement | null>(null)
const { onLoaded } = useScriptStripe()
onMounted(() => {
  onLoaded(({ Stripe }) => {
    const stripe = Stripe('YOUR_STRIPE_KEY')
    const elements = stripe.elements({
      mode: 'payment',
      amount: 1099,
      currency: 'usd',
    })
    const paymentElement = elements.create('payment')
    if (paymentEl.value)
      paymentElement.mount(paymentEl.value)
  })
})
</script>

<template>
  <div ref="paymentEl" />
</template>
Edit this page
Markdown For LLMs

SpeedCurve LUX

Use SpeedCurve LUX Real User Monitoring in your Nuxt app to measure performance experienced by real users, with automatic SPA navigation tracking.

TikTok Pixel

Track TikTok conversions with consent, deduplication, and advanced matching.