我正在尝试使用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()
});
关于javascript - 条纹自定义结帐-将JS变量传递给金额,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53154730/