如何将Stripe付款库与html/js中无线电按钮选择的多个按钮组合

Question

我正在使用条纹库作为我的付款选项，我想简单地选择多个按钮之间的单选按钮，因为我看到了Stripe的API，因此无法通过其建议形式的其他论点。

例如：

<form action="/tt-server/rest/billing/subscribe" method="POST">
        <script
                src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                data-key="pk_test_nz81cav6bbcEP4gxWxp1yFw7"
                data-image="https://storage.googleapis.com/tt-images/company/img_2015111514124193.png"
                data-name="myCompany"
                data-description="Pro Subscription ($400 per month)"
                data-panel-label="Subscribe"
                data-label="Subscribe"
                data-amount="400">
        </script>
    </form>

使用简单的广播按钮，例如：

<input type="radio" name="imgsel" value="subscribe" checked="checked" />

P.S

没有形式的"提交按钮"，此选项是在Stripe库中实现的。

有什么建议吗？

基本上类似的东西：

https://www.formget.com/wp-content/uploads/2014/08/online-single-product-payment-form.gif

br，

Answer 1

您可以简单地将表单内的额外输入字段传递以进行结帐。这些将通过卡令牌自动提交。

您的代码看起来像这样：

<form action="/tt-server/rest/billing/subscribe" method="POST">
    <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="pk_test_nz81cav6bbcEP4gxWxp1yFw7"
            data-image="https://storage.googleapis.com/tt-images/company/img_2015111514124193.png"
            data-name="myCompany"
            data-description="Pro Subscription ($400 per month)"
            data-panel-label="Subscribe"
            data-label="Subscribe"
            data-amount="400">
    </script>
    <input type="radio" name="imgsel" value="subscribe" checked="checked" />
</form>

Answer 2

这是我做的方式

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
$().ready(function(){
    var ActiveStripeHandler= StripeCheckout.configure({
      key: "pk_test_XXXXXXXXXXXXXXX",
      image: "https://stripe.com/img/documentation/checkout/marketplace.png",
      locale: "auto",
      token: function(token,args=null) {
        // submit to your server
        console.log(token,args);
      }
    });
    $('#submitButton').on("click", function(e) {  
      var opts= {
                    name: "Stripe.com",
                    description: "Annual",
                    zipCode: true,
                    billingAddres: true,
                    ing: "https://static.company.com/logo.png",
                    locale: "auto",
                    amount: 0
                };
// HERE IS WHERE YOU CHECK THE RADIO BUTTON GROUP 'subscriptionType'
      switch ($('input[name=subscriptionType]:checked').val()){
        case "1":   opts.description="Annual Subscription";
                    opts.amount=42000;
                    ActiveStripeHandler.open(opts);
                    break;
        case "2":   opts.description="Monthly Subscription";
                    opts.amount=4500;
                    ActiveStripeHandler.open(opts);
                    break;
        default:    alert("Sorry there was an error, please contact us for assistance. DISCOUNT CODE: CHKOUTERR_F9A0389A");
                    break;
      }
    });
    window.addEventListener("popstate", function() {    handler.close();    });     // Close Checkout on page navigation:
});

</script>

基本上等于等待调用handler.open并有条件地填充可选值。我已重命名为handler ActivEstripeHandler，但与Stripe的结帐示例中的handler变量相同。

无论如何，在单击"提交"按钮并进行A

时致电handler.open

switch ($('input[name=subscriptionType]:checked').val()){ ... }

其中 subscriptionType是您的广播按钮组的名称。只需更改您将您放入handler.open中的参数即可。