Two Separate Stripe Checkout Forms on One Page

Question

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

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

Hoping to Achieve:

• two separate buttons: one for one-time donation / the other for monthly donation.

FORM ENTRY - single donation

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

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

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>

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?

Answer 1

For future readers, a general solution to this is as follows:

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

Verify the payment & amount server-side as usual. Obviously, you can replace the jQuery code with more verbose native code.

Answer 2

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>