Configure payment forms
Learn how to configure and customize payment forms in Zuora, including setting titles, editing form fields, and adjusting layout and theme options.
To configure a payment form, complete the following steps:
- In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Payment Form . On the Payment Forms page, all available payment forms are listed in a table. The form with the title My Hosted Payment Form is the default payment form pre-configured by Zuora. The table presents the following information:
-
Title : The title to identify your payment form in Zuora. It will not be displayed on your payment form.
-
Payment Form Number : The unique number to identify your payment form in Zuora.
-
- If you want to configure a new payment form, use either of the following approaches:
-
Clone the default payment form by clicking the Copy icon
in the Actions column, and then customize the form.
-
Create a payment form by clicking Create Payment Form in the upper right.
-
- On the payment form configuration page, edit the form on the right and preview it on the left.
- Enter a title for the form.
- Edit the form. For each payment method type, a default form is in place, including the necessary fields for most regions. You can customize the following elements of the payment form.
Customizable element
How to configure
Available regions for the payment method type
-
On the payment method type tile, click the label indicating the available regions, such as On Everywhere .
-
In the Regional Settings pane, toggle on or off the country options.
-
If you want to disable this payment method type in your payment form, toggle off it at the top. It will not be displayed in the payment form.
Form fields
-
On the payment method type tile, click Configure Fields .
-
In the Payment Fields pane, toggle on or off the additional fields by region. The mandatory fields are not editable.
Label of the submission button
-
On the payment method type tile, click Configure Fields .
-
At the bottom of the Payment Fields pane, select the button label from the Button Call to Action dropdown list. The selected button label will be applied to all payment method types.
Order of the payment method types
Drag and drop the payment method type tile.
Layout of the payment form
-
Click the Theme & Layout tab.
-
In the Layout section, select either the vertical or horizontal layout.
Theme of the payment form
-
Click the Theme & Layout tab.
-
In the Brand Color Palette section, click and define the following color themes:
-
Background : The background color of the payment form, the input fields, and the tabs.
-
Foreground : The color of the labels.
-
Brand Primary :
-
The background color of the submission button.
-
The color of the active radio buttons.
-
The border color of the active tabs.
-
-
Brand Secondary :
-
The border color of the input fields.
-
The border color of the inactive radio buttons.
-
The border color of the inactive tabs.
-
-
Error :
-
The border color of the error fields.
-
The text color of the error messages.
-
-
You can also click More Options to define the styles of the following elements:
-
Typography
-
Button
-
Input field
-
- Enable consent:
-
Toggle the User Consent Agreement (where available), then complete per-method configuration.
-
Cards: Configure the consent checkbox label and authorization text.
-
Wallets: Configure the authorization text (no checkbox or modal in the Payment Form UI).
-
Bank transfers: Configure all of the following:
-
Consent checkbox label (required).
-
Creditor information (required) and optional Terms/Privacy links.
-
Consent statement (required; default provided; cannot be left blank).
-
Toggles: see "Consent and default toggles" below.
-
Accept and Decline button labels (optional).
-
-
- Preview the payment form. On the left, you can preview your payment form in real time by region. The default preview region is set to the country configured in your tenant profile. If no country is configured in the tenant profile, the United States is used. The previewed payment form is displayed in the language corresponding to the selected region.
- Click Save next to the payment form title.
- (Optional) Localize the payment form. See Translate and localize payment forms .