home

Zuora Payments

Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableRelease NotesBasicsEntitlementsSupport and policies
Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableRelease NotesBasicsEntitlementsSupport and policies

Welcome to Zuora Product Documentation

Explore our rich library of product information

Show Contents

thumbnailZuora Payments

3D Secure 1.0 for Payment Pages 2.0

Recommended End-to-end Workflow

This task outlines the recommended end-to-end workflow for completing the 3D Secure process in Zuora, including account creation, subscription setup, invoice generation, and payment collection.

After the 3D Secure process is completed, Zuora recommends that you perform the following end-to-end (E2E) workflow:

  1. Call Create account with the collect field set to false to complete the following operations:

    • Create an account

    • Create a subscription

    • Generate an invoice

  2. Call Create a payment to collect payments.

    • Provide the account ID and invoice ID contained in the Create account response into the Create a payment request.

    • You have to set the authTransactionId and gatewayOrderId fields of Create a payment to the value of the authTransactionId parameter in the 3D Secure response. For example, the value of the authTransactionId parameter returned from the gateway might be 000000650510000023730000100001 .

To properly display the bank page, two new parameters ( width and height ) are added to allow you to customize the HPM iframe width and height during the Payment Page rendering.

These new parameters can only be the String type. The value for any of these new parameters can only be a digital number without any measurement unit.

You can use the following functions to render Payment Pages 2.0:

  • Z.renderWithErrorHandler (params, initFields, callback, errorCallback, width, height);

  • Z.render (params, initFields, callback, width, height);

The following are the code examples of these functions:

Z.renderWithErrorHandler(params,prepopulateFields,callback,errorMessageCallback,"700","700");
Z.render(params,initFields,callback,"600","800");

The behavior does not change for existing HPM integration even if you do not provide these new parameters.

Only the latest version of zuora.js (1.3.0) support these new customizable parameters.

Last updated: December 5, 2025