Skip to main content

Configure payment forms

Zuora

Configure payment forms

  1. Last updated
  2. Save as PDF

A default payment form is pre-configured on your tenant. You can directly use the default form, customize it, or easily set up a new one. You can manage customization easily, such as turning payment method types on and off by region, customizing additional form fields, switching between the vertical or horizontal layout, and updating themes promptly. Preview of changes is in real time.

payment-form-edit.png

Before you start

  • Enable Payment Form.

    Enable the Payment Form feature in Feature Management. You must have the Manage Payments Settings permission to access the Feature Management setting. For more information about this user permission, see Enable payment features by yourself.

    • In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Manage Features.
    • On the Payment tab, click Enable in the Payment Form row. A dialog describing that Zuora review is required for your enablement request is shown.
    • Click Enable Feature.
    • Click all the EA term items, select I agree that I have read and agreed to the terms of the Early Availability Agreement, and then click Confirm to Enable. Your enablement request is submitted for approval. It will take a few days. After the review is completed, you will receive an email.
  • Configure the default payment gateway.

    Ensure that a default payment gateway has been configured for the customer account or the tenant. By default, transactions triggered by payment forms are processed through the default payment gateway. The default gateway of the customer account takes precedence over the default gateway of the tenant. To override the default gateway, you can specify a gateway when implementing the backend API to create a payment session in your integration code.

  • For Apple Pay, turn on the Payment Link feature and add your public business information. This is optional for Google Pay.

Configure payment forms

To configure a payment form, complete the following steps:

  1. 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.
  2. 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 paymentForm-copy.png in the Actions column, and then customize the form.
    • Create a payment form by clicking Create Payment Form in the upper right.
  3. On the payment form configuration page, edit the form on the right and preview it on the left. 
    1. Enter a title for the form.
    2. 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
      1. On the payment method type tile, click the label indicating the available regions, such as On Everywhere.
      2. In the Regional Settings pane, toggle on or off the country options. 
      3. 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
      1. On the payment method type tile, click Configure Fields.
      2. 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
      1. On the payment method type tile, click Configure Fields.
      2. 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
      1. Click the Theme & Layout tab.
      2. In the Layout section, select either the vertical or horizontal layout.

      Theme of the payment form
      1. Click the Theme & Layout tab.
      2. 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
  4. 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.
  5. Click Save next to the payment form title.