[英]Stripe Custom Checkout - Passing JS variable into amount
我正在嘗試使用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> 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">£50.00</option> <option value="10000">£100.00</option> <option value="15000">£150.00</option> </select> <hr> <input class="form-control" type="text" id="srt" placeholder="get value on option select"> </div> </div> </div> </body> </html>
最簡單的方法可能是在您要打開Checkout彈出窗口並使用其返回值時僅調用updateAmount
函數:
// Open Checkout with further options:
handler.open({
name: 'Test cart',
description: 'Gift Voucher',
zipCode: true,
amount: updateAmount()
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.