Hosted payment page approach

Implement a hosted payment page using Payment Pages 2.0 to support various payment flows, including creating and saving card payment methods, processing one-time payments, and managing recurring transactions.

You can implement a hosted payment page through the Payment Pages 2.0 solution to support the following payment flows:

Create and save a card payment method
Process a one-time payment without saving the payment method
Process the first payment and save the payment method for subsequent recurring payments

During payment method validation and creation, Datatrans returns the cardOnFile ID in processing webhook events, which Zuora stores as the Token ID. After the payment method is successfully created, the gateway returns two additional tokens that are also stored for the payment method in Zuora. These tokens will be used to process recurring transactions.


Zuora UI field	Datatrans field
Token ID	cardOnFile ID
Second Token ID	Merchant Reference Number
Third Token ID	Gateway Transaction Reference ID

In the Electronic Payment Methods section of the customer account page, you can retrieve Second Token ID and Third Token ID .

Complete the following tasks to implement a Payment Page 2.0 to support one-time payment flows:

You can find detailed instructions in the following sections.

Real-Time Reconciliation must be enabled. See Real-Time Reconciliation on Planet for more information.
In the integration, you can specify either the authorization amount or invoices when setting up your client code . To support these use cases, complete the following configuration:
- To support processing authorization amounts, the following features must be enabled:
  - Validate Client-Side HPM Parameters Follow the instructions in Validating client-side HPM parameters to enable it.
  - Either Credit Balance or Invoice Settlement
- To support processing invoices, the following requirements must be met:
  - Validating Client-Side HPM Parameters must be enabled.
  - The invoices must be posted before the invoices are paid through the one-time payment.
To understand the implementation procedure of Payment Pages 2.0 in Zuora, review Payment Pages 2.0 implementation overview .

Prepare for the integration.
Set up a Payment Page 2.0.
Request a signature for the Payment Page from Zuora.
Set up your client code to integrate the Payment Page to your web page.
Implement the callback response.
Set up a Payment Page 2.0 by following the instructions in Configure Credit Card Type Payment Pages 2.0 . Make sure Enable 3D Secure 2.0 is selected in the Security Information section.
Optionally, preview the Payment Page .
Optionally, translate and localize the Payment Page .
Optionally, update the CSS for the Payment Page .

Follow the instructions in Request a signature for the Payment Page from Zuora . Because the Client-side HPM Parameter Validation feature is enabled, Zuora will validate the additional fields in the request by comparing them with the values specified in the digital signature.

Here are two request examples for the Generate RSA signature REST API operation.

{
   "uri":"https://sandbox.na.zuora.com/apps/PublicHostedPageLite.do",
   "method":"POST",
   "pageId":"test000045b3bf9d0145b3c6812b0000",
   "paymentGateway":"Planet",
   "authroizationAmount":"100",
   "currency":"USD",
   "accountId":"test808145b3bf9d0145b3c6812b0000"
}

{
   "uri":"https://sandbox.na.zuora.com/apps/PublicHostedPageLite.do",
   "method":"POST",
   "pageId":"test000045b3bf9d0145b3c6812b0008",
   "paymentGateway":"Planet",
   "accountId":"test808145b3bf9d0145b3c6812b0000"
}

Follow the instructions in Integrate Payment Pages 2.0 . When rendering the Payment Page, specify the following required parameters in the Z.render or Z.renderWithErrorHandler function. For other optional parameters, see Client Parameters for Payment Pages 2.0 .


Parameter	Type	Description
doPayment	boolean	Default: `false` `true` indicates that the Payment Page will create a payment method as well as process the one-time payment transaction. If it is `false` or not specified, the Payment Page will only create a payment method. To implement a one-time payment flow, `doPayment` must be `true` .
storePaymentMethod	boolean	Default: `true` `true` indicates that the payment method will be stored in Zuora and used in subsequent recurring payments. `false` indicates that the payment method will not be stored in Zuora. End customers need to be brought back to session to authenticate the payment.
field_accountId	string	Zuora customer account ID. The payment method will be created for this specified account. Example: `8a90e5e48f2eade6018f2ed19133003a`
authorizationAmount	number	Required for authorization amount processing The amount of the one-time payment that will be sent to the gateway. For more information about this parameter, see Client parameters for Payment Pages 2.0 .
field_currency	string	Required for authorization amount processing The currency of the one-time payment amount. For more information about this parameter, see Client parameters for Payment Pages 2.0 .
documents	array	Required for invoice processing An array of invoices to be paid in this transaction, containing the following fields: `type` - The value must be `invoice` . `ref` - The value must be the invoice number, such as `INV0000001` .

Here is an example for authorization amount processing:

var params = {
    doPayment:"true",
    storePaymentMethod:"true",
    field_accountId:"testc0f87596f2f301759c29443622fa",
    authorizationAmount:"99",
    field_currency:"USD"
};

Here is an example for invoice processing:

var params = {
    doPayment:"true",
    storePaymentMethod:"true",
    field_accountId:"testc0f87596f2f301759c29443622fa",
    documents:"[{\"type\": \"invoice\", \"ref\": \"INV0000001\"}, {\"type\": \"invoice\", \"ref\": \"INV0000002\"}]"
};

See Advanced Integration of Payment Pages 2.0 for more information.

Welcome to Zuora Product Documentation

Explore our rich library of product information

Hosted payment page approach

zuora-footer