我的目标是为产品创建一个简单的付款页面。
在官方文档中，它说在服务器端需要生成令牌以使用以下方法创建事务：
stripe.paymentIntents.create({
amount: req.body.amount,
currency: 'usd'
})
并使用返回的密钥创建交易。
但是，其他一些官方示例仅使用客户端，如下所示：
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardElement),
})
没有服务器密钥 stripe.confirmCardPayment('{CLIENT_SECRET}', {
文档说CLIENT_SECRET是必需的，但是有一些示例没有此要求。
知道为什么和有什么区别吗？
除非您使用Stripe的新的仅限客户端的Checkout，否则如果没有一些服务器端代码，就无法在自定义Stripe集成中处理付款。
如您所见，React Stripe.js的官方文档仅包含客户端代码。但是，此页面上的代码示例并不代表要进行付款所需的完全集成。这些样本仅演示了如何使用React Stripe.js和createPaymentMethod函数在前端收集和标记信用卡详细信息。以这种方式编写文档的目的是使它更容易在浏览器中继续进行和运行代码示例，而无需设置服务器。
一个开始了解端到端支付集成涉及哪些API的好地方是：
https://stripe.com/docs/payments/accept-a-payment
（提示上述指南中的每个代码示例都有一个React您可以制表的版本）
如果您有兴趣看到以这些React示例为基础的完整工作集成，我建议您查看我们为最近的开发人员办公时间而构建的以下演示：
https://github.com/tmarek-stripe/demo-react-stripe-js
具体而言，我会建议审查服务器端部分（在这里）创建付款的意图，以及客户端部分（在这里），创建一个付款方式，并确认付款的意图。
有很多评论！如果愿意，您可以观看视频，我们将介绍如何与React Stripe.js创建（几乎完整的）集成：
一旦涵盖了基础知识，我建议您复习另一个示例以实现更完整的端到端集成：
使用Next.js，TypeScript和Stripe进行类型安全的付款
在查看此完整的集成时，请注意使用Stripe.js时无需手动创建付款方式。这是可选的，因为成功的付款意图将自动为您创建一种付款方式。
在服务器端创建付款意图：
// Create a PaymentIntent with the specified amount.
const response = await fetchPostJSON('/api/payment_intents', {
amount: input.customDonation
});
并确认了客户端，无需任何createPaymentMethod呼叫！
const cardElement = elements!.getElement(CardElement);
// Use your card Element with other Stripe.js APIs
const { error, paymentIntent } = await stripe!.confirmCardPayment(
response.client_secret,
{
payment_method: {
card: cardElement!,
billing_details: { name: input.cardholderName }
}
}
);
简而言之：
我希望这有帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句