一页上有两个单独的条纹结帐表格 [英] Two Separate Stripe Checkout Forms on One Page

问题描述

如何在同一页面上有两个Stripe结帐?

How can I have two Stripe checkouts on the same page?

当前，我有两个按钮，一个charge.php和一个charge-monthly.php文件.

Currently, I have two buttons, a charge.php, and a charge-monthly.php file.

希望实现:

• 两个单独的按钮:一个用于一次性捐赠，另一个用于每月捐赠.

报名表-单笔捐款

 <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的脚本:

Here is the script that runs 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>

现在，它正在以相同的方式调用两个 post charge.php和charge-monthly.php，以便它按顺序进行.如何使charge.php文件仅在他们单击customButton时触发，而charge-monthly.php文件在单击custonButton-monthly时触发?

See, right now it is calling the two post charge.php and charge-monthly.php the same way so that it just goes in order. How do I make the charge.php file only fire for when they click the customButton, and the charge-monthly.php file fire when custonButton-monthly is clicked?

推荐答案

您可以尝试以下方法.使用了标志monthlyCharge. boolean变量，用于检测单击了哪个按钮.

You can try the following. Used a flag monthlyCharge. A boolean variable to detect which button was clicked.

 <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>

这篇关于一页上有两个单独的条纹结帐表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！