Normal People, MMM!

    @cardknox/vue-cardknox-ifields

    1.0.1 • Public • Published

    vue-cardknox-ifields

    A Vue component for Cardknox iFields


    Cardknox

    Cardknox is a developer-friendly payment gateway integration provider for in-store, online, or mobile transactions

    Sandbox: https://www.cardknox.com/sandbox/

    iFields: https://www.cardknox.com/ifields/

    A sandbox or live account is required to use this component


    Usage

    There are 2 basic props required to get this up and running.

    1. Type

    There are three types of payment data iFields supports:

    • Credit Card
    • CVV
    • ACH
        template: '<ifields :type="card" />
    

    The possible values for this property are

    • card
    • cvv
    • ach

    These can be imported from the component

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

    2. Account

    Pass your iFields key to the component in the account prop like this:

    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" />'
    });
    

    Events

    There are 2 lifecycle events and 7 user events.


    Lifecycle events

    1. Load

    Is emitted when the iframe has loaded

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

    2. Token

    Is emitted when a token is received from the iField

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

    User events

    User events are events passed along from iFields when the user interacts with it.

    The available events are

    1. click
    2. dblclick
    3. focus
    4. blur
    5. input
    6. change
    7. submit*

    * the submit event works slightly differently, see below.

    Update

    Aside from submit, the above events can be collected on a single event update. This is not recommended as it will cause an unnecessary amount of function calls. Instead subscribe only to the events you want to act on.

    The event payload is in e.data. The data also contains the event so you can subscribe to multiple events with a single function and a switch statement like this:

    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" />'
    });
    

    Submit

    This event is triggered when the user submits the form from within the iFrame.

    This event works differently than other user events.

    • This event is only emitted if prop options.autoSubmit is true. (This is the default.)
    • Subscribing to @update will not work as mentioned above.
    • The data passed along with this event is slightly different, (see below).
    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>`
    });
    

    It is also possible to have the component automatically submit the form for you when submit is triggered from the iFrame.If autoSubmitFormId is set on the options prop the component will call submit on the element with that ID. This is useful for smaller applications relying on the form element to handle submission.

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

    Error

    There is also an error event that can be subscribed to.


    Props

    Name Type Description Valid values
    type String iFields type
    • card
    • cvv
    • ach
    account Account
    options Options
    threeDS ThreeDS
    issuer String Card issuer For cvv iField only

    Account

    Name Type Description
    xKey String iFields key
    xSoftwareName String Software name
    xSoftwareVersion String Software version

    Options

    Name Type Description
    enableLogging Boolean Turn iField logs to the console on and off
    autoFormat Boolean Turn iField auto-formatting on and off. This is only used for iFields of card type. See autoFormatSeparator
    autoFormatSeparator String A string to be used to auto-format card numbers when autoFormat is turned on. The default value is " " (space).
    autoSubmit Boolean Turn on capturing a submit event triggered from within the iFrame. Default is true.
    autoSubmitFormId String If autoSubmit is true, the ID of a form element can be set and the component will trigger submit on the form when submit is triggered in the iFrame.
    placeholder String Text to be used as placeholder text for the input field.
    iFieldstyle Object A style object to be used to style the iFields input element. This object is assigned to HTMLElement.style.

    ThreeDS

    Name Type Description
    enable3DS Boolean Turn 3DSecure on and off
    waitForResponse Boolean Determine whether iFields should wait for a response from 3DSecure before getting the token
    waitForResponseTimeout Number The 3DSecure response timeout in milli-seconds. The default value is 2000 (2 seconds).
    amount Number The transaction amount
    month Number The 2-digit card expiration month
    year Number The 2-digit card expiration year

    Update Event Data

    Name Type Description
    enable3DS Boolean Turn 3DSecure on and off
    waitForResponse Boolean Determine whether iFields should wait for a response from 3DSecure before getting the token
    waitForResponseTimeout Number The 3DSecure response timeout in milli-seconds. The default value is 2000 (2 seconds).
    amount Number The transaction amount
    month Number The 2-digit card expiration month
    year Number The 2-digit card expiration year

    Error Data

    Name Type Description
    result String This will always have the value of error
    errorMessage String Contains the error message
    xTokenType String Either card, cvv, or ach





    iFields Version: 2.6.2006.0102

    Install

    npm i @cardknox/vue-cardknox-ifields

    DownloadsWeekly Downloads

    264

    Version

    1.0.1

    License

    GPL-3.0

    Unpacked Size

    88.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • rezwan-ck
    • mweisz-ck
    • mstein-ck
    • ymwymw