OAuth

Client-side Connect Flow

Availability

OAuth is in closed beta in production, and open beta in sandbox. Contact us to express interest in the production beta release.

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:

Display our provided Connect with Braintree button on your page:
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

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

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

HTML

<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

<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`.