如何在 React 中使用 Stripe 结账？

Question

This library 使得在 React 项目中使用 Stripe 签出变得容易。但我不想要所有额外的选项，我想了解如何自己实现此功能。

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

这是基本 Stripe 结帐按钮的代码与 Stripe.js 结帐不同：

<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>

Here's a live example，以防该代码 sn-p 无法运行。

---

问题

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

Answer 1

直接翻译您的代码以使其在反应中工作可能是：

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函数中的表单元素。但是看看this answer，看看它应该怎么做。

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>