availability

OAuth is in closed beta in production, and open beta in sandbox. To express interest in the production beta release, contact our Business Development team.

Once you've generated a connect URL, the next steps in the OAuth sequence involve sending the merchant to Braintree for authorization. To do this, you'll need to:

  1. Display our provided Connect with Braintree button on your page: Connect with Braintree
  2. Specify parameters for the button:
    • connectUrl (required)
    • container (required)
    • onError
    • environment

Display the button

The easiest way to add the Connect with Braintree button to your page is with the braintree-oauth-connect.js library:

HTML
Copy
Copied
<script src="https://assets.braintreegateway.com/v1/braintree-oauth-connect.js"></script>

Alternatively, you can manually add the button image to your page:

HTML
Copy
Copied
<img src="https://s3-us-west-1.amazonaws.com/bt-partner-assets/connect-braintree.png" alt="Connect with Braintree" width="328" height="44">
note

If the merchant returns to this page after authorizing your application, you should not initialize braintree-oauth-connect.js or display the Connect with Braintree button again.

Specify parameters

With the button added to your page, use BraintreeOAuthConnect to specify the connect URL you generated on your server, the container on the page where the button will live, and any other desired parameters:

HTML
Copy
Copied
<script>
var connectUrl = connect_url_from_server;
var partner = new BraintreeOAuthConnect({
  connectUrl: connectUrl,
  container: 'my-container-id' // DOM node, DOM element ID, or jQuery object
});
</script>
Parameter Description
connectUrl Required. The URL you generated on your server that points to a Braintree website with a consent UI appropriate for the requested OAuth scopes.
container Required. The place on your page where the Connect with Braintree button will live. This can be a DOM element, the ID of a DOM element (e.g. my-container-id), or (if using jQuery) a jQuery selector.
onError(function callback(error) {}) Optional. Takes a callback function to receive errors as an object with a message property.
environment Optional. Accepts production (default if not provided) or sandbox.

Next Page: Access Tokens →

Still have questions?

If you can’t find an answer, contact our Support team