Depth Series #3: Getting started with the Braintree Sandbox

Get started with Braintree using create-react-app and Express.js

Originally Published: October 5th 2018

I’ve been looking for alternatives to Stripe more for comparisons sake to see what would be easiest to implement and more relevant to what I am trying to achieve en masse down the road.

Prerequisites

If you are following along, you should sign up for a Sandbox account.

Building the Express server

mkdir server
cd server
yarn init -y
yarn add express body-parser morgan cors dotenv braintree
mkdir routes
touch server.js .env .gitignore routes/index.js

.gitignore

For the sake of doing things right, let’s just quickly update our file to ignore node_modules and the .env file.

.env
node_modules/
BRAINTREE_MERCHANT_ID=<use_your_merchant_id>
BRAINTREE_PUBLIC_KEY=<use_your_public_key>
BRAINTREE_PRIVATE_KEY=<use_your_private_key>

server.js

To set up the main server, update the server.js file to look like so:

routes/index.js

Let’s now update our routes/index.js to take setup the gateway and setup three routes — one for a simple ping test, another for fetching a client token and a third for making a payment:

Building the React frontend

create-react-app clientside
cd clientside
yarn add braintree-web braintree-web-drop-in-react axios

Updating the app

Go to our App.js file and clean it out. Replace the file with the following:

Image for post
Image for post

Making the payment

The following comes directly from the Node.js quickstart for Braintree.

Card number: 4111 1111 1111 1111
Expiry: 09/20
CVV: 400
Postal Code: 40000
Image for post
Image for post
Image for post
Image for post

The server terminal

If we checkout the server terminal, we should be able to see how events went down thanks to Morgan doing our logging:

Image for post
Image for post

Confirmation

If we now go back to our Sandbox dashboard, we can now see the successful transaction has been recorded!

Image for post
Image for post

Next steps

What’s next? Something I like about Braintree is UI extensibility. Although we used a frontend package on this occasion, try building out your own UI for taking payments!

Senior Engineer @ Culture Amp. Tinkerer and professional self-isolator in 2020.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store