Choose an integration method

You can set up your client-side either with our Drop-in UI or with a custom integration.

Drop-in integration

Our Drop-in UI is the fastest way to set up your client-side integration.

For full details, see Drop-in Setup and Integration.

Custom integration

Alternatively, you can add Venmo to your current custom integration. Keep in mind, for compliance purposes, we require you to present the customer with an order summary before and after purchase.

The pre-purchase summary should include:

  • The items ordered
  • The total order price
  • An indication of Venmo as the payment method

The post-purchase summary can either be shown in the UI or sent via email. It should include:

  • The items purchased
  • The total purchase price
  • The customer's name
  • The customer's Venmo username

Failing to comply with these guidelines can lead to an interruption of your Venmo service.

note

Click here to download Venmo's brand guidelines, and be sure to follow them when configuring the Venmo button or making any other references to Venmo in your app.

Mobile Browser vs Desktop

The JavaScript v3 SDK supports Venmo as a payment option for both mobile and desktop websites, however the customer experiences will be different.

For mobile, the payment flow starts in the mobile web browser and switches to the Venmo app to authorize payment. After authorization, the app returns the customer to the browser and the SDK returns a payment method nonce.

For the desktop flow, a QR code will display in a modal over the website which the customer must scan with their mobile device. When successfully scanned, the customer will be directed to authorize the payment in the Venmo app. Once authorized, a nonce will be returned to the browser on the desktop and the QR code will be dismissed. You must set allowDesktop: true when creating the Venmo component in order to enable the desktop flow.

Installation

To set up the Braintree JavaScript v3 SDK, see the installation guide.

Then, load the venmo and data-collector components. If you are using script tags to load files, be sure to at least include:

HTML
<script src="https://js.braintreegateway.com/web/3.76.4/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.76.4/js/venmo.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.76.4/js/data-collector.min.js"></script>

Initialization

  1. Initialize a client using either a tokenization key or a client token from your server
  2. Create a Venmo component
// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {
  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  // Create a Venmo component.
  braintree.venmo.create({
    client: clientInstance,
    allowDesktop: true
  }, function (venmoErr, venmoInstance) {

    // Stop if there was a problem creating Venmo.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (venmoErr) {
      console.error('Error creating Venmo:', venmoErr);
      return;
    }

    // ...
  });
});

Verifying mobile browser support

Venmo is currently supported for most Android and iOS mobile web browsers. It does not support webviews.

When returning from the Venmo app, some mobile browsers can return customers to the same tab, while others relaunch your checkout page in a new tab. Each flow has tradeoffs:

  • Returning to the same tab is a more seamless user experience, but is only supported by iOS Safari and Android Chrome
  • Returning to a new tab is supported by most iOS and Android browsers, but may break the checkout flow for some integrations, such as single-page applications

To verify browser support:

  1. Determine if your checkout page supports returning to a new tab
    • If new tabs are supported, call hasTokenizationResult; if it returns true, call tokenize to receive the tokenization result immediately
    • If new tabs are not supported, pass allowNewBrowserTab as false when calling Venmo create
  2. Call isBrowserSupported to verify that the customer's browser supports Venmo
  3. Set allowDesktop: true if you plan to support the desktop flow
  4. Show Venmo as a payment option if the browser is supported
var venmoButton = document.getElementById('venmo-button');

braintree.venmo.create({
  client: clientInstance,
  allowDesktop: true
  // Add allowNewBrowserTab: false if your checkout page does not support
  // relaunching in a new tab when returning from the Venmo app. This can
  // be omitted otherwise.
  // allowNewBrowserTab: false
}, function (venmoErr, venmoInstance) {
  if (venmoErr) {
    console.error('Error creating Venmo:', venmoErr);
    return;
  }

  // Verify browser support before proceeding.
  if (!venmoInstance.isBrowserSupported()) {
    console.log('Browser does not support Venmo');
    return;
  }

  displayVenmoButton(venmoInstance);

  // Check if tokenization results already exist. This occurs when your
  // checkout page is relaunched in a new tab. This step can be omitted
  // if allowNewBrowserTab is false.
  if (venmoInstance.hasTokenizationResult()) {
    venmoInstance.tokenize(function (tokenizeErr, payload) {
      if (err) {
        handleVenmoError(tokenizeErr);
      } else {
        handleVenmoSuccess(payload);
      }
    });
    return;
  }
});

function displayVenmoButton(venmoInstance) {
  // Assumes that venmoButton is initially display: none.
  venmoButton.style.display = 'block';

  venmoButton.addEventListener('click', function () {
    venmoButton.disabled = true;

    venmoInstance.tokenize(function (tokenizeErr, payload) {
      venmoButton.removeAttribute('disabled');

      // ...
    });
  });
}

function handleVenmoError(err) {
  // ...
}

function handleVenmoSuccess(payload) {
  // ...
}

note

Click here to download Venmo's brand guidelines, and be sure to follow them when configuring the Venmo button or making any other references to Venmo in your app.

Launching Venmo payment flow

  1. Add a click event listener to the Venmo button that calls tokenize, which starts the payment flow

    • Mobile: The Venmo app must be installed to authorize payment; if it is not installed, tokenize opens a new browser tab with a Venmo landing page

      note

      Unlike with the iOS and Android integrations, it is not possible to determine if the Venmo app is installed on a device before displaying the Venmo button and initiating the flow.

    • Desktop: The Venmo app must be installed on the device scanning the QR code; if it is not installed, scanning the QR code opens a new browser tab with a Venmo landing page

  2. If the app is installed, the customer will be prompted to authorize the payment

  3. Upon completion:

    • Mobile: The app returns to the checkout page in the browser
    • Desktop: The website will dismiss the QR code modal
function displayVenmoButton(venmoInstance) {
  venmoButton.style.display = 'block';

  venmoButton.addEventListener('click', function () {
    venmoButton.disabled = true;

    venmoInstance.tokenize(function (tokenizeErr, payload) {
      venmoButton.removeAttribute('disabled');

      if (tokenizeErr) {
        handleVenmoError(tokenizeErr);
      } else {
        handleVenmoSuccess(payload);
      }
    });
  });
}

function handleVenmoError(err) {
  if (err.code === 'VENMO_CANCELED') {
    console.log('App is not available or user aborted payment flow');
  } else if (err.code === 'VENMO_APP_CANCELED') {
    console.log('User canceled payment flow');
  } else {
    console.error('An error occurred:', err.message);
  }
}

function handleVenmoSuccess(payload) {
  // Send payload.nonce to your server.
  console.log('Got a payment method nonce:', payload.nonce);
  // Display the Venmo username in your checkout UI.
  console.log('Venmo user:', payload.details.username);
}

Multiple profiles

If you have a custom integration and have onboarded multiple websites for Venmo processing with a single Braintree gateway, you'll need to pass the profile_id to specify which Venmo profile to present during the payment flow.

You'll also need to pass the profile_id when creating the transaction on the server side.

braintree.venmo.create({
  client: clientInstance,
  profileId: 'YOUR_VENMO_PROFILE_ID'
}, function (venmoErr, venmoInstance) {
  // ...
});

note

If you have multiple business profiles, the profile_id for each profile can be found by logging into the Control Panel, clicking the gear icon in the top right corner, selecting Processing from the drop-down menu, scrolling to Venmo, and clicking the Options link.

Collect device data

You must collect information about the customer's device before creating each transaction.

braintree.dataCollector.create({
  client: clientInstance,
  paypal: true
}, function (dataCollectorErr, dataCollectorInstance) {
  if (dataCollectorErr) {
    // Handle error in creation of data collector.
    return;
  }

  // At this point, you should access the dataCollectorInstance.deviceData value and provide it
  // to your server, e.g. by injecting it into your form as a hidden input.
  var deviceData = dataCollectorInstance.deviceData;
});

You'll need to pass this deviceData when creating the Venmo transaction from your server.

important

Be sure to pass device data as close to the transaction creation as possible. Doing so will help reduce decline rates.

Full example

This is a full example of the integration between Braintree and Venmo. This example will allow you to get started, and provides a reference while integrating into your existing code base.

var venmoButton = document.getElementById('venmo-button');

// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {
  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  braintree.dataCollector.create({
    client: clientInstance,
    paypal: true
  }, function (dataCollectorErr, dataCollectorInstance) {
    if (dataCollectorErr) {
      // Handle error in creation of data collector.
      return;
    }

    // At this point, you should access the deviceData value and provide it
    // to your server, e.g. by injecting it into your form as a hidden input.
    console.log('Got device data:', dataCollectorInstance.deviceData);
  });

  braintree.venmo.create({
    client: clientInstance,
    allowDesktop: true
    // Add allowNewBrowserTab: false if your checkout page does not support
    // relaunching in a new tab when returning from the Venmo app. This can
    // be omitted otherwise.
    // allowNewBrowserTab: false
  }, function (venmoErr, venmoInstance) {
    if (venmoErr) {
      console.error('Error creating Venmo:', venmoErr);
      return;
    }

    // Verify browser support before proceeding.
    if (!venmoInstance.isBrowserSupported()) {
      console.log('Browser does not support Venmo');
      return;
    }

    displayVenmoButton(venmoInstance);

    // Check if tokenization results already exist. This occurs when your
    // checkout page is relaunched in a new tab. This step can be omitted
    // if allowNewBrowserTab is false.
    if (venmoInstance.hasTokenizationResult()) {
      venmoInstance.tokenize(function (tokenizeErr, payload) {
        if (err) {
          handleVenmoError(tokenizeErr);
        } else {
          handleVenmoSuccess(payload);
        }
      });
      return;
    }
  });
});

function displayVenmoButton(venmoInstance) {
  // Assumes that venmoButton is initially display: none.
  venmoButton.style.display = 'block';

  venmoButton.addEventListener('click', function () {
    venmoButton.disabled = true;

    venmoInstance.tokenize(function (tokenizeErr, payload) {
      venmoButton.removeAttribute('disabled');

      if (tokenizeErr) {
        handleVenmoError(tokenizeErr);
      } else {
        handleVenmoSuccess(payload);
      }
    });
  });
}

function handleVenmoError(err) {
  if (err.code === 'VENMO_CANCELED') {
    console.log('App is not available or user aborted payment flow');
  } else if (err.code === 'VENMO_APP_CANCELED') {
    console.log('User canceled payment flow');
  } else {
    console.error('An error occurred:', err.message);
  }
}

function handleVenmoSuccess(payload) {
  // Send the payment method nonce to your server, e.g. by injecting
  // it into your form as a hidden input.
  console.log('Got a payment method nonce:', payload.nonce);
  // Display the Venmo username in your checkout UI.
  console.log('Venmo user:', payload.details.username);
}

Next Page: Server-side →