javascript 使用自定义数量设置条带
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21086362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setting up stripe with custom amount
提问by lipenco
I have a problem with setting custom amount, I would like to set data-amount to whatever user will choose in input id="custom-donation-amount", how should I do that. my attempt doesn't work.
我在设置自定义金额时遇到问题，我想将 data-amount 设置为用户在输入 id="custom-donation-amount" 中选择的任何内容，我该怎么做。我的尝试不起作用。
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-image="images/button.png"
data-key="pk_test_FTZOOu9FL0iYJXXXXXX"
data-name="Fund"
data-label= "DONATE"
data-description="ysysys"
data-amount =
>
$('.donate-button').click(function(event){
var self = $(this);
var amount = 0;
amount = $('#custom-donation-amount').val();
if (amount === "") {
amount = 50;
}
amount = self.attr('data-amount');
amount = Math.abs(amount * 100);
});
</script>
<input type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00"/>
回答by metasoarous
The particular method (simple, embedded form) being used won't work towards the sought end. You must instead use the more flexible custom integration, as seen in the docs. The only thing not included in the provided example is how to hook up the amount input, which is not at all difficult.
正在使用的特定方法（简单的嵌入形式）不会朝着所寻求的目的工作。您必须改为使用更灵活的自定义集成，如文档中所示。提供的示例中唯一没有包括的是如何连接金额输入，这并不困难。
<input class="form-control"
type="number"
id="custom-donation-amount"
placeholder="50.00"
min="0"
step="10.00"/>
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton ">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_ppailxxxxxxxxxxxxxxxxxxx',
image: '/square-image.png',
token: function(token) {
// Use the token to create the charge with a server-side script.
// You can access the token ID with `token.id`
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// This line is the only real modification...
var amount = $("#custom-donation-amount").val() * 100;
handler.open({
name: 'Demo Site',
description: 'Some donation',
// ... aside from this line where we use the value.
amount: amount
});
e.preventDefault();
});
</script>
Note that you'll actually have to fill out the token:function passed to the StripeCheckout.configurecall. In particular, you'll need to either submit a form or an ajax request and handle that accordingly on your server. You will then use this information on the server, together with the secrete key, to send a payment creation request to Stripe. The Stripe documentation has details on what information will need to be sent to their API call, and thus, what information you'll need to pass along to the API call on yourserver. In particular, note that you'll probably have to do some additional grabbing of prices etc in your tokenfunction.
请注意，您实际上必须填写token:传递给StripeCheckout.configure调用的函数。特别是，您需要提交一个表单或一个 ajax 请求，并在您的服务器上进行相应的处理。然后，您将在服务器上使用此信息以及密钥，向 Stripe 发送支付创建请求。条纹文件对需要什么样的信息发送到他们的API调用，因此，你需要传递下去对API调用信息的详情您的服务器。特别要注意的是，您可能需要在您的token函数中进行一些额外的价格抓取等操作。
回答by adeneo
You'll need another script tag for that, you can't use javascript in a script tag that has a source.
为此，您将需要另一个脚本标记，您不能在具有源的脚本标记中使用 javascript。
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-image="images/button.png" data-key="pk_test_FTZOOu9FL0iYJXXXXXX" data-name="Fund" data-label="DONATE" data-description="ysysys" data-amount="0"></script>
<script type="text/javascript">
$(function() {
$('.donate-button').click(function(event) {
var amount = $('#custom-donation-amount').val();
$('.stripe-button').attr('data-amount', amount)
});
});
</script>
<input type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00 " />
回答by MatzFan
This is possible to get a variable amount in the simple checkout form. I'm not sure what framework you are using, but I was able to achieve this in my Ruby (Padrino - not Rails) app using gonas follows. 'charge_amount_pence' is a helper method returning a string representing the charge to be made. Re your particular need, this could be set to a variable picked by a user via an Ajax request, for example.
这可以在简单的结帐表格中获得可变金额。我不确定您使用的是什么框架，但我能够在我的 Ruby（Padrino - 不是 Rails）应用程序中使用gon实现这一点，如下所示。'charge_amount_pence' 是一个辅助方法，它返回一个表示要进行的费用的字符串。例如，根据您的特殊需要，这可以设置为用户通过 Ajax 请求选择的变量。
<script type="text/javascript">
window.gon = {};
gon.charge = charge_amount_pence;
</script>
And in the checkout script:
在结帐脚本中：
"data-amount" = gon.charge
"data-amount" = gon.charge
I actually use the same helper method in my controller to ensure the correct amount is actually charged.
我实际上在我的控制器中使用相同的辅助方法来确保实际收取正确的金额。
回答by Kamrul Khan
How about creating new stripe element? This worked for me,
如何创建新的条纹元素？这对我有用，
<script type="text/javascript">
$(function() {
$('.donate-button').click(function(event) {
var holder = document.getElementById('aNewDiv');
var script = document.createElement('script');
script.src = 'https://checkout.stripe.com/checkout.js';
script.setAttribute('class', 'stripe-button');
script.setAttribute('data-amount', $('#Amount').val()*100);
script.setAttribute('data-key',"pk_test_W0ML1BmfFMa6z3MgD90s7WeN");
script.setAttribute('data-name', "Fund");
script.setAttribute('data-description', "ysysys");
script.setAttribute('data-locale', "auto");
}
}
</script>
