Overview

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

Read on to learn more about:

See also

About this guideanchor

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 Directanchor

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 needanchor

A sandbox accountanchor

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 SDKsanchor

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 UIanchor

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 worksanchor

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

Client and server payment token flowDiagram demonstrating the required interaction between the client, our servers, and your server.
Step 1anchor

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

Step 2anchor

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

Step 3anchor

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

Step 4anchor

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

Step 5anchor

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

note

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

Getting helpanchor

  • 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 upanchor

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


Next Page: Set Up Your Client →