如何使用 Nuxt 和 Stripe 收款
对于许多 Web 应用程序来说，接受付款是一项至关重要的功能。如果您正在使用 Nuxt，您可能正在寻找一种简洁的方式来集成 Stripe。
在本指南中，我们将使用vue-stripe（Stripe.js 的一个封装器，与 React SDK 1:1 等效）和 Nuxt 的服务器路由来构建完整的支付流程。
🚀快来看看这个使用 Nuxt、Tailwind CSS 和 Vue Stripe 构建的、样式齐全的结账演示吧！
先决条件
开始之前，请确保您已准备好：
- 一个 Nuxt 项目设置
- Stripe 账户（以及您的测试 API 密钥）
1. 安装
首先，安装该vue-stripe软件包以及官方的 Stripe JS 加载器：
npm install vue-stripe @stripe/stripe-js stripe
2. 创建支付意图
Stripe 要求您先在服务器上创建支付意图，然后才能在客户端收集支付信息。这可以确保交易金额和货币的安全。
在您的 Nuxt 项目中创建一个新的服务器路由server/api/create-payment-intent.post.ts：
import Stripe from 'stripe'
export default defineEventHandler(async (event) => {
const config = useRuntimeConfig(event)
const stripe = new Stripe(runtimeConfig.stripeSecretKey)
const paymentIntent = await stripe.paymentIntents.create({
amount: 1099, // $10.99 (amount in cents)
currency: 'usd',
automatic_payment_methods: {
enabled: true,
},
})
return {
clientSecret: paymentIntent.client_secret,
}
})
请务必将您的信息添加STRIPE_SECRET_KEY到您的.env文件中。
3. 构建结账表单
现在我们来创建支付表单。我们将使用一个PaymentElement组件，它可以在一个用户界面中自动处理多种支付方式（银行卡、电子钱包、银行转账）。
创建一个名为CheckoutForm.vue“
<script setup>
import { ref } from 'vue'
import {
PaymentElement,
useElements,
useStripe,
} from 'vue-stripe'
const stripe = useStripe()
const elements = useElements()
const errorMessage = ref(null)
const handleSubmit = async () => {
if (!stripe.value || !elements.value) {
// Stripe.js has not loaded yet
return
}
// 1. Validate the form fields
const { error: submitError } = await elements.value.submit()
if (submitError) {
errorMessage.value = submitError.message
return
}
// 2. Confirm the payment
const { error } = await stripe.value.confirmPayment({
elements: elements.value,
confirmParams: {
return_url: 'http://localhost:3000/success', // Redirect after success
},
})
if (error) {
errorMessage.value = error.message
}
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<PaymentElement />
<button type="submit" :disabled="!stripe || !elements">
Pay Now
</button>
<div v-if="errorMessage" class="error">
{{ errorMessage }}
</div>
</form>
</template>
4. 集成元素提供程序
最后，我们需要用支付Elements提供商组件包裹表单。该组件会初始化 Stripe，并将必要的上下文传递给表单。
在您的页面中（例如app/pages/checkout.vue）：
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'
// Load your publishable key
const config = useRuntimeConfig()
const stripePromise = loadStripe(config.public.stripePublishableKey)
// Fetch the client secret from our server endpoint
const { data } = await useFetch('/api/create-payment-intent', {
method: 'POST'
})
</script>
<template>
<div class="checkout-page">
<h1 class="text-2xl font-bold mb-4">Secure Checkout</h1>
<div v-if="data?.clientSecret">
<Elements :stripe="stripePromise" :options="{ clientSecret: data.clientSecret }">
<CheckoutForm />
</Elements>
</div>
<div v-else>
Loading payment details...
</div>
</div>
</template>
结论
集成支付功能不必很复杂。通过将 Nuxt 的服务器路由与 [此处应填写相关组件名称] 结合使用PaymentElement，您只需几行代码即可接受信用卡、Apple Pay、Google Pay 等多种支付方式。
查看文档或GitHub 代码库，了解更多示例，例如自定义样式和快速结账按钮。
文章来源：https://dev.to/wobsoriano/how-to-accept- payments-with-nuxt-and-stripe-56ip