Connect Components Web SDK

Overview

The Connect Components SDK provides a collection of custom Web Components that can be used to build login forms for legacy institutions, initiate OAuth authentication flow for institutions, and render Multi-Factor Authorization challenges encountered during legacy institution login.

Installing

npm i @mastercard/connect-components-web-sdk

Elements

The Connect Components Web SDK provides several custom web components for use in building login flows. Below is a brief overview of the elements, their attributes, and events.

Mastercard Form

The Mastercard Form element is used as the parent element for Mastercard Input and Mastercard MFA Choice elements. When a Mastercard Form element is added to the page, a Mastercard Event Stream element will automatically be added as well and will share the event-stream-id of the Mastercard Form element.

<mastercard-form
  form-id: string
  event-stream-id: string
></mastercard-form>

Properties

| HTML Property Name | Description | Class Property Name | | -------------- | ------------- | ------------------------ | | form-id | The 'id' property from the GetLoginForm response | formId | | event-stream-id | The 'eventStreamId' property from the GetLoginForm response | eventStreamId | | (none) | Event emitter | events |

Events

The <mastercard-form> element exposes an event listener on its .events property, i.e. form.events.addEventListener('success', callback).

| Event Type | Description | Applicable Flow | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----- | | success | Called when account linking has finished | Legacy / OAuth | | error | Called on unsuccessful login attempt. Contains a code which may be used to determine error cause | Legacy / OAuth | | mfaChallenge | Called when a login attempt triggers an multi-factor challenge. MFA challenges may trigger additional mfaChallenge events | Legacy | | formStateChange | Called when all form elements have finished rendering. Can be used to show and hide loading spinners | Legacy | | blur | Called when any form element has lost focus. The event will contain the elementId of the blurred element, i.e. {"data": {"elementId": "c6221293-9ae2-4ba4-a0ec-9f1670a7798a"}} | Legacy | | focus | Called when any form element has gained focus. The event will contain the elementId of the focused element, i.e. {"data": {"elementId": "c6221293-9ae2-4ba4-a0ec-9f1670a7798a"}} | Legacy |

Mastercard Input

<mastercard-input
  id: string
  form-id: string
  event-stream-id?: string
  component-styles?: string
></mastercard-input>

Properties

| HTML Property Name | Description | Class Property Name | | -------------- | ------------- | ------------------------ | | id | The element[].id property from the GetLoginForm response | id | | form-id | The 'id' property from the GetLoginForm response | formId | | event-stream-id (optional) | The 'eventStreamId' property from the GetLoginForm response. Will be set automatically if left blank | eventStreamId | | component-styles (optional) | Stringified JSON representing the styles to apply, i.e. JSON.stringify({input: {color: red}}) | componentStyles |

Events

The input elements do not currently emit their own events. Event handling should be performed on the parent Mastercard Form element.

Mastercard Event Stream

<mastercard-event-stream
  event-stream-id: string
  form-id: string
></mastercard-event-stream>

Properties

| HTML Property Name | Description | Class Property Name | | -------------- | ------------- | ------------------------ | | event-stream-id | The eventStreamId property from the GetLoginForm or GetOAuthURL response | eventStreamId | | form-id | The 'id' property from the GetLoginForm or GetOAuthURL response | formId | | (none) | Event emitter | events |

Events

The event stream shares the same events as the <mastercard-form> element. Events are available via its events property, i.e. eventStream.events.addEventListener('success', callback).

Mastercard MFA Choice

<mastercard-mfa-choice
  id: string
  form-id: string
  event-stream-id?: string
  component-styles?: string
></mastercard-event-stream>

Properties

| HTML Property Name | Description | Class Property Name | | -------------- | ------------- | ------------------------ | | id | The choiceIds[] value from the mfaChallenge event body | id | | form-id | The 'id' property from the GetLoginForm response | formId | | event-stream-id (optional) | The 'eventStreamId' property from the GetLoginForm response. Will be set automatically if left blank | eventStreamId | | component-styles (optional) | Stringified JSON representing the styles to apply, i.e. JSON.stringify({input: {color: red}}) | componentStyles |

Events

The input elements do not currently emit their own events. Event handling should be performed on the parent Mastercard Form element.

Additional Information

For information on how to use Connect Components or implement the Connect Components Web SDK please visit the Mastercard Developer Zone.