OAuth

Client-side Connect Flowanchor

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:

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

Display the buttonanchor

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

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

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

  1. 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 parametersanchor

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:

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