Implement events API for Zuora Simple Component
What does this MR do and why?
- It adds new events to the
ZuoraSimplecomponent along with relevant payload. Documentation of events and payload is added to the component itself. - This MR also moves the handling of client side validation errors from
handleMessagefunction (i.e. the listener formessageevent from iframe) to thehandleErrorMessagecallback function passed towindow.Z.renderWithErrorHandler. The reason for this is to unify the handling of client side and server side validations in the same common function so as to give a holistic view of the error handling in a single function.
Screenshots
| Scenario | Screenshot |
|---|---|
| iframe-loaded | ![]() |
| iframe-load-error | ![]() |
| payment-submission-processing | ![]() |
| client-validation-error | ![]() |
| server-validation-error | ![]() |
| payment-submit-success | ![]() |
| success | ![]() |
How to set up and validate locally
Follow these steps to setup locally and then for a particular event see the How to Trigger column in below table.
| Event Name | Payload | How to Trigger |
|---|---|---|
| iframe-loaded | N/A | Just let the ZuoraSimple component load |
| iframe-load-error | { errorCode, errorMessage } |
Go to HPM settings in Zuora and changed Hosted Domain setting to something else other than the one you are actually using to host the iframe. |
| payment-submission-processing | N/A | Click on validate account button |
| client-validation-error | { key, code, message } |
Click on validate account button by keeping some or all fields empty |
| server-validation-error | { key, code, message } |
Click on validate account by filling in details of one of the declined test cards |
| payment-submit-error | { errorCode, errorMessage } |
Not able to replicate on local |
| payment-submit-success | { refId } |
Click on validate payment by entering one of the valid test cards |
| success | N/A | Click on validate payment by entering one of the valid test cards |
Related to #358782 (closed)
Edited by Sharmad Nachnolkar






