Single or Recurring Choice

STRIPE CONFIGURATION

Create the recurring plans in your stripe.com admin panel. Use the plan IDs as the ‘value’s in the select element.

HTML

<h1>Single or Recurring Choice</h1>
<div id="payment_type">
    <strong>Please select a payment type:</strong>
    <input class="option" type="radio" name="group1" value="single" checked="checked" /> Single 
    <input class="option" type="radio" name="group1" value="recurring" /> Recurring
</div>

<div id="single">
<!-- your single payment options -->
</div>

<div id="recurring">
<!-- recurring payment options --> 
</div>

JAVASCRIPT

    (function($){
        $(document).ready(function(){
            $("#recurring").hide();
            $(".option").click(function(){
                if($(this).val()=="single"){
                    $("#recurring").hide("slow", function(){
                        $("#single").show("slow");
                    });
                } else {
                    $("#single").hide("slow", function(){
                        $("#recurring").show("slow");
                    });
                }
            });
        });
    })(jQuery);

Please select a payment type: Single Recurring

Payment Options

Option $5$10$25

Billing Information

First Name

Last Name

Email Address

Payment Information

Card Number

CVC

Expiration 010203040506070809101112  /  202320242025202620272028202920302031203220332034

Submit

Thanks for purchasing!

Name: {fname} {lname}

Option: {plan}

Amount: $ {amount}

Payment Options

Option $20 per month$10 per month

Billing Information

First Name

Last Name

Email Address

Payment Information

Card Number

CVC

Expiration 010203040506070809101112  /  202320242025202620272028202920302031203220332034

Submit

Thanks for purchasing!

Name: {fname} {lname}

Option: {plan}

Amount: $ {amount}