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

您可以在表单内部为Checkout传递额外的输入字段。这些将通过卡令牌自动提交。

您的代码如下所示：

<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的Checkout示例中的handler变量相同。

无论如何，单击提交按钮时调用handler.open并执行

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

其中subscriptionType是单选按钮组的名称。只需更改您放入handler.open的参数，就可以了。

如何将条带支付库与HTML / JS中单选按钮选择的多个按钮相结合

2 个答案: