# Collect payments with payment form

#### Payment Form Implementation Guide

p
Discover comprehensive code samples demonstrating integration with 
a
Payment Form
. Understand how to swiftly implement hosted payment forms on your website.
Download Sample Code

p
Don't code? Use Zuora 
a
Payment Link
.
## 1. Quick Start

**Server | Server.java**

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

#### Review the payment form and copy the publishable key

1. In the Zuora UI, click your username in the upper right and navigate to **Settings > Payments > Payment Form**.
2. Verify that the payment form you want to use in this guide is configured as expected.
3. Copy the publishable key.


**Client | checkout.js**

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

#### Run the payment form

1. Build the server: mvn package
2. Run the server: java -cp target/sample-jar-with-dependencies.jar com.zuora.sample.Server
3. Run the payment form by navigating to [http://localhost:8888/checkout.html](http://localhost:8888/checkout.html).


#### Try it out

p
On the page, enter 
code
4111 1111 1111 1111
 in the card number field, fill in the remaining card information, and then click the Pay button.
You will be redirected to a return page. The string displayed after "Your order:" is the ID of the created payment. You can find the successful payments in Zuora through the UI, API, Data Source Export, and Data Query.

Congratulations! You now have a basic integration working.

## 2. Customize

**Client | checkout.html**

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

**Client | return.html**

Customize the layout of the return page for your needs.

**Client | checkout.js**

p
Use the callback function to handle the payment processing result.
p
The `onComplete` function returns `result` in the following structure:
p
On success:
p
code
{
p
code
success: true,
p
code
paymentMethodId?: string;
p
code
paymentId?: string;
p
code
}
p
On error:
p
code
{
p
code
success: false,
p
code
error: {
p
code
type: string;
p
code
code: string;
p
code
message: string;
p
code
}
p
code
}
## 3. Integrate

To integrate the payment form with your website, complete a few more steps.

**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.

**Server | Server.java**

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

  zuoraClient.setEntityId("REPLACE_WITH_ENTITY_ID");
  
p
Here is an example:
port(8888);

p
code
staticFiles.externalLocation(Paths.get("public").toAbsolutePath().toString());
p
b
code
zuoraClient.setEntityId("8a80825556ff28a4015709096c5d6f5d");
p
code
zuoraClient.initialize();
p
code
zuoraClient.setDebugging(true);
**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.

**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.


**Client | checkout.html**

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

**Client | checkout.js**

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

**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",

p
Here is an example for specifying a payment form and other configuration parameters:
profile: "PF-00000006",

p
code
locale: "en",
p
code
region: "US",
p
code
currency: "USD",
p
code
amount: "1599.00",
**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.