We will address the 3DS flow specifics of creating a subscription in Chargebee using Braintree's Hosted Fields, integrated through Braintree.js and Chargebee APIs. We have also included the example code and Github links to it. This way, you can try out the tutorial with our mock checkout.
Braintree.js is a JavaScript library, which is made accessible via APIs to tokenize customer information by collecting sensitive card data using customizable Braintree Hosted Fields. For further details, take a look at Braintree's documentation .
Here's a detailed set of steps on how the Braintree.js & Chargebee 3DS checkout flow works:
Honeycomics is Chargebee's demo application. You can download its code and create the application to test out the flow mentioned in this tutorial.
Before trying out this tutorial, you 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 customer detail fields. In this case the name attribute is set, and has to be passed to Chargebee demo application's server.
| Resources
<div class="col-sm-6">
<div class="form-group">
<label for="customer[email]">Email</label>
<input id="email" type="text" class="form-control" name="customer[email]" maxlength="50"
data-rule-required="true" data-rule-email="true"
data-msg-required="Please enter your email address"
data-msg-email="Please enter a valid email address">
<small for="customer[email]" class="text-danger"></small>
</div>
</div>
Now that the form is built, integrate Braintree.js into the checkout form by adding it to the checkout page's header tag.
<script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js"></script> <script src="https://js.braintreegateway.com/web/3.29.0/js/three-d-secure.js"></script> <script src="https://js.braintreegateway.com/web/3.29.0/js/hosted-fields.js"></script>
While loading the payment details collection page, call Chargebee's Estimate API from your server to get the subscription amount.
The amount returned will be in sub-units(cents) and needs to be converted into units(euros). After that, send it to Braintree using the verifyCard function.
var estimateamount;
fetch('/braintree-js-3ds/estimate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
sub_plan_id: 'professional' // provide your plain id
})
}).then(response => response.json()).then(function (responseJSON) {
estimateamount = responseJSON.invoice_estimate.total;
// convert the cents to actual amount since chargebee returns the amount in cents
estimateamount = estimateamount/100;
});
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.
<script type="text/javascript">
//Replace it with your key
var clientToken = new braintree.api.Client({ clientToken : "<%= getBraintreeClientToken() %>"});
</script>
Now that you have Client token on your side, create components for temporary nonce and 3DS verification using the code given below:
function onClientCreate(err, client) {
components.client = client;
braintree.hostedFields.create({
client: client,
styles: {
input: {
'font-size': '14px',
'font-family': 'monospace'
}
},
fields: {
number: {
selector: '#number',
placeholder: '4000 0000 0000 002'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#date',
placeholder: '01 / 20'
}
}
}, onComponent('hostedFields'));
braintree.threeDSecure.create({
client: client,
version: 2,
}, onComponent('threeDSecure'));
}
function onComponent(name) {
return function (err, component) {
components[name] = component;
}
}
After the customer clicks on submit, you need to send the card details to Braintree and create a temporary token using hostedFields.tokenize() function.
In the callback function, you will get the temporary token. Using the temporary token, send verifyCard() request to Braintree.
Braintree then performs 3DS verification for the card and will respond with the 3DS verified nonce if successful. This nonce can then be passed on to Chargebee's create subscription API.
If the card issued does not support 3DS, verification will not happen and Braintree would return an unusable nonce(Not accepted by Chargebee APIs).
components.hostedFields.tokenize(function (err, payload) {
components.threeDSecure.verifyCard({
amount: estimateamount,
nonce: payload.nonce,
addFrame: addFrame,
removeFrame: removeFrame,
onLookupComplete: function (data, next) {
next();
}
}, function (err, payload) {
if ($("input[name='braintreeToken']").length == 1) {
$("input[name='braintreeToken']").val(payload.nonce);
}
else{
form.append("<input type='hidden' name='braintreeToken' value='" + payload.nonce + "' />");
}
var options = {
error: subscribeErrorHandler,
success: subscribeResponseHandler,
complete: hideProcessing,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: 'json'
};
$(form).ajaxSubmit(options);
});
});
Download and import the client library of your choice. Then, configure the client library with Chargebee Test site and its full-access API Key .
To create a subscription in Chargebee, the 3DS-verified 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.
Though the parameters have been validated at the client 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.
In case of successful checkout, you can redirect the user to a simple 'Thank You' page.
Here's how we validate user inputs and handle API call errors in this demo:
When you're all set, test your integration with some test transactions. Here are some credit card numbers that you can use to test the application:
For more test cards for testing different scenarios click here .