Stripe Credit Card Payment Using Bootstrap Form

By: Prem Tiwari | Last Updated: September 17, 2016 | In: Bootstrap, Featured, Freebies, html5

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.

credit-card-payment-with-stripe

Download Demo

Module Features

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.

External Libraries

1) jQuery Validation Plugin
2) jQuery.payment library
3) Stripe.js

Include Vendor library Files

CSS Code

Add Below CSS code in your page before head tag closed.

/* 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;

}

JS Code

Below javascript code is used to form validations.

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

HTML Code For Payment Form

<h3 class="panel-title display-td" >Payment Details</h3>

</div>

<label for="cardNumber">CARD NUMBER</label>

<input

type="tel"

class="form-control"

name="cardNumber"

placeholder="Valid Card Number"

autocomplete="cc-number"

required autofocus

</div>

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

<input

type="tel"

class="form-control"

name="cardCVC"

placeholder="CVC"

autocomplete="cc-csc"

required

</div>

<label for="couponCode">COUPON CODE</label>

</div>

<button class="subscribe btn btn-success btn-lg btn-block" type="button">Start Subscription</button>

</div>

</div>

</form>

</div>

Download Demo

About: Prem Tiwari

Prem Tiwari is the founder of freewebmentor.com and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby. View all posts by Prem Tiwari

Stripe Credit Card Payment Using Bootstrap Form

Module Features

External Libraries

Include Vendor library Files

CSS Code

JS Code

HTML Code For Payment Form

About: Prem Tiwari

You may also like:

Discount Coupons

Featured eBook

WordPress Security Guide

Popular Categories

Recommended Posts

Pincode Finder

Online Pincode Finder