This guide will walk you through a basic Braintree Direct integration that accepts credit card payments in sandbox using our Drop-in UI.

About this guide

By following this basic payments integration guide, you will have a base layer on which you can add additional payment methods, fraud tools, and other features that enhance your integration.

It will also cover key concepts that you should familiarize yourself with. One of these key concepts is Braintree Direct.

Braintree Direct

Braintree Direct is a set of tools to accept and process cards, PayPal, and wallets such as Apple Pay, Google Pay, and Venmo (US only). It also includes everything you need to help prevent fraudulent transactions, manage data security, and streamline operations.

What you will need

A sandbox account

As with any secure payment integration, you will first need to set up authorization. The Braintree sandbox allows you to set up a test environment to run transactions using test credit card numbers and explore the functionality of the Braintree gateway.

Sign Up for a Braintree Sandbox Account

Client and server SDKs

Our client SDK enables you to securely collect payment information from your customers and the server SDK enables you to act on the collected payment information.

We have SDKs for the following client platforms and server languages:

  • Client SDKs for Android, iOS, and JavaScript

  • Server SDKs for Java, .NET, Node.js, PHP, Python, and Ruby

The client SDKs require authorization. In this guide, we'll use a client token – the most flexible form of authorization. To learn more about the types of authorization see the Client Authorization guide.

Checkout UI

In this integration guide, we will use the Drop-in UI for either web or mobile, based on the client and server SDK you choose.

For more flexibility and customization, explore Hosted Fields for web or you can build your own custom integration using for mobile applications using our iOS or Android SDKs.

How it works

This diagram shows how your client, your server, and Braintree interact:

Client and server payment token flow Diagram demonstrating the required interaction between the client, our servers, and your server.

Step 1

Your front-end requests a client token from your server and initializes the client SDK.

Step 2

Your server generates and sends a client token back to your client using the server SDK.

Step 3

The customer submits payment information, the client SDK communicates that information to Braintree and returns a payment method nonce.

Step 4

Your front-end sends the payment method nonce to your server.

Step 5

Your server code receives the payment method nonce and then uses the server SDK to create a transaction.


Check out this quick start tutorial to see how this works in code.

Getting help

  • Support articles: Learn about the business side of processing with Braintree and how to use the Control Panel.
  • Reference: Explore our client and server SDK references and other API reference details.
  • Contact sales: Discuss how our products, features, and pricing options can work for your business.
  • Contact support: On our dedicated help site, select your issue, see relevant documentation, and submit a request to our support team.

Next up

We're glad you're here! Next, you'll integrate Braintree into your client.

Next Page: Set Up Your Client →