[英]How can I use Stripe checkout with React?
This library makes it easy to use Stripe checkout in React projects. 这个库使在React项目中使用Stripe checkout很容易。 But I don't want all of the extra options, and I want to understand how to achieve this functionality myself.
但是我不想要所有其他选项,我想了解自己如何实现此功能。
How can I get a basic Stripe checkout button , like the one below, in my React project ? 我如何 在我的React项目中 获得一个基本的Stripe checkout按钮 ,如下图所示? I do not want to use any external libraries.
我不想使用任何外部库。 I do not want to use Stripe.js.
我不想使用Stripe.js。
Here's the code for the basic Stripe checkout button as distinct from Stripe.js checkout : 这是与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>
Here's a live example , in case that code snippet can't be run. 这是一个实时示例 ,以防无法运行代码段。
I can't get the button to display if it is within a React class. 如果它在React类中,则无法显示该按钮。 I think this has to do with rendering and loading the Stripe script.
我认为这与渲染和加载Stripe脚本有关。
A direct translation of your code to make it work in react could be: 为了使代码可以在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);
This code can be placed in componentDidMount and THEFORM is the form element that you put in the render function. 可以将这段代码放在componentDidMount中,而THEFORM是您放置在render函数中的form元素。 But take a look at this answer to see how it really should be done.
但是看看这个答案 ,看看它应该如何完成。
If you're using jsx
, class
is a reserved keyword. 如果您使用的是
jsx
,则class
是保留关键字。 Use className
instead: 使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.