Stripe

Stripe 是一款流行的支付网关，允许你在线接受付款。

Nuxt 脚本提供两种 Stripe 功能

• useScriptStripe 可组合函数，它加载脚本 https://js.stripe.com/v3/。
• ScriptStripePricingTable 组件，允许你使用 https://js.stripe.com/v3/pricing-table.js 在你的网站上嵌入 Stripe 价格表。

全局加载

Stripe 建议在你的应用中全局加载他们的脚本，以改善欺诈检测。

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

ScriptStripePricingTable

ScriptStripePricingTable 组件允许你以优化方式在你的网站上嵌入 Stripe 价格表。

为了提高性能，它将使用 元素事件触发器 在价格表可见时加载价格表。

演示

组件 API

查看 外观组件 API 以了解所有属性、事件和插槽。

属性

ScriptStripePricingTable 组件接受以下属性

• trigger: 加载 Stripe 的触发事件。默认值为 mouseover。有关更多信息，请参阅 元素事件触发器。
• pricing-table-id: 你在 Stripe 仪表盘中创建的价格表的 ID。
• publishable-key: 你的 Stripe 可发布密钥。
• client-reference-id: 客户端的唯一标识符。
• customer-email: 客户的电子邮件。
• customer-session-client-secret: 客户会话的客户端密钥。

useScriptStripe

useScriptStripe 可组合函数使你可以对 Stripe SDK 进行细粒度控制。它提供了一种加载 Stripe SDK 并以编程方式与之交互的方法。

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

请遵循 注册表脚本 指南以了解有关高级用法的更多信息。

选项

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

StripeApi

export interface StripeApi {
  Stripe: stripe.StripeStatic
}

示例

加载 Stripe SDK 并使用它来创建支付元素。

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