General Widget Configuration

Hosted Widgets

Widgets are automatically made accessible on the Moneyhub platform.

Preview

Once a widget has been created you can then preview it by clicking on the Preview link. This will allow you to carry out a payments journey in isolation.

You can also generate a code snippet from the widget page

Self-hosting Widgets

Another option is to host the widgets on your own infrastructure. When creating the widget you'll need to specify the Authorised Domain where you'll be hosting the widget. On the widget detail page you'll be able to get a snippet of code to include in your HTML. The script tag should be placed in the <body> of your page.

<html>
  <head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
     <div id="root"></div>
     <script src="https://widgets.moneyhub.co.uk/widgets.bundle.js"></script>
     <script>window.moneyhub.init({
         "elementId":"root",
         "type":"affordability",
         "widgetId":"defccf60-648e-41f2-9e2b-648010589956",
         "params":{
           "externalUserId":"external-user-id",
           "email":"[email protected]",
           "name":"Custom name"
         }
       })
    </script>
  </body>
</html>

The above example shows a simple implementation whereby one of our widgets is initialised directly on page load.

However widgets can be rendered using any JS framework, e.g. React or Angular.

Listening for widget events

Currently supported widgets: affordability, Single Payment Widget

If you wish to listen for events that occur in the widget for your own logging purposes, simply pass in a logger object that includes a function called info and/or a function called error, depending on which levels of event you wish to listen for. The first argument passed into it from the widget will be the name of the widget page where the event has occurred, and the second will be a data object containing whatever useful information has been passed for that event. See the example below:

<html>
  <head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
     <div id="root"></div>
     <script src="https://widgets.moneyhub.co.uk/widgets.bundle.js"></script>
     <script>window.moneyhub.init({
       "elementId":"root",
       "type":"affordability",
       "widgetId":"defccf60-648e-41f2-9e2b-648010589956",
       "params":{
         "externalUserId":"external-user-id",
         "email":"[email protected]",
         "name":"Custom name"
        },
        "logger": {
          "info": (page, data) => console.info(page, data), // Replace with however you wish to handle these events
          "error": (page, data) => console.error(page, data), // Replace with however you wish to handle these events
        }  
      })
    </script>
  </body>
</html>

Archiving a Widget

Redundant widgets can be archived when no longer required, these will be removed from the 'Widgets' view and cease to function