Set Up Your Clientanchor

The Braintree JavaScript SDK has several ways for you to collect customer payment information. The easiest way to get up and running is via the Drop-in UI. For other integrations, please see the JS SDK Overview.

Client side payment token flowDiagram demonstrating the required interaction between the client, Braintree servers and your server.

Setupanchor

Create or update your form element to include a container for Drop-in:

  1. HTML
<form id="checkout" method="post" action="/checkout">
  <div id="payment-form"></div>
  <input type="submit" value="Pay $10" />
</form>
<script src="https://js.braintreegateway.com/js/braintree-undefined.min.js"></script>
<script> braintree.setup( // Replace this with a client token from your server 'CLIENT_TOKEN_FROM_SERVER', 'dropin', { container: 'payment-form' } ); </script>

Get a client tokenanchor

To start up, Braintree.js needs a client token generated by your Braintree server SDK. To see how to generate one, please follow Simple Server (the next page) until you've completed the Generate a client token section.

Once you've generated a client token, embed it into your template.

  1. JavaScript
braintree.setup(CLIENT_TOKEN_FROM_SERVER, 'dropin', {
  container: 'payment-form'
});

There are a number of ways to get your client token into JavaScript so you can set up Braintree. Many people choose to interpolate the client token into the HTML/JavaScript itself; alternatively, you could load the client token from an AJAX call to an exposed client token URL on your server.

Test your integrationanchor

Create a sandbox accountanchor

If you haven't already, sign up for a free Braintree sandbox account:

Sign Up for a Braintree Sandbox Account

Log in to obtain your sandbox API credentials. You'll need your:

  • Sandbox merchant ID
  • Public key
  • Private key

Use these credentials for your development and testing.

important

When you go live, you will need to replace your sandbox API credentials with production API credentials.

Test valuesanchor

When testing in the sandbox, be sure to use our test card numbers (e.g. 4111111111111111) and nonces (e.g. fake-valid-nonce). Real payment method data will not work in the sandbox. See our Testing page for more details.

Send payment method nonce to serveranchor

A Braintree client-side integration sends payment information – like a credit card or a PayPal authorization – to Braintree in exchange for a payment method nonce, a one time use value that represents that payment method.

On your server, use a payment method nonce with a Braintree server SDK to charge a card or update a customer's payment methods.

By default, Braintree.js will add a hidden input named payment_method_nonce to your form. When your user submits the form, if you have not subscribed to the onPaymentMethodReceived callback, your form will be submitted with this value.

  1. HTML
<form id="checkout" method="post" action="/checkout">
  <div id="payment-form"></div>
  <input type="submit" value="Pay $10" />
</form>
<script src="https://js.braintreegateway.com/js/braintree-undefined.min.js"></script>
<script> braintree.setup( // Replace this with a client token from your server 'CLIENT_TOKEN_FROM_SERVER', 'dropin', { container: 'payment-form' } ); </script>
note

braintree.setup() must be called after the dropin container is created. If braintree.setup() runs before the container element exists, the drop-in UI will not appear.

world.greeted = trueanchor

At this point, you should have a working client-side checkout flow. When your user provides payment information, you receive a payment method nonce and send it to your server.

Next, your server closes the loop by using the payment method nonce to create a transaction.


Next Page: Simple Server