Question

这是我的情况，用户可以通过提供用户名，密码之类的基本信息并选择订阅计划（在条带上创建订阅计划）来进行注册。现在，根据用户选择的计划，我想从用户那里收集付款信息，并将此数据发布到我的后端服务器上，以创建具有指定订阅计划的用户。首先，我尝试了这种仅客户端集成解决方案

import React from 'react'
const stripe = window.Stripe('pk_test_my_test_key');

export default class Checkout extends React.Component {
checkout=()=> {
    stripe.redirectToCheckout({

      items: [
        {plan: 'plan_my_plan_Id', quantity: 1}
      ],
      successUrl: 'http://localhost:3000/register',
      cancelUrl: 'http://localhost:3000/register'
    }).then((result) => {
      console.log(result)
    });
  }

render() {
     return (
       <button onClick={this.checkout}>Pay</button>
     )
   }
}

以上解决方案的工作方式是使用户订阅条带化计划，然后将我的应用程序重定向到指定的successUrl。但是我将如何在后端创建此用户？在返回的successUrl处，我丢失了用户填写的所有其他信息。此外，在条纹文档中还说我不应该依赖SuccessUrl来完成购买，而应该依靠webhooks。
因此，如果我将后端配置为侦听webhook事件，那么在webhook事件中我将如何找到用户信息以在后端创建用户。

我尝试了使用 react-stripe-checkout 的其他解决方案，此链接中对此进行了介绍 https://alligator.io/react/payments-stripe-checkout-react/

这是我从上面的链接中使用的代码

import React from 'react'
import StripeCheckout from 'react-stripe-checkout';

export default class Checkout extends React.Component {
onToken = (token, addresses) => {

};

render() {
return (
  <StripeCheckout
    stripeKey="your_PUBLISHABLE_stripe_key"
    token={this.onToken}
  />
)
   }

}

我认为通过执行此过程，我可以处理onToken事件并将额外的信息传递给我的后端，然后在我的后端上创建费用和用户，并将响应发送到我的前端。但不幸的是，我找不到任何有关如何将我的planId传递给StripeCheckout的信息。

我如何完成此任务，对于这种情况最好的解决方案是什么？

请帮助

带区隔订阅的react-stripe-checkout

0 个答案: