反应- ifields

Cardknox i 字段的反应组件

卡克诺克

Cardknox是开发商方便的支付网关集成供应商,用于存储、在线或移动交易

沙盒 : https://www.cardknox.com/sandbox/ 页面存档备份,存于互联网档案馆

i 字段: https://www.cardknox.com/ifields/ 页面存档备份,存于互联网档案馆

使用此组件需要沙盒或活账户

使用量

需要2个基本道具来进行这个操作.

1. 类型

I Fields支持三种付款数据:

• 信用卡
• 简历
• 阿彻

    <IField type={CARD_TYPE} />

该财产的可能价值是:

• 纸牌
• 简历
• ach (单位:千美元)

可从组件中导入

import { CARD_TYPE, CVV_TYPE, ACH_TYPE } from '@cardknox/react-ifields';

2. 账户

递给你 i 字段密钥 改为 账户 这样的道具 :

export default class App extends React.Component {
  state = {
    account = {
      xKey: "{Your iFields key}",
      xSoftwareName: "{The name of your app}",
      xSoftwareVersion: "{Your app's version}"
    }
  }
  render() {
    return <IField account={this.state.account} />
  }
}

活动

有2个生命周期事件和7个用户事件.

生命周期事件

1. 装入

于 iframe 已装入

    <IField onLoad={this.onLoad} />

2. 托肯语

当从 i 字段收到一个符号时会释放

    <IField onToken={this.onToken} />

用户事件

用户事件是指用户与其互动时从iFields传递的事件.

现有活动是:

1. 单击
2. dbl 点击
3. 焦点
4. 模糊
5. 投入
6. 变动
7. 密钥压
8. 已更新( 仅使用 CVV)
9. 来文 *

* 提交活动的作用略有不同,见下文.

更新事件

除了提交之外,上述活动都是在一次活动中收集的 update。 。 。 .

事件有效载荷在 e.data。数据中还包含事件类型,以便您可以筛选出您不需要的事件 switch 这样的声明:

export default class App extends React.Component {
  render() {
    return <IField onUpdate={this.onUpdate} />
  }
  onUpdate = (data) => {
    switch (data.event) {
      case 'input':
        console.log("input event received");
        break;
      case 'click':
        console.log("click event received");
        break;
      default:
        break;
    }
  }
}

提交事件

当用户从 iFrame 内部提交窗体( 按下 Enter 键)时,此事件会被触发.

此事件与其他用户事件不同.

• 仅在 proc 情况下此事件才会被释放 options.autoSubmit 这是真的.
• 此事件不调用 onUpdate。 。 。 .
• 此事件没有传递数据 .

export default class App extends React.Component {
  state = {
    options: {
      autoSubmit: true
    }
  }
  render() {
    return <IField options={this.state.options} onSubmit={this.onSubmit} />
  }
  onSubmit = () => {
    //submit to server
  }
}

也可以让组件自动为您提交表格 提交 从 iFrame 被触发。 若为 autoSubmitFormId 设置在选项道具上,组件将调用带有该标识的元素。 这对于依赖窗体元素处理提交文件的较小的应用程序有用.

export default class App extends React.Component {
  state = {
    options: {
      autoSubmit: true,
      autoSubmitFormId: 'form'
    }
  }
  render() {
    return <form id="form">
        <IField options={this.state.options} />
      </form>
  }
}

错误

还有一个错误事件可以订阅.

export default class App extends React.Component {
  render() {
    return <IField onError={this.onError} />
  }
  onError = (data) => {
    console.error("IFrame errored", data);
  }
}

行动

关于这一构成部分,还有3个行动

焦点

focusIfield

此动作会在调用时将焦点设定为 ifield

清除

clearIfield

此动作将在调用时清除 ifield 的数据

获取托肯

getToken

此动作会在调用时为 ifield 装入符号 .

export default class App extends React.Component {
  iFieldRef = React.createRef();
  render() {
    return <IField ref={this.iFieldRef} />
  }
  focus = () => {
    this.iFieldRef.current.focusIfield();
  }
  clear = () => {
    this.iFieldRef.current.clearIfield();
  }
  getToken = () => {
    this.iFieldRef.current.getToken();
  }
}

道具

账户

选项

三维

有关3D-安全与i 字段的完整文件见 这里

更新事件数据

调试数据

数据出错

i 字段版本 : 2.15.2309.2601 (中文(简体) )