CODEWITHSUNDEEP
javascriptjquerystripe-payments
Brett
Brett

Reputation: 20049

Possible to update config options in Stripe with custom checkout?

I'm using Stripe and have created a custom checkout, as per that page:

var handler = StripeCheckout.configure({
  key: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'some name',
    description: '2 widgets',
    currency: 'aud',
    amount: 2000
  });
  e.preventDefault();
});

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

However I am wondering if there is any way I can update the config options passed to open as I need to update the amount when the user makes a change.

...or is my best bet just re-initiating all or that part of it?

Whilst this code is in vanilla JavaScript I have changed it to jQuery on my end, so a jQuery solution would be preferred.

Upvotes: 0

Views: 44

Answers (1)

duck
duck

Reputation: 5470

The easiest way to do this is to define simple your amount in a variable, and then modify the value of that variable as you take actions on your page which change the price.

// define an amount, you could always modify this later
var myAmount = 2000;

// when the submit button is clicked
document.getElementById('customButton').addEventListener('click', function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'some name',
        description: '2 widgets',
        currency: 'aud',
        amount: myAmount
      });
      e.preventDefault();
});

One example you might find interesting, http://jsfiddle.net/ns2fezag/

Upvotes: 1

Related Questions