Create payment form pages
Learn how to create customized payment form pages for Zuora Billing integration, including setting up currency options, embedding hosted payment pages, and configuring subscription details.
After you have mapped your Zephr products with the products created in Zuora, you can start building paywalls for your features. To build the paywall, you need to use the Payment Form, previously known as Frictionless Checkout Form.
You can follow the general flow documented in Payment Form to create payment forms (previously known as Frictionless Checkout Form) for your features. However, the payment form is customized for the Zuora Billing integration. Make sure that you go through the following required configurations that are unique to the Zuora Billing integration:
- On the Products & Payment Plans tab, you can specify the currency in which the payment options are available. This allows you to set up payment forms that can be used for different regions.
- Note that after you have selected a currency, you can only choose to add payment options that are available in that currency. You can change the currency to another one after selecting the payment options. However, an error would appear if some of the selected payment options are unavailable in the newly selected currency.
- When adding a payment option, an auto-generated description will be filled into the Description field. The content is retrieved from the corresponding Zuora product rate plan. You can update the description as needed.
- Under the Zuora Hosted Payment Page section on the Payment tab, you must embed a Zuora Hosted Payment Page into the payment form. You need to enter the Payment Page ID and Hosted Page URL to embed the Hosted Payment Page. This information can be retrieved on the Hosted Pages setting page in the Zuora console.
- Navigate to Hosted Pages by clicking your profile icon in the top right corner and then clicking . Scroll down to the Page List section to locate the page you want to use. You can retrieve the page ID by clicking the Show Page ID button. To retrieve the Hosted Page URL, open the page you need and move to the Implementation Details section.In addition, when your end users use the payment form to checkout, all the charges are listed in the Subscription Details section, as shown in the example below. The amounts are calculated by Zuora.