Learn how to set up a Paystack Direct Debit hosted payment page in Zuora by following these detailed steps.

1. In Zuora, navigate to Settings > Payments > Setup Payment Pages
2. On the Payment Pages tab page, configure the tenant-level settings for the hosted payment page.
3. In the Type field, click and select Paystack Direct Debit.
4. Click Create new hosted page.
5. In the Basic Information area, enter the following information:
   1. Page Name: Type a name for your Payment Page form. This name is used to identify your Payment Page in Zuora. It is different from the title displayed on the form. You specify the form title in the Page Title field in the Page Configuration section.
   2. Hosted Domain: Type the domain address from which your Payment Page will be served. This is also the domain where your callback page resides. The value should be in the format: https://www.domain.com. Zuora validates this field for you. You will see an error message displayed on HPM iframe if the validation fails.
   3. To allow your hosted payment pages and callback pages to reside in the subdomain of the hosted domain, enable the Allow Subdomain Callback for Hosted Pages setting. See Configure Payment Pages 2.0 for details.
   4. Note that the Overlay Hosted Page mode does not support the Hosted Domain validation.
   5. Callback Path: Type 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. You are not required to include a file extension, for example, .jsp or .php. However, the callback path must begin with a forward slash character (/).
   6. The Callback Path is only required if you are using the advanced implementation option, using the inline style form with an external submit button. The Callback Path setting is ignored when you implement the basic setup, i.e., using the overlay form or the inline form with the submit button inside.
6. In the Security Information area, configure the page-level security settings. For detailed information about each option, see Security Measures for Payment Pages 2.0.
7. In the Payment Gateway area, enter the following information:

   Default Payment Gateway: Click and select Paystack to use as the default gateway for processing transactions. The gateway must be configured in your Zuora environment. Note that Zuora does not validate this setting. You can override this default gateway in your request by specifying a gateway through the paymentGateway client parameter.

8. In the Page Configuration area, enter the following information.
   1. Page Title: Type a title for the Payment Page form. Select Display to display the Page Title on this Payment Page form.
   2. Page Description: Type a description for the form. Select Display to display the Page Description on this Payment Page form.
   3. For each field in the Page Fields section:
      • Label Name: Enter the display label to be shown on this Payment Page.
      • Display: Select to display the field on the Payment Page.
      • Required: Select to make the field a required field.
      • Returned in Response: Select the check box to pass the value of this input field to the callback client. See Implement the Callback Function for accessing the form field value in your callback function.
   4. In the Page fields section, select the following fields:
      • Bank Account Number
      • Account Type
      • Name on Account
      • Contact Email

      Do not select the Bank Name field. It will be automatically populated.

   5. If you want to change the display order of the sections, in the order field next to the section, enter the number representing the display order of the section on this Payment Page.
   6. Submit Button: Type the label to appear on the submit button. This label is applied only if the button is on the Payment Page form. See Client Parameters for Payment Pages 2.0 for the parameter submitEnabled that controls the placement of the submit button.
   7. Client-Side Validation: Select Enable client-side validation to validate input fields.

      For all types of Payment Pages, required fields are checked for values. See Client-Side Credit Card Validation for additional validation detail.

      If you select Enable client-side validation, optionally specify custom error messages for the credit card-related errors. Use the variable #fieldName in the error message to include the missing required field name. For example, "Please enter a valid #fieldName to continue." #fieldName can only be used in the Required Field Not Completed type error message.

      You can also provide custom error messages in the optional custom error handling function.

   8. 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 Pages form. For example, you can customize the style and format of the field label and error message, as well as the error message texts. However, implementing customized JavaScript is not allowed for security reasons.

      Design Payment Pages CSS provides a CSS pack that you can download and use to design the look and formatting of your Payment Pages 2.0 form.

      Ensure that you enter the valid CSS codes in this field. An error will occur if you include HTML tags or other invalid characters.

9. Click Generate and save page.