(原始内容存档于2016-10-12). vue-cardknox-ifields

用于 Cardknox i 字段的 Vue 3 组件

卡克诺克

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

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

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

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

此组件使用Vue 3. Vue 2 , 使用版本 1.2.54 (中文(简体) )

使用量

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

1. 类型

I Fields支持三种付款数据:

• 信用卡
• 简历
• 阿彻

    template: '<ifields :type="card" />

该财产的可能价值是:

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

可从组件中导入

import { CARD_TYPE, CVV_TYPE, ACH_TYPE } from 'vue-cardknox-ifields';

2. 账户

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

Vue.component('app', {
    data: function () {
        return {
            account: {
                xKey: '{Your iFields key}',
                xSoftwareName: '{The name of your app}',
                xSoftwareVersion: '{Your app's version}'
            }
        };
    }
    template: '<ifields :account="account" />'
});

活动

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

生命周期事件

1. 装入

Iframe 已装入时释放

    template: '<ifields v-on:load="onLoad" />

2. 托肯语

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

    template: '<ifields v-on:token="onTokenReceived" />

用户事件

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

现有活动是:

1. 单击
2. dbl 点击
3. 焦点
4. 模糊
5. 投入
6. 变动
7. 密钥压
8. 来文 *

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

更新事件

除了提交之外,上述事件还可以在单个活动中收集 update这是 没有 建议,因为这将导致不必要的函数调用。 而不是只订阅您想要执行的事件.

活动 有效载数 进入 e.data。数据还包含该事件,以便您可以订阅多个具有单一函数和 switch 这样的声明:

Vue.component('app', {
    methods: {
        onUpdate({ data }) {
            switch (data.event) {
                case 'input':
                    console.log("input event received");
                    break;
                case 'click':
                    console.log("click event received");
                    break;
            }
        }
    },
    template: '<ifields @click="onUpdate" @input="onUpdate" />'
});

提交事件

当用户从 iFrame 内部提交窗体时,此事件会被触发 .

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

• 仅在 proc 情况下此事件才会被释放 options.autoSubmit 这是真的。 (此为缺省
• 订阅为 @update 将不象上述那样工作.
• 随这一事件而来的数据略有不同(见下文).

Vue.component('app', {
    methods: {
        onSubmit() {
            document.getElementById('form').dispatchEvent(
                new Event("submit", {
                    bubbles: true,
                    cancelable: true
                })
            );
        }
    },
    data: function () {
        return {
            options: {
                autoSubmit: true
            }
        };
    }
    template: `<form id="form">
                    <ifields :options="options" @submit="onSubmit" />
                </form>`
});

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

Vue.component('app', {
    data: function () {
        return {
            options: {
                autoSubmit: true,
                autoSubmitFormId: 'form'
            }
        };
    },
    template: `<form id="form">
                    <ifields :options="options" />
                </form>`
});

错误

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

行动

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

焦点

focusIfield

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

清除

clearIfield

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

获取托肯

getToken

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

  
Vue.component('app', {
    methods: function () {
        return {
            focus(){
                this.$refs.ifieldRef.focusIfield();
            },
            clear(){
                this.$refs.ifieldRef.clearIfield();
            }
            getToken(){
                this.$refs.ifieldRef.getToken();
            }
        };
    },
    template: `<ifields ref="ifieldRef" />
});

道具

账户

选项

三维

import { THREEDS_ENVIRONMENT } from "vue-cardknox-ifields";

处理3DS Results 回调

更新事件数据

数据出错

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