Pay with Venmo integration

Add Venmo buttons to your checkout

DocsCurrentLast updated: May 21st 2021, @ 6:43:29 am


Add the Venmo button to your Checkout integration.

Know before you code

Add Venmo button

Render the Venmo button on your website by adding the PayPal JavaScript SDK code to your product and checkout pages.

Determine where the SDK should render the Venmo button. You can control the presentment of the button using configuration attributes.

Note: See the best practices section to learn how to effectively present Venmo throughout your site.

<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>

<!-- Include the PayPal JavaScript SDK. Replace `YOUR_CLIENT_ID` with your client ID.-->
<!-- Note that `enable-funding=venmo` is added as a query parameter -->
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&enable-funding=venmo"></script>

<script>
  // Render the Venmo button into #paypal-button-container
  paypal.Buttons().render('#paypal-button-container')
</script>

Step result

Test and go live

Note: Pay with Venmo is not supported in Sandbox.

Pay with Venmo is a mobile experience, so be sure to have the Venmo iOS or Android app installed and test on an iOS Safari or Android Chrome browser.

Use your personal production login information during the checkout flow to complete a Venmo transaction and then log into the production site, paypal.com, to see the money move out of your account.

When making a live test purchase, consider:

  • The business account receiving money can’t also make the purchase.
  • If you create a personal account with the same information as the business account, those accounts might experience restrictions.
  1. Open your test page with iOS Safari or Android Chrome.
  2. Tap the Venmo button and switch to the Venmo app.
  3. On the Venmo app, tap Continue or Pay Now to return to your test page.
  4. If you have an additional confirmation page on your merchant website, continue to confirm the payment.
  5. Log in to your merchant account and confirm the money you used to pay moved into that account.

Troubleshoot your integration

Validate that there are no browser console warnings or errors. The JavaScript SDK configuration attributes have distinct validation checks for input formatting and values to ensure validity.

If the validation fails, the web browser's developer console displays warning messages that inform you which property is invalid and what you need to do to address the issue. In general, the library attempts to revert to the safe default values if there are missing or invalid inputs.

Best practices

Allow for Venmo placement

If you have an existing vertical button stack, an additional Venmo button renders in that stack. Ensure you are allowing enough room on your page for the additional Venmo button.

Display funding source used

You might have a confirmation page or a notification to the user that indicates the funding source used. Use an onClick handler to dynamically display Venmo in the confirmation notification.

let fundingSource

paypal.Buttons({
  onClick: (data) => {
    // fundingSource = "venmo"
    fundingSource = data.fundingSource

    // Use this value to determine what funding source was used to pay
    // Update your confirmation pages and notifications from "PayPal" to "Venmo"
  },
})