如何在React中使用Stripe checkout？

Question

该库使得在React项目中使用Stripe checkout变得容易.但我不想要所有额外的选项,我想了解如何自己实现这一功能.

如何在我的React项目中获得一个基本的Stripe checkout按钮,如下图所示？我不想使用任何外部库.我不想使用Stripe.js.

以下是Stripe.js结帐的基本Stripe checkout按钮的代码:

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="KEY"
    data-amount="999"
    data-name="Company Name"
    data-description="Widget"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>

这是一个实例,以防无法运行代码段.

---

问题

如果它在React类中,我无法显示该按钮.我认为这与渲染和加载Stripe脚本有关.

Answer 1

如果您使用jsx,class是保留关键字。改用className：

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" className="stripe-button"
    data-key="KEY"
    data-amount="999"
    data-name="Company Name"
    data-description="Widget"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>