merchant_id

public_key

private_key

customer_id

payment_method_token

payment_method_nonce

order_id

Gain insights into Braintree API integration, delving into secure client-server SDK implementations. Discover transaction creation and hands-on payment processing with a React app demo.

braintree.tar.gz

braintree

braintree-node

run_webapp

run_webapp-original

Braintree is a payment service provider owned by PayPal. It allows you to accept online payments from customers in your applications by providing you with client-side and server-side Software Development Kits (SDKs).

This course explains Braintree APIs to create a transaction. The client SDK provides tools and techniques to securely collect payment information, while the server SDK consists of tools to enable secure processing of the collected payment information. You will learn both the client-side and server-side implementations in detail. After that, the course will provide hands-on experience of creating a transaction using Braintree APIs. Finally, you will interact with a demo Fruit Buying application written in React that accepts payments using the Braintree gateway.

Getting Started with Braintree API

After looking into the server-side code of our **Fruit Buying** application, we will now look into the client-side implementation before interacting with the final application.

# Client-side implementation

We have provided an implementation of our client in the widget below. We encourage you to go through the code and try to understand it by yourself before looking at the explanation.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Braintree Demo</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>


import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const Index = () => {
  return <div>Welcome to React!</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));

import React, { Component } from 'react';
import 'braintree-web';
import axios from 'axios';
import { BraintreeDropIn } from 'braintree-web-react'

export default class App extends Component {
  instance;

  state = {
    clientToken: null,
    requestFailed: false,
    fruits: {
      Apple: {quantity: 0, price: 0},
      Orange: {quantity: 0, price: 0},
      Banana: {quantity: 0, price: 0},
      Grapes: {quantity: 0, price: 0},
      Mango: {quantity: 0, price: 0}
    },
    totalPrice: 0,
    response: {}
  };

  fruits = [
    {
      name: 'Apple',
      price: 5
    },
    {
      name: 'Orange',
      price: 5
    },
    {
      name: 'Banana',
      price: 2
    },
    {
      name: 'Grapes',
      price: 10
    },
    {
      name: 'Mango',
      price: 5
    }
  ]

  getClientToken = async () => {
    try {
      const response = await axios.get(
        '{{EDUCATIVE_LIVE_VM_URL}}/requestToken'
      );
      const clientToken = response.data.clientToken;
      this.setState({ clientToken });
    } catch (err) {
      console.error(err);
      this.setState({ requestFailed: true });
    } 
  }

  componentDidMount() {
    this.getClientToken();
  }

  reset = async () => {
    this.setState(
      {
        clientToken: null,
        requestFailed: false
      }
    );
    this.getClientToken();
  }

  buy = async () => {
    try {
      const { nonce } = await this.instance.requestPaymentMethod();
      const { totalPrice } = this.state;
      const response = await axios.post(
        '{{EDUCATIVE_LIVE_VM_URL}}/payment',
        {
          paymentMethodNonce: nonce,
          price: totalPrice
        }
      );
      this.setState({response});
    } catch (err) {
      console.error(err);
      this.setState({ requestFailed: true });
    }
  }

  addToCart = (name,price) => {
    const { fruits } = this.state;
    let { totalPrice } = this.state;
    fruits[name].quantity += 1;
    fruits[name].price += price;
    totalPrice += price;
    this.setState({fruits, totalPrice});
  }

  removeFromCart = (name,price) => {
    const { fruits } = this.state;
    let { totalPrice } = this.state;
    if (fruits[name].quantity){
      fruits[name].quantity -= 1;
      fruits[name].price -= price;
      totalPrice -= price;
      this.setState({fruits, totalPrice});
    }
  }

  renderFruit = (name,price) => {
    return (<div style={{
      display:'flex',
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      width: '60%',
      height: '100%',
      paddingBottom: '5px',
      }}>

      <div style={{width: '100px'}}>Name: {name}</div>
      <div style={{width: '100px'}}>Price: {price}{'$ each'}</div>
      
      <button style={{
        width:'30px',
        height:'30px',
        fontSize: '16px',
        borderRadius: '4px'
      }}
      onClick={() => this.addToCart(name,price)}>
      + </button>

      <button style={{
        width:'30px',
        height:'30px',
        fontSize: '16px',
        borderRadius: '4px'
      }}
      onClick={() => this.removeFromCart(name,price)}>
      - </button>
    </div>
    );
  }

  renderCart = () => {
    const {fruits, totalPrice} = this.state;
    const pharoots = Object.entries(fruits);
    const cart =  pharoots.map(([key, value]) => {
      if (value.quantity){
        return(
          <div>
            <div>
              {key} {': '} {value.quantity} {', Price: '}{value.price}
            </div>
          </div>
        );
      }
    });
    return (<div>
      {cart}
      <div>Total Price: {totalPrice}</div>
    </div>);
  }

  render() {
    const responseLoaded = Boolean(Object.keys(this.state.response).length);
    let responseMessage = '';
    if(Object.keys(this.state.response).length){
      responseMessage= `Your purchase has been successful. Charged ${this.state.response.data.transaction.amount}\$`;
    }
    const { clientToken, requestFailed } = this.state;
    if (!clientToken && !requestFailed) {
      return (
        <div>
          <h1>Loading...</h1>
        </div>
      );
    } else if (requestFailed) {
      return (
        <div>
          <button onClick={this.reset}>Request Failed! Reset</button>
        </div>
      );
    } else {
      return (<div style={{
          display:'flex',
          flexDirection: 'column',
          justifyContent: 'space-evenly',
          alignItems: 'center',
          width: '100%',
          height: '100%'
          }}>

        <div style={{
          display:'flex',
          flexDirection: 'column',
          justifyContent: 'space-around',
          alignItems: 'center',
          width: '100%',
          height: '100%'
          }}>

        <h2>Buy Fruits Using Braintree</h2>
          {this.fruits.map(pharoot => {
            return this.renderFruit(pharoot.name,pharoot.price);
          })}

          {this.renderCart()}
        </div>

        <div style={{
          width:'50%'
          }}>

          <BraintreeDropIn
            options={{ authorization: this.state.clientToken }}
            onInstance={instance => (this.instance = instance)} />
        </div>

        <button style={{
          width:'120px',
          height:'30px',
          fontSize: '16px',
          borderRadius: '4px',
          marginTop:'10px'
        }}

        onClick={this.buy}> Purchase </button>

        <div><h3>{responseMessage}</h3></div>
          {responseLoaded && <div>Trancation Id: {this.state.response.data.transaction.id}</div>}
          {responseLoaded && <div>Customer Id: {this.state.response.data.transaction.customer.id}</div>}
          {responseLoaded && <div>Price Charged: {this.state.response.data.transaction.amount}</div>}
        </div>
      );
    }
  }
}


React

# Explanation

We learnt that while making a transaction, our client performs the following steps:

1. Send token request to our server
2. Receive client token from our server
3. Send payment information to Braintree to get a payment method nonce
4. Receive payment method nonce from Braintree
5. Send the payment information and payment method nonce to our server

Let's try to understand how we have implemented this workflow in the code.

## Client token request to server

We defined a method `getClientToken()` in **lines 46--57**. This method performs the following functions:

1. It makes a `GET` request to our server to request the client token.
2. Based on the server's response, the function updates the state variables accordingly using `this.setState()`.

The function `getClientToken()` is called inside `componentDidMount()` (**line 60**) and gets invoked right after the first `render()` lifecycle.

## Drop-in UI

We added the Braintree Drop-in UI in our application (**lines 216--218**)   to accept payment information from the customers. In the Drop-in UI options, we set the `authorization` parameter equal to the `clientToken` that was received from our server.

## Send payment information to server

In **lines 73--89**, we define a function `buy()`, which is invoked when the customer clicks the **Purchase** button (**line 229**). First of all, the function requests a *payment method nonce* from Braintree using `instance.requestPaymentMethod()`. It also retrieves the total price of the items in the cart from the state variables. It then sends the *payment method nonce* and the price to our server to make a payment using a *POST* request. Finally, based on the server's response, the function updates the state variables accordingly using `this.setState()`.

Look into the details of the client-side implementation of our demo application.

Introduction

Braintree Setup

Transaction With Braintree

Demo Application in React

Conclusion

Setting Up the Client