Today we will build a simple credit card payment form that does the following
- does formatting and validation of necessary fields inherently
- integrates well with Stripe.js
- looks good on the eye with less code
What you see below will be the final version of the form and uses the following libraries to accomplish the same:
- Twitter Bootstrap (for grid layout and basic styling)
- Card.js (for validation and credit card preview)
- Stripe.js (for Stripe integration)
I will walk you through the code with just the relevant elements to convey the crux of the implementation.
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.
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:
- Collecting credit card information with Stripe.js
- Converting those payment details to a single-use token
- Submitting that token to our server
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 <head> tag or as the final line in the<body> at the end of your code.
In a separate <script> 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.
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:
- status is one of the status codes described in the API docs
- response is of the following form:
{
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
