Handling Multiple Initialisations

When using the Payment Widget, ensure proper initialisation each time, especially when dealing with page navigations and query parameters. It is crucial to understand that init needs to be called each time, but managing the params object is key to avoiding issues with reinitialising.

<script type="text/javascript">
   // Step 1: Extract query parameters from the URL
   const params = new URLSearchParams(window.location.search);
   const widgetId = params.get('widget') || 'your-default-widget-id';

   // Step 2: Conditionally initialise the widget with necessary parameters
   let moneyhubParams = {};
   if (params.get('payee')) {
       console.log("Initialising moneyhub params")
       moneyhubParams = {
           payeeId: params.get('payee'),
           amount: params.get('amount'),
           reference: params.get('reference'),
           endToEndId: "unique-id-per-payment",
           state: "client-state"
       };
   }

   // Step 3: Initialise the widget
   window.moneyhub.init({
       elementId: 'root',
       type: 'payment-single',
       widgetId: widgetId,
       params: moneyhubParams,
   });
</script>

1. Extract query parameters from the URL
   • Use URLSearchParams to extract parameters like payeeId, amount, reference, etc. from the URL.
2. Conditionally initialise the widget with necessary parameters
   • Construct the moneyhubParams object only if the required parameters are present in the URL.
   • Use the extracted parameters to form the moneyhubParams object essential for the widget initialisation.
3. Call window.moneyhub.init with the necessary parameters.

❗️

Avoid reinitialising with stale data

Always pass params as undefined on subsequent re-renders to avoid reinitialising the widget with stale or incomplete data.

Logging Payment Status Using Logger

To log key events and errors for debugging and audit purposes, use the logger feature.

<script type="text/javascript">
   // Step 1: Define the logger object to handle logging of events and errors
   const logger = {
      error: (page, data) => console.error(page, data),
      info: (page, data) => {
         if (page === 'paymentStatus' && data.payment) {
            fetch(`https://your-api.com/payments/${data.payment.id}`);
         }
      },
   };

   // Step 2: Initialise the widget with logger for event handling
   window.moneyhub.init({
      elementId: 'root',
      type: 'payment-single',
      widgetId: 'your-widget-id',
      logger: logger,
   });
</script>

1. Define the Logger Object:
   • Create a logger object with two functions, error and info, to handle logging of errors and informational events.
   • In the info function, you can define actions to take when specific events occur, such as fetching additional payment details when the paymentStatus page event occurs.
2. Integrate Logger with Widget Initialisation:
   • Include the logger object in the initialisation call to window.moneyhub.init to ensure that events and errors are captured and logged appropriately during the widget's operation.