Set Up Your Client
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.
Setup
Create or update your form
element to include a container for Drop-in:
- 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 token
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.
- 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 integration
Create a sandbox account
If you haven't already, sign up for a free Braintree sandbox account:
Sign Up for a Braintree Sandbox AccountLog 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.
Test values
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 server
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.
- 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>
world.greeted = true
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 →