Question

我正在尝试使用Stripe的自定义结帐功能，但希望能够使用选择字段将金额作为变量传递。我设法获取基本值，但是不确定如何在amount中调用它，并确保它在选择字段发生更改时以及在更新时进行更新。

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

Answer 1

最简单的方法可能是在您要打开Checkout弹出窗口并使用其返回值时仅调用updateAmount函数：

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

条纹自定义结帐-将JS变量传递给金额

1 个答案: