Skip to main content

Payment Form overview

Zuora

Payment Form overview

The Payment Form feature is designed to modernize the payment integration experience, providing a seamless, scalable, user-friendly, and PCI-compliant hosted payment form solution for collecting payments. It offers the following key advantages:

  • Minimal code experience in managing payment methods and payment information on the hosted form
  • Dynamic presence of payment method options and information to the buyer for a higher conversion rate
  • Elimination of the need for managing multiple iframes thus reducing complexity

All payment methods available for a region are consolidated into a single payment form. In the Zuora UI, you can easily enable or disable payment methods by region. The following image shows examples of payment forms in vertical and horizontal layouts.

payment-form-vertical.png payment-form-horizontal.png

This feature is in the Early Adopter phase. We are actively soliciting feedback from a small set of early adopters.

Supported payment methods and payment gateway integrations

The Payment Form feature is supported for payment methods and payment gateway integrations listed in the following table. Zuora is continuing to evaluate requests for additional payment methods and gateways. The following abbreviations are used in the table to represent the corresponding gateway integrations:

  • Adyen: Adyen Integration v2.0
  • Braintree: Braintree v2.0
  • GoCardless: GoCardless
  • Stripe: Stripe v2.0
  • Chase: Chase Paymentech Orbital Gateway
  • CyberSource: CyberSource, Payment API v2.0
Payment Method Payment Gateway Integration Supported Payment Flow
Credit Card
  • Adyen
  • Braintree
  • Chase
  • Checkout.com
  • CyberSource
  • Stripe
  • Worldpay
  • Create and save a payment method.
  • Process a one-time payment without saving the payment method.
  • Process the first payment and save the payment method.

3D Secure 2.0 is implemented and auto-enabled in all supported payment flows.

ACH
  • Adyen
  • Chase
  • CyberSource
  • GoCardless
  • Stripe
  • Create and save a payment method.
  • Process a one-time payment without saving the payment method.
  • Process the first payment and save the payment method.
SEPA
  • Adyen
  • Chase
  • CyberSource
  • GoCardless
  • Stripe
Apple Pay
  • Adyen
  • Braintree
  • Chase
  • CyberSource
  • Stripe

Google Pay

In the hosted checkout flow, Zuora's merchant ID is used. You do not need to register your own merchant ID.

  • Adyen
  • Braintree
  • Stripe

Implementation overview

To embed a payment form into your website, complete two simple steps:

  1. Configure a payment form in the Zuora UI.

    A default payment form is pre-configured for your tenant. You can directly use it, customize it, or set up a new one, easily managing options like regional payment methods, additional form fields, layout, and themes. You can preview changes in real time. See Configure payment forms for more information.

  2. Integrate the payment form to your website with minimal code.

    Download the Payment Form integration sample code, and follow the implementation guide to swiftly integrate the payment form to your website based on the sample code. See Integrate a payment form with your website for more information.

The following table describes what can be configured in the UI and what needs to be implemented in your integration code:

Configuration UI Integration Code
  • Available regions for the payment method type
  • Form fields
  • Label of the submission button
  • Order of the payment method types
  • Layout of the payment form
  • Theme of the payment form
  • Creation of a payment session
  • Payment result handling

The following table describes the form fields available for the payment methods:

Payment method Mandatory form field Configurable form field
Credit Card
  • Card Details
  • Card Holder Name
Billing Address
ACH Account Information N/A
SEPA Account Detail N/A
Apple Pay N/A N/A
Google Pay N/A N/A

Supported browsers

Desktop browsers are supported as described in Supported browsers.

Compliance

The payment forms implemented through the Payment Form feature are PCI-compliant.

Limitations

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 through the Create a payment session API operation in your integration code.