如何实现Stripe Checkout自定义按钮 [英] How to implement a Stripe Checkout custom button
问题描述
根据文档,Checkout支持两种不同的集成:简单和自定义。
According to the documentation, Checkout supports two different integrations: Simple and Custom.
这种简单的方法对我有用:
The simple way works for me:
**<form action="create_subscription.php" method="POST">**
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="asdsdfasd3232"
data-amount="2000"
data-name=""
data-description="2 widgets"
data-image="https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png"
data-locale="auto">
</script>
</form>
然而,在自定义方式中,我不明白如何以及在何处应该我称之为create_subscription.php脚本。这是自定义集成代码:
However in the custom way I don't understand how and where should I call the "create_subscription.php" script. This is the custom integration code:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'asdsdfasd3232',
image: 'https://s3.amazonaws.com/stripe-uploads/acct_19EnQrGHC6pu6Qvdmerchant-icon-1485553962843-logo_stripe.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: '',
description: '2 widgets',
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
我已经尝试过这段代码,但它无效。有人能指出我正确的方向吗?
I've tried this code, but it is not working. Can someone point me in the right direction?
<form action="/create_subscription.php" method="POST">
<script src="https://checkout.stripe.com/checkout.js"></script>
<div id="stripe-demo" class="evo-button rounded cele">
<span>Register</span>
</div>
<script>
var handler = StripeCheckout.configure({
key: "asdsdfasd3232",
image: "img/logo.png",
name: "",
description: "Subscription for 1 month",
panelLabel: "Sign Me Up!",
amount: "2000",
allowRememberMe: false
});
document.getElementById('stripe-demo').addEventListener('click', function(e) {
handler.open();
e.preventDefault();
});
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>
推荐答案
感谢Comdenz
这就是方式我使用现有表单解决它并调用我的服务器端代码。
Thanks to Comdenz This is the way i solve it using existing form and calling my server side code.
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: "your testing key",
locale: 'auto',
image: "image/directory",
name: "Name",
description: "your discription",
panelLabel: "Click to make payment",
allowRememberMe: false,
token: function(token) {
// Prevent user from leaving page
window.onbeforeunload = function() {
return "";
}
// Dynamically create a form element to submit the results
// to your backend server
var form = document.getElementById("payment-form");
form.setAttribute('method', "POST");
form.setAttribute('action', "//localhost/dubb/charge.php");
// Add the token ID as a hidden field to the form payment-form
var inputToken = document.createElement("input");
inputToken.setAttribute('type', "hidden");
inputToken.setAttribute('name', "stripeToken");
inputToken.setAttribute('value', token.id);
form.appendChild(inputToken);
// Add the email as a hidden field to the form
var inputEmail = document.createElement("input");
inputEmail.setAttribute('type', "hidden");
inputEmail.setAttribute('name', "stripeEmail");
inputEmail.setAttribute('value', token.email);
form.appendChild(inputEmail);
// Finally, submit the form
document.body.appendChild(form);
// Artificial 5 second delay for testing
setTimeout(function() {
window.onbeforeunload = null;
document.forms["payment-form"].submit()
}, 5000);
}
});
document.getElementById('stripe-demo').addEventListener('click', function(e) {
handler.open();
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
有了这个,你需要制作新表格,只需使用javascript调用现有表格
With this, you done need to make new form, just call your existing form using the javascript
这篇关于如何实现Stripe Checkout自定义按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!