使用自定义数量设置条带

Question

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

Answer 1

所使用的特定方法（简单的嵌入形式）无法达到预期目的。 您必须改为使用更灵活的自定义集成，如 in the docs 所示。 提供的示例中唯一没有包含的是如何连接数量输入，这一点都不难。

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

请注意，您实际上必须填写传递给StripeCheckout.configure 调用的token: 函数。特别是，您需要提交表单或 ajax 请求并在您的服务器上进行相应的处理。然后，您将在服务器上使用此信息以及密钥，向 Stripe 发送支付创建请求。 Stripe 文档详细说明了需要将哪些信息发送到他们的 API 调用，以及您需要将哪些信息传递给 您的 服务器上的 API 调用。特别要注意，您可能需要在 token 函数中进行一些额外的价格抓取等操作。

Answer 2

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

Answer 3

这可以在简单的结帐表格中获得可变金额。我不确定您使用的是什么框架，但我能够使用gon 在我的Ruby（Padrino - 不是Rails）应用程序中实现这一点，如下所示。 'charge_amount_pence' 是一个帮助方法，返回一个表示要进行的费用的字符串。根据您的特殊需要，例如，这可以设置为用户通过 Ajax 请求选择的变量。

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

在结帐脚本中：

"data-amount" = gon.charge

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

Answer 4

创建新的条纹元素怎么样？这对我有用，

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