{"id":28577447,"url":"https://github.com/mastercard/connect-web-sdk","last_synced_at":"2025-08-05T04:21:30.134Z","repository":{"id":237846429,"uuid":"795347050","full_name":"Mastercard/connect-web-sdk","owner":"Mastercard","description":"Connect Web SDK to intialize Connect Session in Web Apps.","archived":false,"fork":false,"pushed_at":"2025-05-26T11:02:56.000Z","size":941,"stargazers_count":6,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-26T11:25:07.108Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mastercard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-03T04:46:46.000Z","updated_at":"2025-05-26T11:03:00.000Z","dependencies_parsed_at":"2024-05-03T10:50:16.132Z","dependency_job_id":"9677d647-f685-458f-a3d5-f97d21d06f6a","html_url":"https://github.com/Mastercard/connect-web-sdk","commit_stats":null,"previous_names":["mastercard/connect-web-sdk"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Fconnect-web-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Fconnect-web-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Fconnect-web-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Fconnect-web-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mastercard","download_url":"https://codeload.github.com/Mastercard/connect-web-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Fconnect-web-sdk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259177331,"owners_count":22817349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-11T00:37:50.680Z","updated_at":"2025-06-11T00:38:43.080Z","avatar_url":"https://github.com/Mastercard.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mastercard Open Banking Connect Web SDK\n\n## Overview\n\nThe Mastercard Open Banking Connect Web SDK provides an easy way for developers to integrate Mastercard Open Banking Connect into their web application. It supports both the embedded experience via iframe or through a popup window.\n\n## Installing\n\n```bash\nnpm install connect-web-sdk\n```\n\n## Usage\n\n### Embedded Experience\n```typescript\nimport { Connect, ConnectEventHandlers, ConnectOptions, ConnectDoneEvent, ConnectCancelEvent, ConnectErrorEvent, ConnectRouteEvent } from 'connect-web-sdk';\n\nexport class ConnectComponent {\n  \n  connectEventHandlers: ConnectEventHandlers = {\n    onDone: (event: ConnectDoneEvent) =\u003e { console.log(event); },\n    onCancel: (event: ConnectCancelEvent) =\u003e { console.log(event); },\n    onError: (event: ConnectErrorEvent) =\u003e { console.log(event); },\n    onRoute: (event: ConnectRouteEvent) =\u003e { console.log(event); },\n    onUser: (event: any) =\u003e { console.log(event); },\n    onLoad: () =\u003e { console.log('loaded'); }\n  };\n\n  connectOptions: ConnectOptions = {\n    overlay: 'rgba(199,201,199, 0.5)'\n  };\n\n  constructor() {\n    Connect.launch(\n      'CONNECT_URL',\n     this.connectEventHandlers,\n     this.connectOptions);\n  }\n}\n```\n\n### Popup Experience\n```typescript\nimport { Connect, ConnectEventHandlers, ConnectOptions, ConnectDoneEvent, ConnectCancelEvent, ConnectErrorEvent, ConnectRouteEvent } from 'connect-web-sdk';\n\nexport class ConnectComponent {\n  \n  connectEventHandlers: ConnectEventHandlers = {\n    onDone: (event: ConnectDoneEvent) =\u003e { console.log(event); },\n    onCancel: (event: ConnectCancelEvent) =\u003e { console.log(event); },\n    onError: (event: ConnectErrorEvent) =\u003e { console.log(event); },\n    onRoute: (event: ConnectRouteEvent) =\u003e { console.log(event); },\n    onUser: (event: any) =\u003e { console.log(event); },\n    onLoad: () =\u003e { console.log('loaded'); }\n  };\n\n  connectOptions: ConnectOptions = {\n    popup: true,\n    popupOptions: {\n      width: 600,\n      height: 600,\n      top: window.top.outerHeight / 2 + window.top.screenY - (600 / 2),\n      left: window.top.outerWidth / 2 + window.top.screenX - (600 / 2)\n    }\n  };\n\n  constructor() {\n    Connect.launch(\n      'CONNECT_URL',\n     this.connectEventHandlers,\n     this.connectOptions);\n  }\n}\n```\n\n## Connect Event Handlers\n\n| Event Type | Description                                                                                                                             |\n| ---------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| onLoad     | Called when the Connect web page is loaded and ready to display                                                                         |\n| onDone     | Called when the user successfully completes the Connect application                                                                     |\n| onCancel   | Called when the user cancels the Connect application                                                                                    |\n| onError    | Called when an error occurs while the user is using the Connect                                                                         |\n| onRoute    | Called with the user is navigating through the screens of the Connect application                                                       |\n| onUser     | Called when a user performs an action. User events provide visibility into what action a user could take within the Connect application |\n| onUrl      | Called when a URL event is triggered from the Connect application. If provided, the SDK will not handle URL events automatically, and clients must manage the logic themselves. If not provided, the SDK will handle URL events by default. The default SDK behavior remains unchanged if the onUrl handler isn't supplied. |\n\n#### Configuring your onUrl handler\nTo customize how URL events are handled in your application, you can provide an onUrl handler in your Connect Event handlers. When provided, this handler gives you full control over how URLs are opened and closed, rather than relying on the SDK's default popup behavior.\n\nHere is an example of implementing a custom onUrl handler:\n```typescript\nconnectEventHandlers: ConnectEventHandlers = {\n  onDone: (event: ConnectDoneEvent) =\u003e { console.log(event); },\n  onCancel: (event: ConnectCancelEvent) =\u003e { console.log(event); },\n  onError: (event: ConnectErrorEvent) =\u003e { console.log(event); },\n  onRoute: (event: ConnectRouteEvent) =\u003e { console.log(event); },\n  onUser: (event: any) =\u003e { console.log(event); },\n  onLoad: () =\u003e { console.log('loaded'); },\n  onUrl: (type, url) =\u003e {\n    if (type === 'OPEN' \u0026\u0026 url) {\n      console.log(`Opening URL: ${url}`);\n      // Custom logic to open a URL\n      window.open(url, 'targetWindow', 'width=600,height=600');\n    } else if (type === 'CLOSE') {\n      console.log('Closing popup');\n      // Custom logic to close popup\n      window.close()\n    }\n  }\n};\n\nConnect.launch(connectURL, connectEventHandlers, connectOptions);\n```\n\n- The onUrl handler accepts two parameters:\n  - `type`: A string literal that can be either 'OPEN' or 'CLOSE'\n    - 'OPEN': Indicates that a URL should be opened\n    - 'CLOSE': Indicates that a URL event should be closed\n  - `url`: An optional string parameter that is only present when type is 'OPEN'. This represents the URL to be opened.\n\n  \u003e **Please Note**: If you provide a handler for the onUrl event, you must manage popups gracefully yourself. The Connect SDK will not handle popups for you if this handler is provided. Only provide a handler for this event if you want to diverge from the default behavior.\n\n## Connect Options\n\n| Option | Description                                                                                                                                  |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| overlay     | Changes the overlay color where the Connect modal is displayed (only for iframe, defaults to rgba(0,0,0,0.8))                           |\n| selector    | CSS selector in which Connect should be embedded to. Connect will expand to fill the container's dimensions, the element's position must not be `static`. Connect will be displayed in a modal by default                                                                                                         | \n| node        | Element in which Connect should be embedded to. Connect will expand to fill the container's dimensions, the element's position must not be `static`. Connect will be displayed in a modal by default                                                                                                         | \n| popup       | Indicates if Connect should be displayed in a popup (defaults to false)                                                                 |\n| popupOptions| Used to configure the popup's width/height and positioning (top/left)                                                                   |\n| redirectUrl | The URL to redirect back to your mobile app after completing an FI’s OAuth flow (universal link on iOS, app link on Android). This parameter is only required for App to App.                                                                   |\n\n\n#### Configuring your redirectUrl\nIn order to return control back to your application after a customer completes an FI’s OAuth flow, you must specify a redirectUrl value. This URL is used to redirect back to your mobile app after completing an FI’s OAuth flow (this should be a universal link on iOS or an app link on Android). Please note: This is only applicable for App to App\n\nHere is an example of a universal link redirectUrl within your code:\n```\nconnectOptions: ConnectOptions = {\n  popup: true,\n  popupOptions: {\n    width: 600,\n    height: 600,\n    top: window.top.outerHeight / 2 + window.top.screenY - (600 / 2),\n    left: window.top.outerWidth / 2 + window.top.screenX - (600 / 2)\n  },\n  redirectUrl = \"https://youruniversallink.com\";\n};\n\nConnect.launch(connectURL, connectEventHandlers, connectOptions );\n```\n\n\n### Cleanup\nWhen the user of your application is finished with Connect you need to make sure to clean up the Connect instance by calling the destroy method. For example, if you have a ReactJS application you would call destroy in the unmount of your component.\n\n```TypeScript\nConnect.destroy()\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastercard%2Fconnect-web-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmastercard%2Fconnect-web-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastercard%2Fconnect-web-sdk/lists"}