I am using Stripe / Checkout on a site in order to accept payments. Stripe is fairly simple to use this way, as they give the following script to embed in web pages:

<form id="monthly" action="/subscribe" method="POST">
  <script
    src=".js" class="stripe-button"
    data-key="pk_test_xxxxxxxxx"
    data-image=".png"
    data-name="My Website"
    data-description="Monthly Subscription"
    data-amount="6900"
    data-email="[email protected]"
    data-allow-remember-me=false
    data-label="Subscribe" >
  </script>
</form> 

What I would like to be able to do is pre-populate the email address value (data-email="[email protected]") with a variable that I have in my custom.js jQuery script. I am proficient with jQuery, but can I modify this embedded script with jQuery?

I am using Stripe / Checkout on a site in order to accept payments. Stripe is fairly simple to use this way, as they give the following script to embed in web pages:

<form id="monthly" action="/subscribe" method="POST">
  <script
    src="https://checkout.stripe./checkout.js" class="stripe-button"
    data-key="pk_test_xxxxxxxxx"
    data-image="http://mywebsite./assets/img/logo_raw.png"
    data-name="My Website"
    data-description="Monthly Subscription"
    data-amount="6900"
    data-email="[email protected]"
    data-allow-remember-me=false
    data-label="Subscribe" >
  </script>
</form> 

What I would like to be able to do is pre-populate the email address value (data-email="[email protected]") with a variable that I have in my custom.js jQuery script. I am proficient with jQuery, but can I modify this embedded script with jQuery?

• javascript
• jquery
• stripe-payments

2 Answers 2

You need to use the custom integration, and do something like this:

<script src="https://checkout.stripe./checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
  var email = "[email protected]"; // or use jQuery to dynamically populate the variable

  var handler = StripeCheckout.configure({
    key: 'pk_test_...',
    image: 'https://stripe./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.
    }
  });

  $('#customButton').on('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'Stripe.',
      description: '2 widgets',
      amount: 2000,
      email: email
    });
    e.preventDefault();
  });

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

data-email="[email protected]"

as mentioned in the question, works nowadays.