Javascript 设置带自定义金额的条带

我在设置自定义金额时遇到问题，我想将数据金额设置为用户在input id=“custom Givation 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"/>

$（'.donate按钮'）。单击（函数（事件）{
var self=$（这是）；
风险价值金额=0；
金额=$（“#自定义捐赠金额”）.val（）；
如果（金额=“”）{
金额=50；
}
金额=self.attr（'data-amount'）；
金额=数学绝对值（金额*100）；
});

您需要另一个脚本标记，不能在具有源代码的脚本标记中使用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 " />

$（函数（）{
$（'.donate按钮'）。单击（函数（事件）{
var金额=$（“#自定义捐赠金额”）.val（）；
$（'.stripe button'）.attr（'data-amount'，amount）
});
});

所使用的特定方法（简单、嵌入的形式）无法达到所寻求的目的。 相反，您必须使用更灵活的自定义集成，如图所示。 所提供的示例中唯一没有包括的是如何连接输入的金额，这一点都不困难

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

购买
var handler=StripeCheckout.configure({
键：“pk_测试_ppailxxxxxxxxxxxxxxxx”，
图像：'/square image.png'，
令牌：函数（令牌）{
//使用令牌通过服务器端脚本创建费用。
//您可以使用`token.ID'访问令牌ID`
}
});
document.getElementById（'customButton'）。addEventListener（'click'，函数（e）{
//这条线是唯一真正的修改。。。
var金额=$（“#自定义捐赠金额”）.val（）*100；
handler.open({
名称：“演示站点”，
描述：'一些捐赠'，
//…除了我们使用值的这一行之外。
金额：金额
});
e、 预防默认值（）；
});

---

请注意，实际上您必须填写传递给

StripeCheckout.configure

调用的

token:

函数。特别是，您需要提交表单或ajax请求，并在服务器上相应地处理它们。然后，您将在服务器上使用此信息以及机密密钥向Stripe发送付款创建请求。Stripe文档详细说明了需要向API调用发送哪些信息，以及需要向服务器上的API调用传递哪些信息。特别要注意的是，您可能需要在

代币

功能中进行一些额外的价格抓取等操作。

这可以在简单的结帐表单中获得可变金额。我不确定您使用的是什么框架，但我在我的Ruby（Padrino-而不是Rails）应用程序中实现了这一点，具体操作如下。”charge\u amount\u pence'是一个助手方法，返回表示要进行的收费的字符串。根据您的特殊需要，例如，这可以设置为用户通过Ajax请求选择的变量

<script type="text/javascript">
    window.gon = {};
    gon.charge = charge_amount_pence;
</script>

window.gon={}；
gon.charge=费用\金额\便士；

在签出脚本中：

“数据量”=gon.费用

---

实际上，我在控制器中使用了相同的助手方法，以确保实际收取的金额正确。

创建新的条带元素如何？这对我很有效

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

$（函数（）{
$（'.donate按钮'）。单击（函数（事件）{
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'，“ysys”）；
script.setAttribute（'data-locale'，'auto'）；
}
}

这确实解决了更新“数据量”属性的问题，但实际上并没有解决问题。提交后出现在表单弹出窗口中的值没有更新。不确定原因，但没有更新。Hi@metasoarous，你最终找到解决方案了吗？我现在也在同一条船上。我可以正确更新数据量，但没有“条纹”按钮仍然显示原始值。请参见下面我的答案；它对我有效。如果您有任何问题，请在此处提问。有关此问题的简单快速解决方法，请参见我的帖子-[1]：