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.

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

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
function handleAction() {
  const stripe = await proxy.Stripe('pk_test_xxx')
}
</script>

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

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,
    }
  }
})

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

<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()

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.

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>