If you want to integrate Stripe Credit Card Payment Gateway in your web application, then keep close attention in this article. As today i am going to share very useful and reusable set of codes for Credit card payment with stripe using bootstrap form.
Stripe Payment Gateway is a payment processing system to accept online payments. It was developed in an American technology company on September, 2011 by Patrick Collison and John Collison. Currently it is operating in over 20 countries to accept payments from internet for private individuals and businesses.
I have used bootstrap for form layout with stripe credit card payment gateway which will help you in your next web application to capture online payments.
1) Input box formatting as you start typing.
2) Generates a Stripe credit card token.
3) Form validation when as you type using jQuery Validation Plugin
4) Graceful error feedback for declined card, etc
5) Visual feedback using ajax form submission.
1) jQuery Validation Plugin
2) jQuery.payment library
3) Stripe.js
1 2 3 4 5 6 7 | <!-- Vendor libraries --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.2.3/jquery.payment.min.js"></script> <!-- If you're using Stripe for payments --> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> |
Add Below CSS code in your page before head tag closed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | /* Padding - just for asthetics on Bootsnipp.com */ body { margin-top:20px; } /* CSS for Credit Card Payment form */ .credit-card-box .panel-title { display: inline; font-weight: bold; } .credit-card-box .form-control.error { border-color: red; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6); } .credit-card-box label.error { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; } .credit-card-box .payment-errors { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; } .credit-card-box label { display: block; } /* The old "center div vertically" hack */ .credit-card-box .display-table { display: table; } .credit-card-box .display-tr { display: table-row; } .credit-card-box .display-td { display: table-cell; vertical-align: middle; width: 50%; } /* Just looks nicer */ .credit-card-box .panel-heading img { min-width: 180px; } |
Below javascript code is used to form validations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | var $form = $('#payment-form'); $form.find('.subscribe').on('click', payWithStripe); /* If you're using Stripe for payments */ function payWithStripe(e) { e.preventDefault(); /* Abort if invalid form data */ if (!validator.form()) { return; } /* Visual feedback */ $form.find('.subscribe').html('Validating <i class="fa fa-spinner fa-pulse"></i>').prop('disabled', true); var PublishableKey = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh'; // Replace with your API publishable key Stripe.setPublishableKey(PublishableKey); /* Create token */ var expiry = $form.find('[name=cardExpiry]').payment('cardExpiryVal'); var ccData = { number: $form.find('[name=cardNumber]').val().replace(/\s/g,''), cvc: $form.find('[name=cardCVC]').val(), exp_month: expiry.month, exp_year: expiry.year }; Stripe.card.createToken(ccData, function stripeResponseHandler(status, response) { if (response.error) { /* Visual feedback */ $form.find('.subscribe').html('Try again').prop('disabled', false); /* Show Stripe errors on the form */ $form.find('.payment-errors').text(response.error.message); $form.find('.payment-errors').closest('.row').show(); } else { /* Visual feedback */ $form.find('.subscribe').html('Processing <i class="fa fa-spinner fa-pulse"></i>'); /* Hide Stripe errors on the form */ $form.find('.payment-errors').closest('.row').hide(); $form.find('.payment-errors').text(""); // response contains id and card, which contains additional card details console.log(response.id); console.log(response.card); var token = response.id; // AJAX - you would send 'token' to your server here. $.post('/account/stripe_card_token', { token: token }) // Assign handlers immediately after making the request, .done(function(data, textStatus, jqXHR) { $form.find('.subscribe').html('Payment successful <i class="fa fa-check"></i>'); }) .fail(function(jqXHR, textStatus, errorThrown) { $form.find('.subscribe').html('There was a problem').removeClass('success').addClass('error'); /* Show Stripe errors on the form */ $form.find('.payment-errors').text('Try refreshing the page and trying again.'); $form.find('.payment-errors').closest('.row').show(); }); } }); } /* Fancy restrictive input formatting via jQuery.payment library*/ $('input[name=cardNumber]').payment('formatCardNumber'); $('input[name=cardCVC]').payment('formatCardCVC'); $('input[name=cardExpiry').payment('formatCardExpiry'); /* Form validation using Stripe client-side validation helpers */ jQuery.validator.addMethod("cardNumber", function(value, element) { return this.optional(element) || Stripe.card.validateCardNumber(value); }, "Please specify a valid credit card number."); jQuery.validator.addMethod("cardExpiry", function(value, element) { /* Parsing month/year uses jQuery.payment library */ value = $.payment.cardExpiryVal(value); return this.optional(element) || Stripe.card.validateExpiry(value.month, value.year); }, "Invalid expiration date."); jQuery.validator.addMethod("cardCVC", function(value, element) { return this.optional(element) || Stripe.card.validateCVC(value); }, "Invalid CVC."); validator = $form.validate({ rules: { cardNumber: { required: true, cardNumber: true }, cardExpiry: { required: true, cardExpiry: true }, cardCVC: { required: true, cardCVC: true } }, highlight: function(element) { $(element).closest('.form-control').removeClass('success').addClass('error'); }, unhighlight: function(element) { $(element).closest('.form-control').removeClass('error').addClass('success'); }, errorPlacement: function(error, element) { $(element).closest('.form-group').append(error); } }); paymentFormReady = function() { if ($form.find('[name=cardNumber]').hasClass("success") && $form.find('[name=cardExpiry]').hasClass("success") && $form.find('[name=cardCVC]').val().length > 1) { return true; } else { return false; } } $form.find('.subscribe').prop('disabled', true); var readyInterval = setInterval(function() { if (paymentFormReady()) { $form.find('.subscribe').prop('disabled', false); clearInterval(readyInterval); } }, 250); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!-- CREDIT CARD FORM STARTS HERE --> <div class="panel panel-default credit-card-box"> <div class="panel-heading display-table" > <div class="row display-tr" > <h3 class="panel-title display-td" >Payment Details</h3> <div class="display-td" > <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png"> </div> </div> </div> <div class="panel-body"> <form role="form" id="payment-form" method="POST" action="javascript:void(0);"> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label for="cardNumber">CARD NUMBER</label> <div class="input-group"> <input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus /> <span class="input-group-addon"><i class="fa fa-credit-card"></i></span> </div> </div> </div> </div> <div class="row"> <div class="col-xs-7 col-md-7"> <div class="form-group"> <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label> <input type="tel" class="form-control" name="cardExpiry" placeholder="MM / YY" autocomplete="cc-exp" required /> </div> </div> <div class="col-xs-5 col-md-5 pull-right"> <div class="form-group"> <label for="cardCVC">CV CODE</label> <input type="tel" class="form-control" name="cardCVC" placeholder="CVC" autocomplete="cc-csc" required /> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label for="couponCode">COUPON CODE</label> <input type="text" class="form-control" name="couponCode" /> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <button class="subscribe btn btn-success btn-lg btn-block" type="button">Start Subscription</button> </div> </div> <div class="row" style="display:none;"> <div class="col-xs-12"> <p class="payment-errors"></p> </div> </div> </form> </div> </div> <!-- CREDIT CARD FORM ENDS HERE --> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Ajax, Bootstrap, credit card payment with stripe, CSS, Download bootstrap templates, HTML 5, stripe payment gateway
