如何在不先创建付款意图的情况下显示 Stripe PaymentElement 表单？

Question

我正在使用 React 和 Next.js 构建一个销售视频课程的平台。

我的目标是创建一种未经身份验证的用户可以使用的付款形式。我希望它像在 Gumroad 上一样工作 - 用户打开一个模式，可以在其中输入电子邮件、信用卡信息，然后单击“付款”（参见图片）。当用户提交此表单时，我想在后台为他们创建一个帐户并同时处理付款，然后将他们重定向到已购买的课程，并且他们已经登录到他们的帐户。这样，用户体验会更好，转化率也会更高 - 我不必要求用户在购买课程之前创建一个帐户，对他们来说，这一切看起来就像一个步骤。

问题是，为了处理付款，我使用的是

<PaymentElement />

。为了在我的网站上显示此表单，我需要首先创建付款意向。为了创建付款意图，我必须传递它

stripeCustomerId

（以便我可以保存用户使用的付款方式），以及

userId

（这样，在我的 webhooks 中，付款成功后，我可以将课程添加到用户已购买的课程列表中）。这意味着为了让我显示结账表单，用户必须已经拥有一个帐户并经过身份验证。

你能给我一些建议吗？我能做什么，有解决方案或解决方法吗？

我需要的是：

• 向用户显示一个表单，他们可以在其中输入电子邮件地址和信用卡信息。
• 当用户点击“付款”时，为他们创建一个帐户（有

  userId

  和

  stripeCustomerId

  ）。
• 之后，使用此信息处理付款。

Answer 1

您可以在创建和/或确认付款意向后更新付款意向的

customer

。这意味着流程将如下所示：

创建付款意向
显示带有付款元素的付款页面
付款成功完成后，创建客户并使用客户 ID 更新付款意向的
3. customer

Answer 2

一般情况下，要添加新的卡信息，我们应该按照这个顺序进行

在 Stripe 上创建新客户（使用电子邮件、名字、姓氏、电话、邮政编码等）
创建设置意图，获取客户端密钥
使用客户端密钥确认卡设置（添加卡信息时）

付款流程随后会显示该卡信息。如果需要，您可以将该新卡设置为默认卡。

Answer 3

先创建一个
1. 来宾用户
使用访客用户凭据创建付款意图
在客户端显示Stripe表单
每当用户在客户端提交表单时，首先使用客户 ID 更新付款意图，然后确认付款。

Answer 4

如果您在网站上获取卡信息，则属于违规行为。始终使用 stripe 的标准支付/结帐元素。

如果您想稍后捕获付款，请创建设置意图并授权付款。