Braintree Overview

Get introduced to Braintree, and learn about its different services and workflow while making a transaction.

We'll cover the following

Introduction to Braintree

Braintree is a full-stack payment platform. It allows you to accept online payments from customers in your application or website. The benefit of using Braintree is that it provides you with all services in one place, eliminating the need to separately set up payment gateways and merchant accounts.

Braintree is owned by PayPal. It offers many products such as Braintree Direct, Braintree Extend, Braintree Marketplace, etc. Each product offers a different set of tools and services.

Braintree Direct

The product we are interested in for this course is Braintree Direct. It consists of a set of tools that accept, verify, and process different payment methods. In other words, Braintree Direct consists of Software Development Kits (SDKs) for both the clients and servers.

  • The client SDK provides tools and techniques to securely collect payment information supplied by the customer.
  • The server SDK consists of tools to enable secure processing of the collected payment information.

Braintree workflow

To create a transaction, a multistep interaction occurs between the client, our server, and Braintree’s server:

  1. The client makes a token request from our server.
  2. Our server uses the server SDK to generate a client token and sends it to the client. The client uses this token to initialize the client SDK to communicate with Braintree.
  3. The client communicates the customer’s payment information to Braintree’s server, which the server uses to generate a payment method nonce. The nonce is sent back to the client.
  4. The client sends the payment method nonce to our server.
  5. The server uses the payment method nonce to create a transaction.

Demo application in React

In the final chapter of this course, we will integrate Braintree payment functionality in a demo Fruit Buying application, which is written in React. A preview of the application is given below.

Before running the application, you need to enter the three API keys (i.e., Merchant ID, Public Key, and Private Key) that you obtained from the Braintree sandbox account.

Note: These API keys will remain saved throughout the course and you don’t need to enter them repeatedly.

After you have set these keys, click the Run button to execute the application. First, the server fires up in the terminal tab. After a while, the application can be viewed in the output tab. You can also view the application in a new tab in your browser by clicking the app link written against the “Your app can be found at:” field.

You can play around with the application by adding items to your cart and making payments using dummy card numbers and random future expiration dates. The valid dummy card numbers for Braintree can be found here.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html", 
  filename: "./index.html"
});
module.exports = {
  entry: "./src/index.js",
  output: { // NEW
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  }, // NEW Ends
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
Demo application