Stripe

Stripe provides payment APIs and hosted checkout components.

Nuxt Scripts provides two Stripe features:

• useScriptStripe() composable which loads the script https://js.stripe.com/basil/stripe.js by default. Use the version option to pin a Stripe.js SDK release (e.g. acacia, clover, dahlia).
• ScriptStripePricingTable component for embedding a Stripe Pricing Table with https://js.stripe.com/v3/pricing-table.js.

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

const { proxy } = useScriptStripe()

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

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

// noop in development, ssr
// just works in production, client
async 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' },
    }
  }
})

export default defineNuxtConfig({
  $production: {
    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.

Demo

<template>
  <ScriptStripePricingTable
    pricing-table-id="prctbl_1PD0MMEclFNgdHcR8t0Jop2H"
    publishable-key="pk_live_51OhXSKEclFNgdHcRNi5xBjBClxsA0alYgt6NzBwUZ880pLG88rYSCYPQqpzM3TedzNYu5g2AynKiPI5QVLYSorLJ002iD4VZIB"
  />
</template>

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.

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>