Implement events API for Zuora Simple Component
What does this MR do and why?
- It adds new events to the
ZuoraSimple
component 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
handleMessage
function (i.e. the listener formessage
event from iframe) to thehandleErrorMessage
callback 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