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

问题描述 投票:0回答:4

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

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

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

<PaymentElement />
。为了在我的网站上显示此表单,我需要首先创建付款意向。为了创建付款意图,我必须传递它
stripeCustomerId
(以便我可以保存用户使用的付款方式),以及
userId
(这样,在我的 webhooks 中,付款成功后,我可以将课程添加到用户已购买的课程列表中)。这意味着为了让我显示结账表单,用户必须已经拥有一个帐户并经过身份验证。

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

我需要的是:

  • 向用户显示一个表单,他们可以在其中输入电子邮件地址和信用卡信息。
  • 当用户点击“付款”时,为他们创建一个帐户(有
    userId
    stripeCustomerId
    )。
  • 之后,使用此信息处理付款。

stripe-payments
4个回答
0
投票

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

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

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

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

    在 Stripe 上创建新客户(使用电子邮件、名字、姓氏、电话、邮政编码等)
  • 创建设置意图,获取客户端密钥
  • 使用客户端密钥确认卡设置(添加卡信息时)
付款流程随后会显示该卡信息。如果需要,您可以将该新卡设置为默认卡。


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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.