Today we will build a simple credit card payment form that does the following
What you see below will be the final version of the form and uses the following libraries to accomplish the same:
I will walk you through the code with just the relevant elements to convey the crux of the implementation.
<div class="card"></div>
<form action="#">
<label>Credit Card Number </label>
<input type="text" name="number" />
<label>Expiration</label>
<input type="text" placeholder="MM/YY" name="expiry"/>
<label>Name</label>
<input type="text" name="name" />
<label>CVV </label>
<input type="text" name="cvv" />
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-info">Clear</button>
</form>
Card.js is an awesome library which takes care of most of the UI nitty-gritty details and is highly recommended. I have used Card.js without jQuery as seen below.
new Card({
form: 'form',
container: '.card',
formSelectors: {
numberInput: 'input[name=number]',
expiryInput: 'input[name=expiry]',
cvcInput: 'input[name=cvv]',
nameInput: 'input[name=name]'
},
width: 390, // optional — default 350px
formatting: true
})
You need to pass the selectors to the form elements and credit card preview container. You can use the default form selectors as specified in the documentation or define them explicitly.
Till this point, we have created a fully functional credit card form that enables the user to enter the details and preview the same for visual feedback. The complete code is available in this CodePen for your reference.
Now, we will handle the Stripe integration. There are three steps to follow before persisting the payment details of the user to our application backend:
Now that we have taken care of (1) by creating a usable form that captures all the details as parameters that can be passed on to Stripe, let’s proceed with Stripe integration.
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
This will help us access Stripe’s Javascript SDK and must ideally be added to tag or as the final line in the_
_ at the end of your code.In a separate tag, Stripe’s publishable key must be specified. Note that this key is different for sandbox and production environments.
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_8dIUQWEC1B3KtGDIF3Cd4XKO1');
</script>
The next step is tokenization, where Stripe turns a credit card number, expiration date, and CVC into a single use token that your application can use later. Under the hood, Stripe is effectively storing the card details in its vault of card information for a small amount of time and handing you back a reference token so that your server never knows the real information.
$(function() {
var expMonthAndYear = $('input[name=expiry]').val().split(" / ");
Stripe.card.createToken({
number: $('input[name=number]').val(),
cvc: $('input[name=cvv]').val(),
exp_month: expMonthAndYear[0],
exp_year: expMonthAndYear[1]
}, stripeResponseHandler);
});
var stripeResponseHandler = function(status, response) {
if (response.error) {
// Show appropriate error to user
} else {
// Get the token ID:
var token = response.id;
// Save token mapping it to customer for all future payment activities
}
}
We serialise all of the form elements and call Stripe.card.createToken (params, responseHandler) to save the credit card information with Stripe and get back a final reference token.
The second argument to Stripe.card.createToken — stripeResponseHandler — is a callback you provide to handle the response from Stripe. The handler is written to accept two arguments:
{
id: "tok_u5dg20Gra", // Token identifier
card: {...}, // Dictionary of the card used to create the token
created: 1461989418, // Timestamp of when token was created
currency: "usd", // Currency that the token was created in
livemode: false, // If this token was created with a live API key
object: "token", // Type of object, always "token"
used: false // Whether this token has been used
}
Saving this Token Identifier for a specific user is sufficient for all future payment related handshakes with Stripe.
The complete code is available here for your reference
Recommended Courses:
☞ JavaScript programming: JavaScript for beginners
☞ Projects In JavaScript & JQuery
☞ Javascript for Beginners Learn by Doing Practical Exercises
☞ Learn How To Become a JavaScript Developer from Scratch
☞ Javascript - From Beginner to Pro! - Build real world apps
☞ Making It All Fit Together with React and GraphQL
☞ Top 4 Programming Languages to Learn In 2019
☞ Top 4 Programming Languages to Learn in 2019 to Get a Job
☞ What To Learn To Become a Python Backend Developer