[英]How can I use Stripe checkout with React?
這個庫使在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腳本有關。
為了使代碼可以在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元素。 但是看看這個答案 ,看看它應該如何完成。
如果您使用的是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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.