Create and configure a UPI payment page
Create and configure a UPI payment page in Zuora by navigating through settings, configuring tenant-level settings, and setting up the hosted page and payment gateway.
To configure a UPI payment page:
- In the Zuora UI, navigate to Settings > Payments, and click Setup Payment Page and Payment Link.
- On the Payment Pages tab, configure the tenant-level settings for Payment Pages 2.0 as needed.
For more information about tenant-level settings, see Create and Configure Payment Pages 2.0 .
- In the Type dropdown list, select UPI.
- Click Create New Hosted Page.
- In the Basic Information section, specify the following fields:
Field Description Page Name Enter a name for your hosted payment page. This name is used to identify your payment page in Zuora.
It is different from the title displayed on the payment page. You can specify the title in the Page Title field in the Page Configuration section.
Hosted Domain Enter the domain address from which your payment page is served. This domain also hosts your callback page.
The value must be in the format:
https://www.domain.com/.Zuora validates this field for you. If the validation fails, an error message is displayed on the payment page. Note that the Overlay Hosted Page mode does not support the hosted domain validation.
If you want your hosted payment pages and callback pages to reside in the subdomain of the hosted domain, enable the tenant-level Allow Subdomain Callback for Hosted Pages setting.
Callback Path Enter the path on which the callback page file resides. Zuora appends this to the Hosted Domain entry to create the full URL to which the callback is sent.
Specify a value in the format:
/app/callback_file.jsp.The file extension, such as
.jspor.php, is not required. However, the callback path must begin with a forward slash character (/).The Callback Path is only required for the advanced integration option, which uses the inline style form with an external submit button. This setting is ignored for the basic setup, which uses the overlay form or the inline form with the submit button inside.
- In the Payment Gateway section, select the default payment gateway.
In the Default Payment Gateway field, click and select an Adyen Integration v2.0 instance.
Zuora does not validate this setting. You can override this default gateway in your request by specifying a gateway through the
paymentGatewayclient parameter. For more information, see Client Parameters for Payment Pages 2.0 . - In the Page Configuration section, complete the field configuration.
Field Description Page Title Enter a title for the hosted payment page.
Select Display to display the Page Title on this payment page.
Page Description Enter the description of the payment page.
Select Display to display the Page Description on this payment page.
VPA A required field for end-customers to enter a Virtual Payment Address (VPA) to securely complete payments.
Submit Button Enter the label to appear on the submit button. This label is applied only if the button is on the hosted payment page.
The
submitEnabledclient parameter controls the placement of the submit button. For details, see Client Parameters for Payment Pages 2.0 .Client-Side Validation Select Enable client-side validation to check the required fields for values.
If the client-side validation is enabled, you can specify a custom error message for missing required fields in the Error Message field.
Use
#fieldNameto include the missing field name in the error message. For example:Please enter a valid #fieldName to continue.CSS Enter the custom CSS code for your page. You can review the CSS ID and class names by using View Source or Inspect Element in Firefox or Chrome on the preview page of this payment page.
For example, you can customize the style and format of the field label and the error message, as well as the error message text. However, implementing customized JavaScript is not allowed for security reasons.
Note that the UPI timer window designed by Zuora cannot be altered.
- Click Generate and Save Page.
- Preview the Payment Page.
After the page is saved, you can preview the Payment Page and retrieve implementation details as described in Preview Payment Pages 2.0 .