Finicity 连接网络 SDK
概览
Finicity Connect Web SDK为开发者提供了一个将Finicity Connect集成到他们的网络应用中的简单方法. 它通过iframe或通过弹出窗口支持嵌入式体验.
安装
npm install @finicity/connect-web-sdk
使用量
积累的经验
import { FinicityConnect, ConnectEventHandlers, ConnectOptions, ConnectDoneEvent, ConnectCancelEvent, ConnectErrorEvent, ConnectRouteEvent } from '@finicity/connect-web-sdk';
export class ConnectComponent {
connectEventHandlers: ConnectEventHandlers = {
onDone: (event: ConnectDoneEvent) => { console.log(event); },
onCancel: (event: ConnectCancelEvent) => { console.log(event); },
onError: (event: ConnectErrorEvent) => { console.log(event); },
onRoute: (event: ConnectRouteEvent) => { console.log(event); },
onUser: (event: any) => { console.log(event); },
onLoad: () => { console.log('loaded'); }
};
connectOptions: ConnectOptions = {
overlay: 'rgba(199,201,199, 0.5)'
};
constructor() {
FinicityConnect.launch(
'CONNECT_URL',
this.connectEventHandlers,
this.connectOptions);
}
}
弹出体验
import { FinicityConnect, ConnectEventHandlers, ConnectOptions, ConnectDoneEvent, ConnectCancelEvent, ConnectErrorEvent, ConnectRouteEvent } from '@finicity/connect-web-sdk';
export class ConnectComponent {
connectEventHandlers: ConnectEventHandlers = {
onDone: (event: ConnectDoneEvent) => { console.log(event); },
onCancel: (event: ConnectCancelEvent) => { console.log(event); },
onError: (event: ConnectErrorEvent) => { console.log(event); },
onRoute: (event: ConnectRouteEvent) => { console.log(event); },
onUser: (event: any) => { console.log(event); },
onLoad: () => { console.log('loaded'); }
};
connectOptions: ConnectOptions = {
popup: true,
popupOptions: {
width: 600,
height: 600,
top: window.top.outerHeight / 2 + window.top.screenY - (600 / 2),
left: window.top.outerWidth / 2 + window.top.screenX - (600 / 2)
}
};
constructor() {
FinicityConnect.launch(
'CONNECT_URL',
this.connectEventHandlers,
this.connectOptions);
}
}
连接事件处理器
| 事件类型 | 说明 |
|---|---|
| 登录 | 当连接网页被装入并准备显示时调用 |
| 已执行 | 当用户成功完成连接应用程序时调用 |
| 取消时 | 当用户取消连接应用程序时调用 |
| 错误 | 当用户使用连接时发生错误时调用 |
| 旋转 | 与用户一起调用正在浏览 Connect 应用程序的屏幕 |
| 用户 | 用户执行动作时调用 。 用户事件为用户在连接应用程序内可采取的行动提供可见度 |
关于这些活动的更详细资料: 连接事件类型
连接选项
| 选项 | 说明 |
|---|---|
| 覆盖 | 更改显示连接模式的覆盖颜色( 仅针对 iframe, 默认为 rgba( 0, 0, 0, 0) ) |
| 选择器 | CSS 选择器, Connect 应当嵌入其中 。 连接会扩大以填充容器的尺寸,元素的位置不能是 static连接将默认显示为模式 |
| 节点 | 连接应该嵌入的元素 。 连接会扩大以填充容器的尺寸,元素的位置不能是 static连接将默认显示为模式 |
| 弹出 | 显示连接是否在弹出中显示( 默认为假) |
| 弹出选项 | 用于配置弹出子的宽度/ 高和定位( 上/ 左) |