Recurring billing is a complex feature that is too common in most modern SAAS applications, if you had the luxury of setting up recurring billing using a service like Authorize.net, you know what the pains and struggles that one has to go through in order to process payments online. Not only are you constantly checking if you are PCI compliant, but you also have the overhead of working with users sensitive data. But this is 2015 we should have a better way to accept and process recurring billing online right? Yes, you are right!
I recently found out about Braintree, from the startup world. The one feature that really brought my attention to this payment provider was that it was purchased by Paypal, next was the actual companies using this service Airbnb, and Github to just name a few. The documentation for the API is very pretty, but just because something is pretty it does not make it useful.
Requirements before getting started
- Create a sandbox account
- Have NodeJS installed
- Have Bower installed
- Created at least one Recurring Billing Plan on the merchants dashboard
Example code for a Drop-in
Example code for a Node.js application
Like most things, the example that I’m providing can be found at Github, or you can follow along and read the code. Since this actual code can’t be reused as a one to one correlation into multiple application since it’s just a simple integration of an API into an application let’s go with the following tweet.
— Rick (@rick4470) October 15, 2015
Let’s now get our project going with a simple express application
The following commands will set us up with a default project, the project can quickly be started up with the following command.
Now let’s pull in the required libraries for the project
- Braintree for the server
- Braintree for the client
Depending on who the client is, this could be a mobile device or a browser. For this example, we will be using a browser as the client.
Let’s pull the library for the server
Next, up we need to create a controller that we can test without having to deal with routes. Let’s create it by using the following commands.
Let’s now export that controller out with some boiler plate code.
Now let’s give our controller some logic. To start using the Braintree library you will need to create a developers account with braintree. Once your account is created you will be able to access the following values for your application.
Now that the setup is out of the way let’s now create an action called
getPlansAvailable(). We could put this two methods together but we want to be able to test them separately.
Now that we have two actions, our tests are just begging to be written. But before we can write any tests let’s pull in the testing framework mocha and chai.
Now let’s write two simple tests by editing the following file.
The test is simple and straight forward to understand. When your application grows in complexity so should your tests. Now that we have the tests out of the way let’s give a response out to the client in our routes file.
As you can see I’m not handling any of the else statements in the router, here is where you would want to report to the user if the Paypal service is down. Or handle the event on however you want your application to react to that specific event.
You might be asking why we are returning a token and the plans to the view, the token is what’s going to allow us to send the information over to Braintree and the plans will allow us to display our current plans to our users. We will come back to the server side of this once we finish the client side work.
One last thing before moving on to the client, this demo does not require any users routes so feel free to remove the following route.
Let’s pull the library for the client (browser)
The default rendering engine for the express boilerplate code is jade, but I’m not a big fan of jade maybe it’s because of all the tabs or just me missing the
<> everywhere. Let’s switch over to EJS. Edit the following file
And now let npm know about this changes with the following command.
Nice! Now we have ejs engine configured it’s time to clean up our views folder and prepare it for our brand new response.
The application is now going to need the following files in order for it to render a page to the browser.
All of the renders have to be changed in the app.js file in order to render out the views to the client.
The braintree client API requires a setup before the drop-in works correctly in your application, let’s create a new file
Make sure that all the required files are included into your application. The footer is a great place to insert all of your running scripts.
If you want to keep the promise to your users that there credit card information will not interact with your server, then the first step to completing this is to go over and get a badge to communicate that message to your users. Don’t forget to change the YOUR_MERCHANT_ID to your merchant id.
The rest of the HTML markup is straigh forward.
Now we can obtain a nonce, what the heck is a nonce anyway? This was my exact thought, here is where the documentation gets a bit fuzzy. Now for my clarification.
nonce: a one time use value that represents that payment method.
Still not clear? take a look at the following diagram.
In summary, the nonce allows us to be SAQ A compliant, by not allowing users sensitive information to enter our servers. The nonce will allow for you to be able to make API calls to the Braintree service without having the users sensitive information on every call.
The subscription is almost complete if you remember back at the
/subscribe with a route and a controller action.
If you take a close look at the code above, you can quickly see that it’s difficult to test, and this is due to the tight coupling of the nonce that’s being used. There is ways to generate that nonce with a tool like phantom, but that’s beyond the scope of this small application.
The route is taking care of the post value, by checking if both a
plan and a
payment_method_nonce are received. Then our controller takes care of the rest with the
If you would like to test out the form with some fake values use the following credit card values.
4111 1111 1111 1111
That’s all there is to set up a recurring billing cycle with Braintree. This setup can become more complex and that will depend on your requirements, but if you get stuck in any of the parts feel free to reach out on twitter or go over the documentation for Braintree.
In summary, Braintree is a great easy tool to use to setup and manage subscriptions, and it sure does help with programs like “Ignition: Doing Our Part to Help You Get Started, The First $50,000 is on Us”.
Till next time,
I always had a passion for the field of STEM (Science, Technology, Engineering, and Math) and I knew I wanted to do something to make a difference in the world. I just didn’t know where to start. I was an immigrant in a new country, grew up in a tough environment, and wasn’t sure how… Read More