"Plans"
Bootstrap 3.0.0 Snippet by santoshg

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row form-group"> <div class="col-xs-12"> <ul class="nav nav-pills nav-justified thumbnail setup-panel"> <li class="active" sadfsadf asdfasdfa sadfasd> <a href="#step-1"> <h4 class="list-group-item-heading">Step 1</h4> <p class="list-group-item-text">Select a Plan</p> </a> </li> <li class="disabled"> <a href="#step-2"> <h4 class="list-group-item-heading">Step 2</h4> <p class="list-group-item-text">Review Plan Details</p> </a> </li> <li class="disabled"> <a href="#step-3"> <h4 class="list-group-item-heading">Step 3</h4> <p class="list-group-item-text">Confirm</p> </a> </li> </ul> </div> </div> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1> STEP 1</h1> <button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-6 well text-center"> <form action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- a Stripe Element will be inserted here. --> </div> <!-- Used to display form errors --> <div id="card-errors" role="alert"></div> </div> <button class="StripeElement">Submit Payment</button> </form> <!--<button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>--> </div> <div class="col-md-6 well text-center"> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1 class="text-center"> STEP 3</h1> <button id="activate-step-3" class="btn btn-primary btn-lg">Confirm</button> </div> </div> </div> </div>
body { margin-top: 20px; } /** * The CSS shown here will not be introduced in the Quickstart guide, but shows * how you can use CSS to style your Element's container. */ .StripeElement { background-color: white; padding: 8px 12px; border-radius: 4px; border: 1px solid transparent; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; }
$(document).ready(function () { var navListItems = $('ul.setup-panel li a'), allWells = $('.setup-content'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this).closest('li'); if (!$item.hasClass('disabled')) { navListItems.closest('li').removeClass('active'); $item.addClass('active'); allWells.hide(); $target.show(); } }); $('ul.setup-panel li.active a').trigger('click'); // DEMO ONLY // $('#activate-step-2').on('click', function (e) { $('ul.setup-panel li:eq(1)').removeClass('disabled'); $('ul.setup-panel li a[href="#step-2"]').trigger('click'); $(this).remove(); }) $('#activate-step-3').on('click', function (e) { $('ul.setup-panel li:eq(2)').removeClass('disabled'); $('ul.setup-panel li a[href="#step-3"]').trigger('click'); $(this).remove(); }) // Create a Stripe client var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); // Create an instance of Elements var elements = stripe.elements(); // Custom styling can be passed to options when creating an Element. // (Note that this demo uses a wider set of styles than the guide below.) var style = { base: { color: '#32325d', lineHeight: '24px', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; // Create an instance of the card Element var card = elements.create('card', { style: style }); // Add an instance of the card Element into the `card-element` <div> card.mount('#card-element'); // Handle real-time validation errors from the card Element. card.addEventListener('change', function (event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); // Handle form submission var form = document.getElementById('payment-form'); form.addEventListener('submit', function (event) { event.preventDefault(); stripe.createToken(card).then(function (result) { if (result.error) { // Inform the user if there was an error var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server stripeTokenHandler(result.token); } }); }); });

Related: See More


Questions / Comments: