Connection Widget

❗️

NOT for production use!

This widget is not for production use. It's an aid to help you get a basic prototype working to get you started.

Example loading via script tag

<script  
data-clientid="your-client-id"  
data-redirecturi="your-redirect-uri"
data-responsetype="code" // optional - defaults to 'code'  
data-userid="the-user-id" // optional - if using use case 1, remove this line
data-connectionid="the-connection-id" // optional - if you want to reauth a connection, set the connection id here
data-posturi="/result"  
data-finishuri="/finish"  
data-type="test"
data-categoriestype="personal" // optional
src="https://bank-chooser.moneyhub.co.uk/account-connect.js">
</script>

Example loading via JS API

<script src="https://bank-chooser.moneyhub.co.uk/account-connect-js.js"></script>
window.moneyhubAccountConnectWidget(
    document.querySelectorAll("#test")[0],
    {
        clientid: "your-client-id",
        redirecturi: "your-redirect-uri",
        responsetype: "code",  // optional - defaults to 'code'  
        userid: "user-id",
        posturi: "/result",
        finishuri: "/finish",
        type: "test",
        categoriestype: "personal",
        meta: {"any": "data you want associated with this session"},
        identityuri: "https://identity.moneyhub.co.uk",
    }
)

We provide an account connection widget that that makes it easier to allow users to connect their accounts.

The widget can either be initialised with data attributes in a script tag - or can be injected into the DOM via a JavaScript API.

Parameters

  • clientid - this is your client id for the client you want to use. It is available from the admin portal
  • redirecturi - this is the uri that you want the user to be redirected to after they have succesfully connected to an account or had an error. This redirect uri must be added to your api client in the admin portal. The redirect uri also needs to host the widget and mustn’t interfere with query parameters.
  • responsetype - this is the response type for the client that you want to use. It can be configured from admin portal
  • userid - the id of the user you want to connect accounts for. The user must be created via our API prior to the widget being loaded.
  • posturi - an enpoint set up to receive a JSON post each time a user either connects an account or has an error connecting an account. More details below
  • finishuri - a uri to redirect the user to when they click the “Finish” button
  • type - the type of connections to show when the users chooses a bank. Values can be “all”, “api” or “test”.
  • categoriestype - (optional) override the category type that will be applied to transactions received through this connection (for adding and reauth). Valid values are "personal" and "business".
  • identityuri - this should always be “https://identity.moneyhub.co.uk” in the production environment.
  • meta - this is an optional property that you can set - it will be passed to the post uri.

Post URI

Example request to post uri when there is an error

{
    "bankId": "1ffe704d39629a929c8e293880fb449a",
    "url": "https://identity.moneyhub.co.uk/oidc/auth?claims=%7B%22id_token%22%3A%7B%22sub%22%3A%7B%22essential%22%3Atrue%2C%22value%22%3A%225c82710d7c2eb82b175c2c5c%22%7D%7D%7D&client_id=4d18da1b-b6b7-4275-8407-3c8bade53f9a&redirect_uri=http%3A%2F%2Flocalhost%3A3001&response_type=code&scope=openid%20id%3A1ffe704d39629a929c8e293880fb449a&state=7f231a1c3ee116a04db56438cc60b4ee",
    "created": 1559556347842,
    "userId": "5c82710d7c2eb82b175c2c5c",
    "meta": "some meta property",
    "state": "7f231a1c3ee116a04db56438cc60b4ee",
    "error": "invalid_claims",
    "modified": 1559556348809
}

Example request to the post uri when an account has been succesfully connected:

{
    "bankId": "1ffe704d39629a929c8e293880fb449a",
    "url": "https://identity.moneyhub.co.uk/oidc/auth?claims=%7B%22id_token%22%3A%7B%22sub%22%3A%7B%22essential%22%3Atrue%2C%22value%22%3A%225ca49cda9cd8ab3640f3bb67%22%7D%7D%7D&client_id=4d18da1b-b6b7-4275-8407-3c8bade53f9a&redirect_uri=http%3A%2F%2Flocalhost%3A3001&response_type=code&scope=openid%20id%3A1ffe704d39629a929c8e293880fb449a&state=d657b3e549494c38fa7c8040763ef999",
    "created": 1559556615352,
    "userId": "5ca49cda9cd8ab3640f3bb67",
    "meta": "some meta property",
    "state": "d657b3e549494c38fa7c8040763ef999",
    "code": "bRHSHtqICup80FBfvi5jG7sejsY",
    "modified": 1559556620133
}

This endpoint must be set up to receive a JSON payload when the user succesfully connects or has an error connecting.

In the case of an error, there is nothing that you need to do, but it may be worth recording the error.

The important property here is code. This must be sent to our token endpoint in a standard OAuth 2 authorization code grant.

Widget

This is an example of the widget once that is rendered

410 410