Question

This library可以在React项目中轻松使用Stripe checkout。但是我不想要所有额外的选项，我想了解如何自己实现这个功能。

如何获得基本的Stripe结帐按钮，如下所示，在我的React项目中？我不想使用任何外部库。我不想使用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，以防无法运行代码段。

问题

如果它在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>

如何在React中使用Stripe checkout？

问题

2 个答案: