---
title: "Stripe · Nuxt Scripts"
meta:
  description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:title": "Stripe · Nuxt Scripts"
---

```

Nuxt Scripts on GitHub

**Scripts**# **Stripe**[Copy for LLMs](https://scripts.nuxt.com/scripts/stripe.md) [**~~Stripe~~**](https://stripe.com) is a popular payment gateway that allows you to accept payments online. Nuxt Scripts provides two Stripe features: - [`useScriptStripe()`](https://scripts.nuxt.com/scripts/stripe) composable which loads the script `https://js.stripe.com/basil/stripe.js`. - `ScriptStripePricingTable` component that allows you to embed a [**~~Stripe Pricing Table~~**](https://docs.stripe.com/payments/checkout/pricing-table) on your site using `https://js.stripe.com/v3/pricing-table.js`.**Stripe**[**~~View source ~~**](https://github.com/nuxt/scripts/blob/main/packages/script/src/runtime/registry/stripe.ts) ## 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 ~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage. ## Example Using Stripe in a component.```
<script setup lang="ts">const{proxy}=useScriptStripe();function handleAction(){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: { trigger: 'onNuxtReady' },
    }
  }
})
``````
export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        stripe: { trigger: 'onNuxtReady' },
      }
    }
  }
})
```## ScriptStripePricingTable The `ScriptStripePricingTable` component allows you to embed a [**~~Stripe Pricing Table~~**](https://docs.stripe.com/payments/checkout/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~~**](https://scripts.nuxt.com/docs/guides/script-triggers#element-event-triggers). You'll need to create your own [**~~Pricing Table~~**](https://dashboard.stripe.com/pricing-tables) before proceeding. ### Demo```
<template>
  <ScriptStripePricingTable
    pricing-table-id="prctbl_1PD0MMEclFNgdHcR8t0Jop2H"
    publishable-key="pk_live_51OhXSKEclFNgdHcRNi5xBjBClxsA0alYgt6NzBwUZ880pLG88rYSCYPQqpzM3TedzNYu5g2AynKiPI5QVLYSorLJ002iD4VZIB"
  />
</template>
```### Component API See the [**~~Facade Component API~~**](https://scripts.nuxt.com/docs/guides/facade-components#facade-components-api) for full props, events, and slots. ## [`useScriptStripe()`](https://scripts.nuxt.com/scripts/stripe) The [`useScriptStripe()`](https://scripts.nuxt.com/scripts/stripe) 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~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage.`**advancedFraudSignals**``boolean` = true Whether to load Stripe's advanced fraud detection signals. Set to `false` to opt out. ## 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>
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/main/docs/content/scripts/stripe.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/scripts/stripe.md) [**Snapchat Pixel** Use Snapchat Pixel in your Nuxt app.](https://scripts.nuxt.com/scripts/snapchat-pixel) [**TikTok Pixel** Use TikTok Pixel in your Nuxt app.](https://scripts.nuxt.com/scripts/tiktok-pixel)**On this page **- [Types](#types) - [Loading Globally](#loading-globally) - [ScriptStripePricingTable](#scriptstripepricingtable) - [useScriptStripe()](#usescriptstripe) - [Example](#example)