The JavaScript v3 SDK supports Venmo as a payment option for mobile websites if the customer's mobile device has the Venmo mobile app installed.

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.

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
Copy
Copied
<script src="https://js.braintreegateway.com/web/3.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/js/venmo.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/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
JavaScript
Copy
Copied
// 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
  }, 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 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 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. Show Venmo as a payment option if the browser is supported
JavaScript
Copy
Copied
var venmoButton = document.getElementById('venmo-button');

braintree.venmo.create({
  client: clientInstance,
  // 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
    • 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.

  2. If the app is installed, the browser switches to the app to authorize payment
  3. Upon completion, the app returns to the checkout page in the browser
JavaScript
Copy
Copied
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);
}

Collect device data

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

JavaScript
Copy
Copied
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.

JavaScript
Copy
Copied
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,
    // 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: Server-side →

Still have questions?

If you can’t find an answer, contact our Support team.