Account Information Service (AIS) Component

Overview

The Account Information Service (AIS) is an embeddable UI Component that is initiated to enable buyers to link their 3rd party bank accounts to be used when funding a payment run. When initiating the AIS Secure UI Component, users will be prompted to:

Select Bank: The end-user needs to first select the Bank that holds their bank account
Link a Bank Consent : The end-user needs to consent to link their bank account. When consent is provided, the end-user will be redirected to their chosen Bank to authorise access to their account data.
Redirect to your application: As soon as consent is provided, the end-user will be redirected back to your application.

Embed the AIS UI Component

The AIS Component requires the below parameters in order to be initialized successfully.

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application and ensure that you have an authentication token set as per instruction.

ais(callbackUrl, state, options, linkedAccountId);

Parameter	Type	Required?	Description
`callbackUrl`	string	Required	The callback URL specifies where the user should be redirected after they have completed their journey on the bank website.
`state`	string	Required	This property can be used to pass a string or serialized data, which will be appended to your configured default callback URL.
`options`	object	Optional	Add styling to the component.
`linkedAccountId`	string	Optional	This property should be used to extend an already `ACTIVE` AIS consent or re-authorise an `EXPIRED` consent.

important

The callbackURL must be on the same domain as the Redirect URL configured in the portal.

const ais = weavrComponents.prompt.ais(
  callbackUrl,
  state,
  options,
  linkedAccountId
);

Mounting

To display the component on the screen, it's necessary to mount it to the DOM. This involves creating a wrapping element that will serve as the container for injecting the secure frame. Be sure to assign an id to the HTML element.

note

Upon mounting to the element target the component will immediately call the necessary API’s in order to populate the necessary data on screen.

<!--ais.html-->
<div id="ais-example"></div>

// secure-ais.js
const ais = weavrComponents.prompt.ais(callbackUrl, state, options);
ais.mount("#ais-example");

Look and feel

The options parameter manages the overall appearance of the component. The below defines the options object:

Property	Type	Required?	Description
`classNames`	object	Optional	Defines which classes are to be appended to the wrapping element.
`style`	object	Optional	Defines the look and feel of the components elements.

const ais = weavrComponents.prompt.ais(callbackUrl, state, {
  classNames: "ais-class",
  style: {
    // Definition found below
  },
});

Property Definitions

`style`

The specified styles will be implemented on the component when it is mounted. While all key-value pairs are optional, each has a default value assigned. You can customize the default values by passing the desired values accordingly.

Property	Type	Required?	Description
`container`	object	Optional	Styles the wrapping element of the component that within the secure frame
`lineColor`	string	Optional	Line color.
`searchField`	object	Optional	Defines the look and feel of the search field.
`bankList`	object	Optional	Defines the look and feel of the bank list.
`buttons`	object	Optional	Defines the look and feel of the button elements.
`consentFont`	object	Optional	Defines the look and feel of the font used in the consent.

const ais = weavrComponents.prompt.ais(callbackUrl, state, {
    classNames: 'ais-class',
    style:{
        container: {
            height: '900px',
            fontSize: '1rem',
            fontFamily: 'Inter',
            backgroundColor: '#fff',
            padding: '3rem',
            borderRadius: '1rem',
            ...
        },
        lineColor: '#E0E0E0',
        searchField: {
            placeholderTextColor: '#808080',
            searchFieldBorderColor: '#E0E0E0',
            searchIconColor: '#595959'
        },
        bankList: {
            bankNameTextColor: '#0F0B3E',
            backgroundHoverColor: '#F9F9F9',
            textHoverColor: '#F4F4F4',
            arrowIconColor: '#0F0B3E'
        },
        buttons: {
            buttonRadius: '1rem',
            buttonBackgroundColor: '#F4F4F4',
            buttonTextColor: '#0F0B3E'
        },
        consentFont: {
            headingIconColor: '#0F0B3E',
            bodyTextColor: '#595959 ',
            termsUrlColor: '#2F22C3'
        }
    }
})

`container`

Each property follows the object format outlined below. This object features the following parameters, with each one accepting inputs based on the provided link.

note

The Pseudo-Class Object is a recursive structure composed of the same properties listed below. During recursion, the properties specific to the Pseudo-Class are omitted.

Parameter	Type	Required	Description
`backgroundColor`	string	Optional	Background color
`border`	string	Optional	Border width, style, and color
`borderRadius`	string	Optional	Border rounded corners
`classesNames`	string	Optional	Custom styling, or referencing in your stylesheet
`color`	string	Optional	Text color
`fontFamily`	string	Optional	Text font
`fontSize`	string	Optional	Font size
`fontSmoothing`	string	Optional	Font smoothing (anti-aliasing)
`fontStyle`	string	Optional	Text Style (italic or normal)
`fontVariant`	string	Optional	Text with small caps (or other font variants)
`fontWeight`	string	Optional	Text weight (thickness or boldness)
`height`	string	Optional	Component height
`letterSpacing`	string	Optional	Space between characters in the text
`lineHeight`	string	Optional	Height of text
`margin`	string	Optional	Spacing within component
`padding`	string	Optional	Spacing inside Component (between content & border)
`textAlign`	string	Optional	Horizontal text alignment
`textDecoration`	string	Optional	Text underline or overline
`textIndent`	string	Optional	First line text indentation
`textShadow`	string	Optional	Text shadow effect
`textTransform`	string	Optional	Text capitalization

`:hover`	object*	Optional	Pseudo-Class Triggered when a user interacts with an element using a pointed device e.g. cursor

`searchField`

Details the styling attributes for the search field element present in one of the screens of the AIS flow.

Property	Type	Required?	Description
`placeholderTextColor`	string	Optional	The color of the placeholder text found in the search field
`searchFieldBorderColor`	string	Optional	The border color of the search field.
`searchIconColor`	string	Optional	The search icon color found in the search field

`bankList`

The styling attributes of the bank list.

Property	Type	Required?	Description
`bankNameTextColor`	string	Optional	The text color of the banks name.
`backgroundHoverColor`	string	Optional	The color to apply to the element on pointer hover.
`textHoverColor`	string	Optional	The color to apply to the text on pointer hover.
`arrowIconColor`	string	Optional	The arrow icon color that is shown on pointer hover.

`buttons`

Describes the look and feel of the buttons found in the AIS component.

Property	Type	Required?	Description
`buttonRadius`	string	Optional	The radius of the buttons.
`buttonBackgroundColor`	string	Optional	The background color of the buttons.
`buttonTextColor`	string	Optional	The buttons text color.

`consentFont`

The AIS component will prompt for acceptance of consents. The below describes the consent font style.

Property	Type	Required?	Description
`headingIconColor`	string	Optional	Any heading found in the AIS component.
`bodyTextColor`	string	Optional	Any consent related text in the AIS component.
`termsUrlColor`	string	Optional	The URL color for terms and conditions.

Functions

You can interact with the library's components by utilizing the exposed functions. The below is a list of functions exposed for the AIS component

`mount`

The mount function is called in order to mount a component into the defined selector.

ais.mount(selector);

`unmount`

The unmount function is called in order to unmount a component from its selector.

note

Once a component is unmounted it can be remounted. One can remount the component utilizing the mount function.

ais.unmount();

`destroy`

The destroy function can be used to remove the element and its references from the DOM.

note

Once a component is destroyed it cannot be remounted. The component will be removed from Document Object Model (DOM) alongside any references and will need to be re-initialised

ais.destroy();

`on`

This function makes event listeners available for interacting with the component during events.

ais.on(event, listener);

`off`

This function provides the capability to detach event listeners from the component.

ais.off(event, listener);

Events

The AIS component will trigger the following events. You can listen to these events by attaching event listeners.

Event	Trigger condition
`ready`	Component has been initialisation successfully.
`change`	When component's state changes.
`error`	An error is returned during API requests. If not handled, an error is returned.
`accept`	Triggered when the AIS Consent is fulfilled.
`decline`	Triggered the decline button is clicked.

// Example - listen for accept event
ais.on("accept", (event) => {
  // do something
});

// Example - decline for accept event
ais.on("decline", (event) => {
  // do something
});

Examples

1. Embed the AIS UI Component

<!--ais.html-->
<div id="ais-example"></div>

// ais.js
const options = {
  classNames: "ais-class",
  style: {
    container: {
      height: "900px",
      fontSize: "1rem",
      fontFamily: "Fuggles",
      backgroundColor: "#f0edde",
      padding: "3rem",
      borderRadius: "1rem",
    },
    lineColor: "#3cf7ca",
    searchField: {
      placeholderTextColor: "#7c1869",
      searchFieldBorderColor: "#7c1869",
      searchIconColor: "#7c1869",
    },
    bankList: {
      bankNameTextColor: "#3cf7ca",
      backgroundHoverColor: "#2a2b44",
      textHoverColor: "#7c1869",
      arrowIconColor: "#7c1869",
    },
    buttons: {
      buttonRadius: "1rem",
      buttonBackgroundColor: "#7c1869",
      buttonTextColor: "#3cf7ca",
    },
    consentFont: {
      bodyTextColor: "#7c1869",
      headingIconColor: "#2a2b44",
      termsUrlColor: "#7c1869",
    },
  },
};

const ais = weavrComponents.prompt.ais(callbackUrl, state, options);
ais.mount("#ais-example");

ais.on("decline", (event) => {
  console.log("Decline", event);
  ais.destroy();
});

ais.on("accept", (event) => {
  console.log("Accept", event);
  ais.destroy();
});

<!--ais.html-->
<div id="ais-example"></div>

// ais.js
const ais = weavrComponents.prompt.ais(
  callbackUrl,
  state,
  undefined,
  linkedAccountId
);
ais.mount("#ais-example");

ais.on("decline", (event) => {
  console.log("Decline", event);
  ais.destroy();
});

ais.on("accept", (event) => {
  console.log("Accept", event);
  ais.destroy();
});

Overview​

Embed the AIS UI Component​

Mounting​

Look and feel​

Property Definitions​

style​

container​

searchField​

bankList​

buttons​

consentFont​

Functions​

mount​

unmount​

destroy​

on​

off​

Events​

Examples​

1. Embed the AIS UI Component​

*2. Extend the AIS consent​

Overview

Embed the AIS UI Component

Mounting

Look and feel

Property Definitions

`style`

`container`

`searchField`

`bankList`

`buttons`

`consentFont`

Functions

`mount`

`unmount`

`destroy`

`on`

`off`

Events

Examples

1. Embed the AIS UI Component

*2. Extend the AIS consent