如何以及是否在 stripe 新库 @stripe/react-stripe-js 中使用服务器端

ily*_*lyo 5 javascript node.js stripe-payments

我的目标是为产品创建一个简单的支付页面。

在官方文档中,它说服务器端需要生成令牌才能创建交易,使用:

stripe.paymentIntents.create({
  amount: req.body.amount,
  currency: 'usd'
})
Run Code Online (Sandbox Code Playgroud)

并使用返回的密钥创建交易。

然而,其他一些官方示例仅使用客户端,如下所示:

const { error, paymentMethod } = await stripe.createPaymentMethod({
  type: 'card',
  card: elements.getElement(CardElement),
})
Run Code Online (Sandbox Code Playgroud)

没有服务器密钥stripe.confirmCardPayment('{CLIENT_SECRET}', {

文档说CLIENT_SECRET是必需的,但有一些示例不需要它。

知道为什么以及有什么区别吗?

小智 6

除非您使用 Stripe 的新客户端 Checkout,否则如果没有一些服务器端代码,就无法在自定义 Stripe 集成中处理付款。

正如您所注意到的,React Stripe.js 的官方文档仅包含客户端代码。但是,此页面上的代码示例并不代表处理付款所需的完整集成。这些示例仅演示如何使用 React Stripe.js 和createPaymentMethod函数在前端收集和标记信用卡详细信息。以这种方式编写文档是为了更轻松地在浏览器中跟踪和运行代码示例,而无需设置服务器。

了解端到端支付集成涉及哪些 API 的一个好起点是:

https://stripe.com/docs/ payments/accept-a- payment

提示上述指南中的每个代码示例都有一个React您可以使用 Tab 键进入的版本)

如果您有兴趣查看基于这些 React 示例构建的完整工作集成,我建议您查看我们为最近的开发人员办公时间剧集构建的以下演示:

https://github.com/tmarek-stripe/demo-react-stripe-js

具体来说,我建议查看创建支付意图的服务器端部分(此处) ,以及创建支付方式并确认支付意图的客户端部分(此处) 。

有很多需要回顾的!如果您愿意,您可以观看视频,我们将在其中介绍如何创建与 React Stripe.js 的(几乎完整的)集成:

React Stripe.js - 开发人员办公时间 | YouTube

一旦涵盖了基础知识,我建议查看另一个示例以实现更完整的端到端集成:

使用 Next.js、TypeScript 和 Stripe 进行类型安全支付

在查看此完整集成时,请注意使用 Stripe.js 时如何不需要手动创建付款方式。它是可选的,因为成功的付款意向会自动为您创建付款方式。

支付意图在服务器端创建:

// Create a PaymentIntent with the specified amount.
const response = await fetchPostJSON('/api/payment_intents', {
  amount: input.customDonation
});
Run Code Online (Sandbox Code Playgroud)

https://github.com/stripe-samples/nextjs-typescript-react-stripe-js/blob/master/components/ElementsForm.tsx#L84-L88

并且无需任何电话即可确认客户端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 }
    }
  }
);
Run Code Online (Sandbox Code Playgroud)

https://github.com/stripe-samples/nextjs-typescript-react-stripe-js/blob/master/components/ElementsForm.tsx#L99-L110

简而言之:

我希望这有帮助!