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

Prerequisites

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

.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

routes/index.js

Building the React frontend

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

Updating the app

Making the payment

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

The server terminal

Confirmation

Next steps

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