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

Braintree provides us with different client-side SDKs such as Android, iOS, and JavaScript. These SDKs allow us to integrate Braintree functionality at the front-end of our applications. 

The workflow of the events performed by our client using the Braintree SDK is shown below:

1. Token request sent to the server
2. Client token received from the server
3. Payment information sent to Braintree to get a *payment method nonce*
4. *Payment method nonce* received from Braintree
5. *Payment method nonce* sent to the server

Let's look into each of these steps in detail. (We will be looking into **JavaScript SDK**-based examples.)

## Drop-in UI

Braintree's [Drop-in UI](https://developer.paypal.com/braintree/docs/start/drop-in) is a complete checkout UI component that we can integrate into our custom applications to accept payments securely. The interface includes input fields for users to enter credit card details and options for quicker checkouts through PayPal, Venmo, Apple Pay, and Google Pay.

The Drop-in UI provides many benefits, including quick and easy integrations into our applications and a customizable and user-friendly interface. It can also be extended to accept multiple payment methods, including, but not limited to, PayPal and Apple Pay.

To add Drop-in UI to your page, you need to perform the following two steps:

1. Add an empty container to your page. We have added one on **line 6**.
2. Create a Drop-in instance using that container (or a string that functions as a query selector such as `#dropin-container`). We have used the `braintree.dropin.create` method in **lines 9--13** to create a Drop-in instance.

# Drop-in UI

Braintree's [Drop-in UI](https://developer.paypal.com/braintree/docs/start/drop-in) is a complete checkout UI component that we can integrate into our custom applications to accept payments securely. The interface includes input fields for users to enter credit card details and options for quicker checkouts through PayPal, Venmo, Apple Pay, and Google Pay.

The Drop-in UI provides many benefits, including quick and easy integrations into our applications and a customizable and user-friendly interface. It can also be extended to accept multiple payment methods, including, but not limited to, PayPal and Apple Pay.

To add Drop-in UI to your page, you need to perform the following two steps:

1. Add an empty container to your page. We have added one on **line 6**.
2. Create a Drop-in instance using that container (or a string that functions as a query selector such as `#dropin-container`). We have used the `braintree.dropin.create` method in **lines 9--13** to create a Drop-in instance.

Follow step-by-step instructions to set up a client application for Braintree.

Introduction

Braintree Setup

Transaction With Braintree

Demo Application in React

Conclusion

Client Setup for Braintree

Drop-in UI