Additional Features/
Braintree Auth (Beta)/
Client-side Connect Flow

Client-side Connect Flow

ButtonAnchorIcon

To make it easy to display the Connect with Braintree button, we have created the small JavaScript library braintree-oauth-connect.js. You will need to add this library to your page and pass in the connect_url you generated on the server.

  1. HTML
<script src="https://assets.braintreegateway.com/v1/braintree-oauth-connect.js"></script>
<script>
var connectUrl = connect_url_from_server;
var partner = new BraintreeOAuthConnect({
  connectUrl: connectUrl,
  // the ID of a DOM element, a DOM node, or a jQuery object
  container: 'bt-oauth-connect-container',
  onError: function (errorObject) {
    console.warn(errorObject.message);
  }
});
</script>
The parameters available are:

ParametersDescription
connectUrlRequired. The URL generated by the Braintree server library’s connect_url method.
containerRequired. The place on your page where the Connect with Braintree button will live. This can be: (1) A DOM element (2) The ID of a DOM element, e.g. my-container-id (3) 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.
environmentOptional. Accepts production (default if not provided) or sandbox.

Finish signup laterAnchorIcon

If you support new signups and the merchant decides they want to complete the form later, they can click on the Finish Later link located at the top of every page. This will redirect the merchant back to your site using the redirect URI you provided, but with user denied access added to the query string:

https://your.redirect.uri?error=access_denied&error_description=user%20denied%20access

You can then parse this response and keep the Connect with Braintree button in place so they can finish the flow at another time.

Next Page: OAuth Flow →