如何在React中使用Stripe Checkout？

Question

这个库使在React项目中使用Stripe checkout很容易。 但是我不想要所有其他选项，我想了解自己如何实现此功能。

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

这是与Stripe.js checkout不同的基本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

为了使代码可以在React中正常工作，可以直接对其进行翻译：

const script = document.createElement("script");
script.src="https://checkout.stripe.com/checkout.js" ;
script.className="stripe-button";
script.dataset.key="KEY";
script.dataset.amount="999";
script.dataset.name="Company Name";
script.dataset.description="Widget";
script.dataset.image="img/documentation/checkout/marketplace.png";
script.dataset.locale="auto";
script.dataset.zipCode="true"; // Note camelCase!
let form = document.getElementById('THEFORM');
form.appendChild(script);

可以将这段代码放在componentDidMount中，而THEFORM是您放置在render函数中的form元素。 但是看看这个答案 ，看看它应该如何完成。

Answer 2

如果您使用的是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>