Customize Error Messages for Payment Pages 2.0
This guide explains how to customize error messages for Payment Pages 2.0, offering benefits like easier server-side error handling and contextual error display.
This article describes how to customize error messages for Payment Pages 2.0. Error message customization is an optional step in implementing Payment Pages 2.0, but offers these benefits:
-
An error handling function gives you an easier mechanism to handle server-side error messages that are not handled in Zuora.
-
Using a custom error handling function, you can display the error messages in the Payment Page form in context to the user.
For security considerations, it is not recommended that you alert users to your security setting details, such as the number of attempts to reach the error limit and the timeframe between submissions.
Render Payment Pages 2.0 with Custom Error Handling
Use the alternate render function,
Z.renderWithErrorHandler
, instead of the
Z.render
function, to render your Payment Page with custom form size, error messages, and callback logic. For more detailed information, see Integrate Payment Pages 2.0
.
The
Z.renderWithErrorHandler
function takes the same input parameter as the
Z.render
function and several additional parameters. The syntax for
Z.renderWithErrorHandler
is:
Z.renderWithErrorHandler(params, prepopulateFields, callback, clientErrorMessageCallback, width, height, additionalFunction);The clientErrorMessageCallback function is a custom error handling function. The last three parameters are optional. You can simply use the following function for your Payment Page:
Z.renderWithErrorHandler (params, prepopulateFields, callback, errorMessageCallback);
To support strong customer authentication (SCA), we strongly recommend that you do not use overlays to block end-users' submission. It is because overlays can potentially prevent the challenge form from being properly displayed.
If you have to use overlays, you can pass a function that removes possible overlays as the last parameter while rendering Payment Pages. In this case, you should also specify the
width
and
height
parameters. Use
null
for both parameters if the form needs to be resized automatically.
For example, define the removeModalLayer function to be passed in the following Payment Page render function:
Z.renderWithErrorHandler(params, prepopulateFields, callback, clientErrorMessageCallback, null, null, removeModalLayer);
After getting the response from the issuing bank, Zuora will call the removeModalLayer function to remove the overlay and display the challenge form.