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:
You can customize error message handing in Payment Pages 2.0 in the following steps:
zuora.js
or zuora-min.js
.Z.sendErrorMessageToHpm
function.Z.renderWithErrorHandler
function.In your error message handling function, define a custom error message that you want to display in your Payment Pages form, and pass that message to Payment Pages 2.0. Your custom error message handling function should take the following three input parameters:
key
:
error
will be returned as key
.code
: Error code returned when the client-side credit card validation fails. The following are the error codes and the corresponding error messages.
001
: Required field not completed002
: Invalid card number003
: Invalid card type004
: Invalid CVV numberunknown
: All client-side errors other than the four abovemessage
: The error message returned from Zuora.In your error message handling function, call the Z.sendErrorMessageToHpm
function to send your custom error message to Payment Pages 2.0. The function takes the following input parameters:
key
: The input parameter to your custom error message handling function as described above,errorMessage
: Customized error message to display in Payment Page. Note that this error message will not be localized in Payment Pages 2.0 form.The following is a sample implementation of custom error message handling:
var errorMessageCallback = function(key, code, message) { var errorMessage = message; switch(key) { // Overwrite error messages generated by client-side validation. case "creditCardNumber": if(code == '001') { errorMessage = 'Card number required. Please input the card number first.'; }else if(code == '002') { errorMessage = 'Number does not match credit card. Please try again.'; } break; case "cardSecurityCode": break; case "creditCardExpirationYear": break; case "creditCardExpirationMonth": break; case "creditCardType": break; // Overwrite error messages generated by the server-side validation. case "error": errorMessage = "Validation failed on server-side, Please check your input values."; break; } // Use this function to show customized error message // based on the key of the given field. Z.sendErrorMessageToHpm(key, errorMessage); return; };
Use the alternate render function, Z.renderWithErrorHandler
, instead of the Z.render
function, to render your Payment Page with custom error messages.
The Z.renderWithErrorHandler
function takes the same input parameter as the Z.render
function and one additional parameter, the name of the custom error handling function.
The following is a sample call that uses the example error handling function, errorMessageCallback
, defined in the previous section:
Z.renderWithErrorHandler (params, prepopulateFields, callback, errorMessageCallback);