用自定义金额设置条纹 [英] setting up stripe with custom amount

问题描述

我在设置自定义金额时遇到问题，我想将数据量设置为用户将在输入id ="custom-donation-amount"中选择的任何内容，我该怎么做.我的尝试不起作用.

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.

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

推荐答案

正在使用的特定方法(简单的嵌入式形式)将无法达到预期的目的. 相反，您必须使用更灵活的自定义集成，如在文档中 所示. 提供的示例中唯一没有包括的是如何连接输入的金额，这一点都不困难.

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>

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

Note that you'll actually have to fill out the token: function passed to the StripeCheckout.configure call. 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 your server. In particular, note that you'll probably have to do some additional grabbing of prices etc in your token function.

这篇关于用自定义金额设置条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！