Collect payments with payment form

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

Configure a Zuora client instance

Server | Server.java

Configure a Zuora client instance with your client ID and client secret. If you don't have them, contact your administrator.

Initialize an instance of the Zuora object

Client | checkout.js

Initialize an instance of the Zuora object with your publishable key copied from the previous step.

Customize the checkout page

Client | checkout.html

Customize the order summary section on the checkout page for your needs.

Customize the return page

Client | return.html

Customize the layout of the return page for your needs.

Handle payment result

Client | checkout.js

Use the callback function to handle the payment processing result.

The `onComplete` function returns `result` in the following structure:

On success:

{

success: true,

paymentMethodId?: string;

paymentId?: string;

}

On error:

{

success: false,

error: {

type: string;

code: string;

message: string;

}

}

Import Zuora Java client library to your project

Server | pom.xml

Add the highlighted dependency to your POM build and import the library. Replace the version with the latest Zuora API library version. See Zuora Java SDK on Maven Central for the version information.

To use the sample code, you must use Maven for the build.

Implement support for multi-entity

Server | Server.java

If there are multiple entities within your tenant, incorporate the following code line into the highlighted code block to support the multi-entity feature:

Here is an example:

port(8888);

staticFiles.externalLocation(Paths.get("public").toAbsolutePath().toString());

zuoraClient.setEntityId("8a80825556ff28a4015709096c5d6f5d");

zuoraClient.initialize();

zuoraClient.setDebugging(true);

Implement backend API to create a payment session

Server | Server.java

In your server, add an endpoint to create a payment session. A one-time token will be returned.

You can specify parameters to define the payment flow mode as one of the following:

• Create and save a payment method.
• Process a one-time payment without saving the payment method.
• Process the first payment and save the payment method for subsequent recurring payments.

See Create a payment session for more information about the parameters.

Load zuora.js

Client | checkout.html

Import the Zuora JavaScript client library.

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>

Important:

• The non-versioned URL continues to be supported and will always deliver the latest zuora.js updates.
• The versioned URL is locked to that version and will not automatically receive future updates. To adopt new changes, you must update the version in the URL explicitly.

Create a container for the payment form

Client | checkout.html

Create a container and place it where you want the payment form to be rendered.

Initialize an instance of the Zuora object

Client | checkout.js

Initialize an instance of the Zuora object with your publishable key.

Populate the payment form configuration

Client | checkout.js

Generate a payment session when the end-customers click the Pay button.

Unless otherwise specified, the pre-defined default payment form is used. To use a specific payment form, copy its payment form number from the Zuora UI and incorporate the following code line into the highlighted code block:

profile: "REPLACE_WITH_PAYMENT_FORM_NUMBER",

Here is an example for specifying a payment form and other configuration parameters:

profile: "PF-00000006",

locale: "en",

region: "US",

currency: "USD",

amount: "1599.00",

Create and mount the payment form

Client | checkout.js

Create an instance of the payment form component, and mount the form component to the container for displaying the hosted payment form.