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