This tutorial is based on the latest version of Braintree.js i.e, Braintree.js v2.
This is a tutorial on deploying an in-app checkout page using Braintree.js to create subscriptions in Chargebee and directly send card information to Braintree. Braintree's embedded form ensures that sensitive credit card information does not pass through your server, thereby reducing your PCI compliance requirements.
Here's a detailed set of steps on how the entire checkout flow with Braintree & Chargebee works:
With Braintree.js, your server does not handle any sensitive credit card data, which reduces the PCI compliance burden to a greater extent. You could also use Chargebee's hosted payment pages which are also PCI compliant.
'Honey Comics', our demo application, is a fictitious online comic book store providing a subscription service for comics. It sends comic books every week to subscribers via email. Users can sign up for a subscription from the website by providing account and payment information.
Before trying out this tutorial, you would need to setup the following:
The client side implementation starts by building a form for users to sign up.
The sample form we've used here contains fields for customer and card information.
The form snippet below shows the card number field for example.
Do not include the 'name' attribute for the card data fields in the form. This is to ensure that sensitive card information is not passed even in case of an inadvertent bug at the client's side.
For the other non-card fields, ensure that the ‘name' attribute is passed.
The form snippet below shows an account field. In this case the name attribute is set, as this has to be passed on to our demo application's server.
Now that the form is built, let's wire up Braintree.js into our checkout form. For Braintree.js to come into action, add it to the checkout page's header tag using the <script> tag.
A client token has to be embedded into the checkout form. This token is unique and has to be generated from the server using Braintree's SDK. Here, we have used a sample dummy method as mentioned in Braintree's docs. Please note that you will have to use Braintree's SDK for generating the actual client token.
You will have to use Braintree's tokenizecard(cardobject,callback) method to pass the card details to Braintree. The first argument should be a JSON object containing the card information and the second argument refers to a callback function which is invoked once the card tokenization is complete. Here's the sample of how the tokenizecard method has to be used.
Braintree triggers the callback function when the card tokenization operation is complete. The callback function's signature contains two parameters: the nonce and the error.
If the card was successfully tokenized, a valid temporary token is set and the error parameter is null.
However if the card tokenization fails, the temporary token is null and the error parameter contains the reason code for the error.
Upon successful tokenization of the card, you will have to pass the nonce along with the customer information to your server.
You have to download and import the client library of our choice. Then, configure the client library with your test site and its api key.
For the tutorial, we have configured the site and the credentials in a separate properties file. When the webapp is initialized, the client library gets configured.
For the tutorial, we have configured the site credentials in config/environments/development.rb
We setup the client library in config/initializers/chargebee.rb
For the tutorial, we have configured the site credentials in Config.php
To create a subscription in Chargebee, the temporary token (payment nonce) fetched earlier has to be passed along with the other POST parameters (from the checkout page's form submit event) using the Create Subscription API.
Find language specific samples below:
Although the parameters have been validated at the client's side, for additional security, we strongly recommend that you perform these validations on the server side as well.
For demonstrative purposes, we have skipped validating the parameters on the server's side.
So, what happens when a subscription is created successfully? Chargebee returns a success response in the json format which is wrapped in the form of a 'result' class by the client library. In case of an error , Chargebee returns an error response which is wrapped up as an exception and is thrown by the client library .
In case of successful checkout, redirect the user to a simple 'Thank You' page.
Here's how we validate user inputs and handle API call errors in this demo:
Client Side Validation: Chargebee uses jQuery form validation plugin to check whether the user's field inputs(email, zip code and phone number) are valid or not.
Server Side Validation: As this is a demo application we have skipped the server side validation of all input parameters. But we recommend you to perform the validation at your end.
Payment Errors: If a payment fails due to card verification or processing errors, Chargebee returns an error response which is thrown as a payment exception by the client library. We handle the exceptions in the demo application with appropriate error messages.
General API Errors: Chargebee might return error responses due to various reasons such as invalid configuration, bad request etc. To identify specific reasons for all error responses you can check the API documentation . Also take a look at the error handler file to check how these errors can be handled.
When you're all set, test your integration with some test transactions. Here are some credit card numbers that you can use to test your application:
For more test cards for testing different scenarios click here .