Venmo

SDK

Last updated: Aug 4th, 8:05pm

Overview

This guide demonstrates how to integrate Venmo payments using PayPal's v6 Web SDK in your web application. Venmo payments provide a familiar mobile-first payment experience for US customers using USD transactions.

PayPal Account Setup

Create a PayPal developer, personal, or business account and visit the PayPal Developer Dashboard to create a sandbox application. You'll need to obtain your Client ID and Secret for authentication.

Environment Configuration

Set up your environment variables to securely store your PayPal credentials for both development and production environments.

1PAYPAL_SANDBOX_CLIENT_ID=your_client_id
2PAYPAL_SANDBOX_CLIENT_SECRET=your_client_secret

Venmo Requirements

Venmo payments have specific requirements that must be met for eligibility. Only USD transactions are supported, eligibility is checked at runtime based on buyer's location and device, and mobile devices with US-based users have the highest Venmo eligibility rates.

Integration Steps Overview

The Venmo integration follows a four-step process: initialize the PayPal SDK with Venmo component, check Venmo eligibility for the current session, create a Venmo payment session with callback handlers, and start the payment flow with presentation mode configuration.

HTML Structure Setup

Create the basic HTML structure for your Venmo payment integration. The Venmo button should be initially hidden until eligibility is confirmed.

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>One-Time Payment - Venmo - PayPal Web SDK</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7  </head>
8  <body>
9    <h1>One-Time Payment Venmo Integration</h1>
10    <div class="buttons-container">
11      <venmo-button id="venmo-button" type="pay" hidden></venmo-button>
12    </div>
13    <script src="app.js"></script>
14    <script
15      async
16      src="https://www.sandbox.paypal.com/web-sdk/v6/core"
17      onload="onPayPalWebSdkLoaded()"
18    ></script>
19  </body>
20</html>

PayPal SDK Initialization

Initialize the PayPal SDK with the Venmo component and check payment method eligibility. This step authenticates your application and determines if Venmo is available for the current user session.

1async function onPayPalWebSdkLoaded() {
2  try {
3    const clientToken = await getBrowserSafeClientToken();
4    
5    const sdkInstance = await window.paypal.createInstance({
6      clientToken,
7      components: ["venmo-payments"],
8      pageType: "checkout",
9    });
10
11    const paymentMethods = await sdkInstance.findEligibleMethods({
12      currencyCode: "USD",
13    });
14
15    if (paymentMethods.isEligible("venmo")) {
16      setupVenmoButton(sdkInstance);
17    } else {
18      console.log("Venmo is not eligible for this session");
19    }
20  } catch (error) {
21    console.error("SDK initialization error:", error);
22  }
23}

Payment Session Configuration

Configure the payment session with callback handlers for different payment outcomes. These callbacks handle payment approval, cancellation, and errors that may occur during the payment process.

1const paymentSessionOptions = {
2  async onApprove(data) {
3    console.log("Payment approved:", data);
4    try {
5      const orderData = await captureOrder({
6        orderId: data.orderId,
7      });
8      console.log("Payment captured successfully:", orderData);
9      handlePaymentSuccess(orderData);
10    } catch (error) {
11      console.error("Payment capture failed:", error);
12      handlePaymentError(error);
13    }
14  },
15  
16  onCancel(data) {
17    console.log("Payment cancelled:", data);
18    handlePaymentCancellation();
19  },
20  
21  onError(error) {
22    console.error("Payment error:", error);
23    handlePaymentError(error);
24  },
25};

Venmo Button Setup

Set up the Venmo button with click handling to start the payment flow. The button is configured with the payment session and presentation mode options.

1async function setupVenmoButton(sdkInstance) {
2  const venmoPaymentSession = sdkInstance.createVenmoOneTimePaymentSession(
3    paymentSessionOptions,
4  );
5  
6  const venmoButton = document.querySelector("#venmo-button");
7  venmoButton.removeAttribute("hidden");
8
9  venmoButton.addEventListener("click", async () => {
10    try {
11      await venmoPaymentSession.start(
12        { 
13          presentationMode: "auto"
14        },
15        createOrder()
16      );
17    } catch (error) {
18      console.error("Payment start error:", error);
19      handlePaymentError(error);
20    }
21  });
22}

Client Token API Endpoint

Create a server endpoint to provide browser-safe client tokens for authentication. This endpoint securely generates tokens without exposing your PayPal client secret.

1async function getBrowserSafeClientToken() {
2  const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
3    method: "GET",
4    headers: {
5      "Content-Type": "application/json",
6    },
7  });
8  const { accessToken } = await response.json();
9  return accessToken;
10}

Create Order API Endpoint

Implement an endpoint to create PayPal orders with your payment details. This endpoint generates the order that will be processed through Venmo.

1async function createOrder() {
2  const response = await fetch(
3    "/paypal-api/checkout/orders/create-with-sample-data",
4    {
5      method: "POST",
6      headers: {
7        "Content-Type": "application/json",
8      },
9    },
10  );
11  const { id } = await response.json();
12  
13  return { orderId: id };
14}

Capture Order API Endpoint

Create an endpoint to capture approved orders and complete the payment process. This endpoint finalizes the transaction after the user approves the payment through Venmo.

1async function captureOrder({ orderId }) {
2  const response = await fetch(
3    `/paypal-api/checkout/orders/${orderId}/capture`,
4    {
5      method: "POST",
6      headers: {
7        "Content-Type": "application/json",
8      },
9    },
10  );
11  const data = await response.json();
12  return data;
13}

Additional Resources

For further support, visit the PayPal Developer Community, check PayPal Developer Documentation, and review the complete implementation examples in the PayPal SDK documentation.

Follow this link to view our public examples repo on Github.