Dynamic Stripe Amount Checkout Dropdown

As all of you knew that Stripe is a big and power full Payment integration. And you can easily find out the checkout code in which you get the server side modal and it allows you to checkout with certain amount.

Let’s come to the point. We are going to write a code that will dynamically change the checkout amount by a drop down menu. Let’s suppose you have three types of packages as below.

  • Silver Package – 100$
  • Golden Package – 200$
  • Platinium Package – 500$

These are the packages that you have in your drop down menu. Now if you select the first one that is Silver package , Then stripe checkout modal should come with the amount of 100 dollars. When you select Golden package and click on buy now then modal should come with the 200 dollars checkout.

Here is the code below just you have to copy it and change the key as you have in your stripe account. This is ready to go code. If you still have any confusion or problem to run it do comment i’ll reply ASAp.

<center>
<br>
<div id="select_package">
<select data-button="customButton1" name="quantity" id="soflow">
  <option value="100">Silver Package - $100</option>
  <option value="200">Golden Package - $200</option>
  <option value="500">Platinum Package - $500</option>
</select>
</div>
<button id="customButton1" class="button" data-amount="1"
 data-description="Custom description for each button #1">Pay Now</button>
</center>
<hr>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_5Bc8Eg8I0SBivAE5H1uq3jVg',
//image: '/square-image.png',
token: function(token) {
  // Use the token to create the charge with a server-side script.
  // You can access the token ID with `token.id`
  //alert('token');
  console.log(token);
  
}
});

$('.button').on('click', function(e) {
	
	

// Get ID name 
var id = $(this).attr('id');

console.log('Button ID: ' + id);

// Find corresponding Quantity drop down and get value
var quantity = $('select[data-button="' + id + '"]').val();

//alert(quantity)
console.log('Quantity: ' + quantity);



// Grab custom data attributes
var price = 100;

console.log('Price: ' + price);

var description = $(this).attr('data-description');

console.log('Description: ' + description);

// Stripe Checkout does not support quantity, so we will just multiply
// the amount by the value of quantity
var amount = price * quantity;
//alert(description);
console.log('Total amount: ' + amount);

// Open Checkout with further options
handler.open({
  name: 'Demo Site',
  description: description,
  amount: amount
});
e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});

</script>
<style>
select#soflow, select#soflow-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>