CODEWITHSUNDEEP
javascriptstripe-payments
Sketchybear
Sketchybear

Reputation: 67

Stripe Custom Checkout - Passing JS variable into amount

I'm attempting to use Stripe's custom checkout, but want to be able to pass the amount in as a variable using a select field. I'm manage to get as far as capturing the basic value, but am unsure how to then call it in the amount and make sure it updates as and when the select field is altered. 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Stripe Checkout Demo</title>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <h1>Hello<small>&nbsp;This a Stripe Checkout Test.</small></h1>
    <h2>Variable Amounts!</h2>

    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-primary" id="stripeButton">Order now!</button>

        <hr>
        <script src="https://checkout.stripe.com/checkout.js"></script>
        <script>
          function updateAmount() {
            document.getElementById("srt").value = document.getElementById("CardValues").value;
            var $cardValue = document.getElementById("srt").value;
            var $stripeAmount = parseInt($cardValue, 10);
            return $stripeAmount;
          }
        </script>

        <script>
          var handler = StripeCheckout.configure({
            key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
            image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
            locale: 'auto',
            currency: 'GBP',
            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('stripeButton').addEventListener('click', function(e) {
            // Open Checkout with further options:
            handler.open({
              name: 'Test cart',
              description: 'Gift Voucher',
              zipCode: true,
              // amount needs to be whatever is selected and then updated in $stripeAmount
              amount: 50000
            });
            e.preventDefault();
          });

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



        <select id="CardValues" onchange="updateAmount()" class="form-control">
          <option></option>
          <option value="5000">&pound;50.00</option>
          <option value="10000">&pound;100.00</option>
          <option value="15000">&pound;150.00</option>
        </select>
        <hr>
        <input class="form-control" type="text" id="srt" placeholder="get value on option select">

      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 382

Answers (1)

karllekko
karllekko

Reputation: 7198

The most straightforward way to do this is probably to just call your updateAmount function whenever you are about to open the Checkout popup and use its return value : 

// Open Checkout with further options:
handler.open({
  name: 'Test cart',
  description: 'Gift Voucher',
  zipCode: true,
  amount: updateAmount()
});

Upvotes: 1

Related Questions