一页上有两个单独的条纹结帐表格

Question

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

目前，我有两个按钮，一个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>

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

Answer 1

对于未来的读者，一个通用的解决方案如下：

<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 代码。

Answer 2

您可以尝试以下方法。使用了标志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>