Affordability Widget

Suggest Edits

Affordability Widget

Our Affordability widget works in conjunction with our wider Affordability Service. It allows clients to quickly setup an embedded user journey to enable customers to connect their bank account(s) to form part of an affordability check.

The output from this is then written to an affordability report than can later be accessed by the client underwriting teams. Either via dashboards in our Admin Portal or via API (https://docs.moneyhubenterprise.com/reference/get_affordability-reportid)

The Widget itself is configured via the 'My Widgets' section of the Moneyhub Admin portal (access will be setup as part of the onboarding process)

Click 'ADD NEW' at the top of the page

On the setup page choose 'Affordability' as the widget type

Give your widget an identifiable name (this is only used in the 'My Widgets' section of Admin Portal, it does not appear on the widget itself).

Select your Business from the pulldown

Choose whether you want your widget in Sandbox or Live mode in 'Widget Status'

Widgets can be hosted by Moneyhub or self hosted. If you wish to host the widget in your own infrastructure add your HTTPS authorised domain. If left blank Moneyhub will host.

Under Config add the return ("finish") URL you wish to send the user to on completion, and if you wish, a URL that the user will be given a link to if they are having trouble adding their first connection and wish to get in touch.

On saving the widget you can then view the widget and access the created code snippet and a preview URL to allow early testing and implementation. Both items can be accessed from the three dot menu (top right)

Custom Parameters

The following data items can be included in the widget to allow later identification of individual affordability reports in the Reports Dashboard

  • name : User name
  • email : User email
  • externalUserId: User id from client
  • state : State value that will be forwarded at the end of the journey for reconciliation

All of the above are optional

These should be kept relatively short, passed as query params and they should be url encoded.

Code snippet

This is an example code snippet that can be obtained from the widget page in our admin portal:

<div id="root"></div>
<script src="https://s3.eu-west-1.amazonaws.com/widgets.moneyhub.co.uk/widgets.bundle.js"></script>
<script>
  window.moneyhub.init({
    elementId: "root",
    type: "affordability",
    widgetId: "831b0bce-130e-478c-a064-d685bd8a3cfc",
    params: {
      externalUserId: "external-user-id",
      email: "[email protected]",
      name: "Sarah Green",
      state: "client-state"
    },
  })
</script>

Hosted Widget

We also offer to host the widget under our domain, this can be accessed from the widget page in our admin portal under the 'Preview Widget'

This is an example url passing custom params:

https://identity.moneyhub.co.uk/widget-pages/831b0bce-130e-478c-a064-d685bd8a3cfc?name=name-value&email=email-value&externalUserId=external-user-id-value&state=state-value

📘

Query params

We recommend to url encode the values of the query params so they can be saved and forwarded correctly

Affordability Widget Journey

On initialising the widget the user would see a list of supported banks (in this example we are only showing our test banks)

Once a bank is selected the user is shown a consent screen explaining what data we are requesting and its purpose.

On clicking Approve the user will be taken into their own banks flow (Mock Bank example below)

Once the bank connection has been completed (including standard PSD2 SCA security) the user is returned to a confirmation page, on this page the user can add additional bank accounts to build a fuller financial picture or if they have added all their accounts they can complete the application.

On clicking Submit Application the userId, reportId and state are returned via the configured Finish URL.

Receiving parameters at the end of the Journey

After a user has connected accounts and has submitted the data we will redirect to the finish url that was configured for the widget with the following data as query params:

  • userId : Moneyhub user id that was created during the affordability journey
  • reportId : Id of the affordability report that was created
  • state : State value that was passed when initialising the widget

This is an example finish url:

https://www.moneyhub.com/finish?reportId=9edd3853-1a25-44fe-a563-abcc513904fa&userId=63d24f731e23f51590331b1e&state=state-value

Test accounts

If you want to test the end to end journey in our Sandbox environment we have 2 discrete test users

'affordability' (acct p/w is password123)
'affordabilityIrregularIncome' (acct p/w is password123)

This info is required when you select 'Moneyhub Mock' as the source bank where the account is held as part of the widget journey.

Updated 5 months ago