条纹自定义金额字段

Question

Stripe有一个新的非常简单的支付卡按钮。 我想破解它，所以我可以通过自定义金额。

我有一个表格的div

 <div>
 <form>
 <select> 
 <option value"1000">$10</option>
 <option value:2000>$20</option>
 </select>

或输入按钮

 <input id="amount" />
 <button id="buy">Buy Shirt</button>
 </form> 
 </div> 

当用户点击购买衬衫按钮时，显示带有条带按钮的付款的div，并且上面选择的值被传递到数据量条带字段。 输入中输入的金额必须乘以100，因为条带数据量必须以美分为单位

<div id='form' style="display:none">
<form action="" method="POST">
<script
src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_kgwan(blah blah)"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
</div>

没有Stripes doc如何做到这一点。

Answer 1

首先用普通按钮替换脚本：

          <button id="customButton" class="btn btn-primary">Pay</button>

然后插入这样的脚本。 就我而言，我的单选按钮的名称为“交易”。 我遍历它们以找到所选的那个，然后在条带打开函数中插入正确的值和描述：

      <script>
        $('#customButton').click(function(){
          var token = function(res){
            var $input = $('<input type=hidden name=stripeToken />').val(res.id);
            $('form').append($input).submit();
          };

            var dealValue;
            var deal = document.getElementsByName('deal');
            for (var i = 0, length = deal.length; i < length; i++) {
                if (deal[i].checked) {
                    dealValue = deal[i].value;
                }
            }

            var description;
            if(dealValue == 1000)
                description = "small t-shirt";
            else if(dealValue == 2000)
                description = "medium t-shirt";
            else if(dealValue == 3000)
                description = "large t-shirt";

          StripeCheckout.open({
            key:         'putyourkeyhere',
            amount:      dealValue,
            currency:    'usd',
            name:        'putyourname',
            description: description,
            panelLabel:  'Checkout',
            token:       token
          });

          return false;
        });
      </script>