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

Client-side Connect Flow

Add a Connect with Braintree button so a merchant can connect their Braintree account to your platform using Braintree Auth.

PrerequisitesAnchorIcon

Before you add the button, make sure you have:

  • The connect_url value your server generates with the Braintree server library's connect_url method. See Server-side Connect Flow.
  • A container on your page for the button, such as a DOM element, a DOM element ID, or a jQuery selector.

Add the Connect with Braintree buttonAnchorIcon

To make it easy to display the Connect with Braintree button, use the small JavaScript library braintree-oauth-connect.js. Add this library to your page and pass in the connect_url you generated on the server.

  1. HTML
Code snippet NOT FOUND
CONVERSION NOTE (SOP Project: Web SDK v4, Step 2): onError uses a function-literal callback (`onError: function (errorObject) { ... }` passed directly into `new BraintreeOAuthConnect({...})`). Flagged per the Web SDK v4 callback-migration tracking (DTBTWEB-1756). Soft flag only — not rewritten during conversion. See followup-checklist.md.

When the script runs successfully, the Connect with Braintree button appears inside the container element you specified.

The parameters available are:

ParameterDescription
connectUrl Required. The URL generated by the Braintree server library's connect_url method.
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, for example my-container-id.
  • 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: OAuth Flow →