如何在同一页面上有两个条纹结账？
目前，我有两个按钮，一个charge.php，和一个charge-monthly.php文件。
希望实现：
- 两个独立的按钮：一个用于一次性捐赠/另一个用于每月捐赠。
表格输入 - 单笔捐款
<form action="index.php" method="post">
<input class="form-control donation-page" id="custom-donation-amount" min="1" step="10.00" type="number" value="100">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button class="pay-button donation-page" id="customButton">
<h4 class="donate-text button donation-page">DONATE</h4>
</button>
</form>
表格输入 - 每月捐款
<form action="index.php" method="post">
<input class="form-control donation-page" id="custom-donation-amount-month" min="1" step="10.00" type="number" value="100">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button class="pay-button donation-page" id="customButton-month">
<h4 class="donate-text button donation-page">DONATE MONTHLY</h4>
</button>
</form>
以下是运行 Stripe Checkout 的脚本：
<script type="text/javascript">
var handler = StripeCheckout.configure({
key: 'pk_test_xxxxxxx',
image: 'assets/img/500x500.jpg',
locale: 'auto',
billingAddress: 'true',
token: function(token) {
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id
$.post( "charge.php", { stripeToken: token.id, amount:$("#custom-donation-amount").val(), description:$("data-description").val(), stripeEmail:token.email})
// check if it worked
.done(function( data ) {
console.log( "Card charged: " + data );
});
$.post( "charge-month.php", { stripeToken: token.id, amount:$("#custom-donation-amount-month").val(), description:$("data-description").val(), stripeEmail:token.email})
// check if it worked
.done(function( data ) {
console.log( "Card charged: " + data );
});
}
});
$('#customButton').on('click', function(e) {
// Open Checkout with further options
var amount = $("#custom-donation-amount").val() * 100;
handler.open({
name: 'xxxxxxxxx',
description: 'xxxxxxxxxxx',
amount: amount
});
e.preventDefault();
});
$('#customButton-month').on('click', function(e) {
// Open Checkout with further options
var amount = $("#custom-donation-amount-month").val() * 100;
handler.open({
name: 'xxxxxxxxxxx',
description: 'xxxxxxxxxxxxx',
amount: amount
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
</script>看，现在它以相同的方式调用两个帖子charge.php和charge-monthly.php，以便它按顺序进行。如何使charge.php文件仅在单击自定义按钮时触发，而charge-monthly.php文件在单击custonButton-monthly时触发？
您可以尝试以下操作。使用标志monthlyCharge。一个boolean变量，用于检测单击了哪个按钮。
<script type="text/javascript">
var monthlyCharge = false;
var handler = StripeCheckout.configure({
key: 'pk_test_xxxxxxx',
image: 'assets/img/500x500.jpg',
locale: 'auto',
billingAddress: 'true',
token: function(token) {
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id
if(monthlyCharge == false) {
$.post( "charge.php", { stripeToken: token.id, amount:$("#custom-donation-amount").val(), description:$("data-description").val(), stripeEmail:token.email})
// check if it worked
.done(function( data ) {
console.log( "Card charged: " + data );
});
} else {
$.post( "charge-month.php", { stripeToken: token.id, amount:$("#custom-donation-amount-month").val(), description:$("data-description").val(), stripeEmail:token.email})
// check if it worked
.done(function( data ) {
console.log( "Card charged: " + data );
});
}
}
});
$('#customButton').on('click', function(e) {
monthlyCharge = false;
// Open Checkout with further options
var amount = $("#custom-donation-amount").val() * 100;
handler.open({
name: 'xxxxxxxxx',
description: 'xxxxxxxxxxx',
amount: amount
});
e.preventDefault();
});
$('#customButton-month').on('click', function(e) {
monthlyCharge = true;
// Open Checkout with further options
var amount = $("#custom-donation-amount-month").val() * 100;
handler.open({
name: 'xxxxxxxxxxx',
description: 'xxxxxxxxxxxxx',
amount: amount
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
</script>对于未来的读者，对此的一般解决方案如下：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var customHandler = StripeCheckout.configure({
key: 'YOUR_API_KEY',
// any properties that are common to all checkout buttons
image: 'your/logo/url.png',
locale: 'auto',
name: 'The Organisation',
email: 'tarquin@example.com',
panelLabel: 'Donate {{amount}}',
currency: 'GBP'
});
$(function() {
$('.payment-button').click(function(evt) {
evt.preventDefault();
var $this = $(this),
data = $this.data();// options that are form-specific can be stored as data-* attributes
customHandler.open({
description: data.description,
amount: data.amount,
token: function(token, args) {
$this.closest('form')
.find('.payment-token').val(token.id)
.end().submit();
}
});
});
});
$(window).on('popstate', function() {
customHandler.close();
});
</script>
<form action="/path/to/your/processor/" method="post">
<input name="thing" value="thing_one" type="hidden">
<input name="token" class="payment-token" type="hidden">
<input value="Donate to thing one" class="payment-button" data-description="Thing 1 donation" data-amount="2100" type="button">
</form>
<form action="/path/to/your/processor/" method="post">
<input name="thing" value="thing_two" type="hidden">
<input name="token" class="payment-token" type="hidden">
<input value="Donate to thing two" class="payment-button" data-description="Thing 2 donation" data-amount="2200" type="button">
</form>像往常一样在服务器端验证付款和金额。显然，你可以用更详细的本机代码替换jQuery代码。