Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,

like image 610
VitalyT Avatar asked Nov 08 '22 13:11

VitalyT


1 Answers

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>
like image 181
koopajah Avatar answered Nov 14 '22 22:11

koopajah