Founder at work

Master the skills to create and launch your next SaaS company

How to setup Braintree Recurring Billing using NodeJS

by 96 Comments

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

Example code for a Drop-in

If you are trying to setup a simple Drop-in option all you have to do is place some javascript to your form and your done! How awesome is that? But just like most things you’re application is probably not that simple.

HTML Markup

Javascript

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.

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.

Server Setup

Let’s pull the library for the server

Controllers Setup

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.

  • your_merchant_id
  • your_public_key
  • your_private_key

Now that the setup is out of the way let’s now create an action called getClientToken() and 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.
vim controllers/test/test_paypal.js

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.
vim routes/index.js

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.

Client Setup

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
vim app.js


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.

Javascript changes

All of the renders have to be changed in the app.js file in order to render out the views to the client.

HTML index.ejs

HTML header.ejs

JS main.js

The braintree client API requires a setup before the drop-in works correctly in your application, let’s create a new file public/javascripts/main.js. And do that setup there.

HTML footer.ejs

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.

HTML home.ejs

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.

Results

Setup Node.js

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.

src

Still not clear? take a look at the following diagram.

Token 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 home.ejs file the javascript from Braintree will be posting the payment nonce to our server. Let’s capture this at /subscribe with a route and a controller action.

Controller


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.

Route

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 createSubscription action.

HTML subscribed.ejs

Result

GUI Testing

If you would like to test out the form with some fake values use the following credit card values.
Number: 4111 1111 1111 1111
Expiration date: 10/2022

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,

Rick H.