web 端接入 3DS 场景

1、引入 kpay-3ds-components API

import { createFromAction } from 'kpay-3ds-components';

import 'kpay-3ds-components/index.css';

2、页面提供 3ds 认证容器

<div id='adyen-container'></div>

3、设置 3ds 认证信息配置

const configuration = {
    // API环境 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in'
    environment: "test",
    // 客户端key
    clientKey: "YOUR_CLIENT_KEY",
    // 3ds 弹窗认证资源回调
    onAdditionalDetails: (threeDSResult) => {},
    // 页面 3ds 弹窗容器id
    mount: '#adyen-container'
};

4、设置 payInfo 数据，拉起 3ds 面板

/** const payInfo = {
  *  'authorisationToken': '***',
  *  'paymentData': '***',
  *  'paymentMethodType': 'scheme',
  *  'subtype': 'fingerprint',
  *  'token: '***',
  *  'type: 'threeDS2',
  *  'url: null
*/  }

createFromAction(configuration, payInfo);

5、 3ds 认证面板输入密码后，触发 onAdditionalDetails 方法，threeDSResult 数据传递到认证接口