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

Question

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. 我正在尝试使用Stripe的自定义结帐功能，但希望能够使用选择字段将金额作为变量传递。 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. 我设法获取基本值，但是不确定如何调用该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

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 : 最简单的方法可能是在您要打开Checkout弹出窗口并使用其返回值时仅调用updateAmount函数：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-11-05 13:57:42

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-11-05 13:57:42

解决方案1
1 已采纳 2018-11-05 13:57:42