Import the Zuora JavaScript client library to your page

For more detailed information, see the Payment Form Implementation Guide.

Script versions and URLs

Zuora provides two ways to load zuora.js:

• A rolling, non-versioned script, currently at version 1.4.0, which always includes the latest updates.

• A pinned, versioned script that is fixed to that specific release.

Non-versioned URL

For sandbox environments, use:

<script src="https://js.zuora.com/payment/sandbox/1.4.0/zuora.js"></script>

For production environments, use:

<script src="https://js.zuora.com/payment/1.4.0/zuora.js"></script>

Versioned URL

Zuora now supports versioned URLs for zuora.js, which you can use when you need to pin a specific script version and optionally configure Subresource Integrity (SRI) to cryptographically verify the script content.

For 2025.Q4.1.0 sandbox environments, use:

<script src="https://js.zuora.com/payment/sandbox/7.1.0/zuora.js" integrity="sha256-NsGvSSP6JjTH3hHqo2AdBWOzTjBC7kUUUt2F7t0YKzE=" crossorigin="anonymous"></script>

For 2025.Q4.1.0 production environments, use:

<script src="https://js.zuora.com/payment/7.1.0/zuora.js" integrity="sha256-NsGvSSP6JjTH3hHqo2AdBWOzTjBC7kUUUt2F7t0YKzE=" crossorigin="anonymous"></script>

Create a container for the Venmo button on your page

Create a container for the Venmo button on your page and place it where you want the button to be rendered. Replace venmo-button-container with the ID you want to use.

<div id="venmo-button-container">
  <!-- The Venmo button will be inserted here. -->
</div>

Complete prerequisite tasks

Turn on the Payment Form feature

The JavaScript SDK integration utilizes the publishable key from the Payment Form feature for authentication. This integration supports embedding the Venmo button within an iframe hosted by Zuora. To enable Payment Form on your tenant, see the "Before you start" section in Configure payment forms.

Configure a PayPal Complete Payments gateway instance

Ensure that a PayPal Complete Payments gateway instance has been created and is in the active status on your Zuora tenant. Also ensure that your PayPal Complete Payments gateway account is configured to accept Venmo transactions.

Copy the publishable key from Payment Form

In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Payment Form. On the Publishable Keys tab, copy the key.

Implement the client-side SDK integration

Initialize an instance of the Zuora object with your publishable key. Populate the payment request parameters and generate a payment session when the end customers click the Venmo button.

The following table describes the payment request parameters:

Mount the button component to the container and handle the payment result.

Here is an example of the code implementation:

<script src="https://js.zuora.com/payment/sandbox/1.4.0/zuora.js"></script>
<script>
  const publishableKey = "pk_rO0AB..........";

  const renderForm = () => {
    const zuora = Zuora(publishableKey);

    zuora.createVenmoButton({
      countryCode: "US",
      locale: "en_US",
      currency: "USD",
      // The amount to be paid.
      // This is required when intent is "authorize".
      amount: "1.00",
      // Set it to true to enable vaulting.
      vault: true,
      // The intent of the transaction.
      // Only "authorize" is supported.
      intent: "authorize",
      provider: {
        name: "PaypalCP",
        paymentGatewayId: "4028839390f481ae0190f491084f0004",
        clientId: "AfuCtaWvIgugr1mcrpoEdGTAwxkpeVi-C5Zrw0oXdmFWLh5QzWAeWiu1UmzBe8A6JktG_Z31UKD1jXJ9"
      },
      createPaymentSession: () => {
        // It MUST return a Promise here.
        return new Promise((resolve, reject) => {
          // Send request to your server to create a payment session.
          // The server should return a payment session ID.
          // Then resolve the promise with the payment session ID.
          resolve("payment-session-id-from-server");
        });
      },
      onComplete: (result) => {
        // Handle the transaction result.
        // When result.success is true, the transaction is successful.
        // result.paymentMethodId is the created payment method ID.
        // result.paymentId is the processed payment ID.
        // When result.success is false, the transaction failed.
        // result.error contains the error code and message.
      }
    }).then(function(venmoButton) {
      venmoButton.mount("#venmo-button-container")
    }).catch(function(error) {
      // Failed to create the Venmo button.
      console.error(error);
    });
  };
</script>

Implement the server-side API integration

In your server, make an API request to the Create a payment session endpoint. For details about the API request parameters, see Create a payment session in the API Reference.

To configure the payment flow mode, specify parameters for creating the server-side payment session and the client-side button, as outlined in the following table:

In client code, make a call to your backend API to create a payment session.

Perform integration testing

After you finish the integration, test the Venmo flow in your sandbox environment before moving to production. Venmo is supported with the Zuora JavaScript SDK, and Zuora does not support Venmo in Direct POST or REST API-only integrations.

For Venmo, supported payment operations on PayPal Complete Payments include Authorize, Capture, Sale, and Refund. Venmo payment methods are stored for recurring use only if they are accompanied by a customer-present payment.