Zuora Logo

Payment Pages 2.0 Implementation Overview

Knowledge Center > Billing and Payments > Hosted Payment Pages > Payment Pages 2.0 > Payment Pages 2.0 Implementation Overview

Payment Pages 2.0 Implementation Overview

This article presents an overview of Payment Pages 2.0 and the summary of steps required to configure and implement Payment Pages 2.0 in your commerce website.

Instead of using the iFrame, if you want to create an HTML form version of a Payment Page that posts directly to Zuora to create a payment method, follow the steps described in Implement Payment Pages 2.0 via Direct POST.

How Payment Pages 2.0 Work

The following diagram shows the default flow of Payment Pages 2.0:

HPM2Flow.png

If you further customize Payment Pages 2.0 with additional fields, the above flow will slightly change. See Advanced Integration of Payment Pages 2.0 for advanced implementation of Payment Pages 2.0.

Payment Pages 2.0 Implementation Process

Use the following steps to set up Payment Pages 2.0 for your website: 

  1. In Zuora, set up the Payment Page:
    1. Configure the Payment Page for the payment method you want to use:
    2. Preview the Payment Page.
    3. Optionally, translate and localize the Payment Page.
    4. Optionally, update the CSS for the Payment Page.
      For the list of supported browsers for Payment Pages 2.0, see Browser Support Policy.
  2. In your server, request from Zuora a signature for the Payment Page. The REST API used in Payment Pages 2.0 are CORS enabled and therefore requires the digital signature. You pass the generated signature, the key, and the rest of the information to your client.
  3. Using the Payment Pages 2.0 JavaScript library, customize your client code to load the Payment Page.
Last modified

Tags

Classifications

(not set)
Powered by MindTouch ®