CODEWITHSUNDEEP
javascripthtmlstripe-paymentspayment
VitalyT
VitalyT

Reputation: 1701

How combine Stripe payment library with multiple button chosen by radio button in HTML/JS

I'm using Stripe library as my payment option, i'd like to make a simple choose using radio button between multiple buttons , as i saw the stripe's API there is no option to pass other arguments inside their suggested form.

for example:

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

what is the best way to make multiple buttons and to choose between them using simple radio button like:

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

P.S

there is no "submit button" in form , this option is implemented inside Stripe's library.

Any suggestions ?

something like this or more basically :

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

BR,

Upvotes: 5

Views: 1163

Answers (2)

That Realty Programmer Guy
That Realty Programmer Guy

Reputation: 1599

Here's how I did it

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

Basically it amounts to waiting to call handler.open and filling in the optional values conditionally. I've renamed handler ActiveStripeHandler but its the same as the handler variable in Stripe's Checkout examples.

Anyway, call handler.open when the submit button is clicked and do a

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

Where subscriptionType is the name of your radio button group. Just change the arguments you're putting into handler.open and you'll have it.

Upvotes: 0

koopajah
koopajah

Reputation: 25642

You can simply pass extra input fields inside the form for Checkout. Those will get submitted automatically with the card token.

Your code would look like this:

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

Upvotes: 1

Related Questions