Skip to content

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 for message event from iframe) to the handleErrorMessage callback function passed to window.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 image
iframe-load-error image
payment-submission-processing image
client-validation-error image
server-validation-error image
payment-submit-success image
success image

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

Merge request reports

Loading