如何在同一页面上进行两次条纹检查?
目前,我有两个按钮,一个charge.php
和一个charge-monthly.php
文件。
希望实现:
FORM ENTRY - 单笔捐赠
<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 ENTRY - 每月捐款
<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
文件单击customButton时触发charge-monthly.php
文件,并在单击custonButton-monthly时触发ConnectionString
文件?
答案 0 :(得分:1)
您可以尝试以下操作。使用标志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>
答案 1 :(得分:0)
对于未来的读者,一般的解决方案如下:
<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>
验证付款&amp;像往常一样量服务器端。显然,您可以使用更详细的本机代码替换jQuery代码。