@cardknox/vue-cardknox-ifields

vue-cardknox-ifields

A Vue 3 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

---

This component uses Vue 3. For Vue 2, use version 1.2.54

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. keypress
8. submit*

* the submit event works slightly differently, see below.

Update Event

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 Event

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.

Vue.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.

---

Actions

There are 3 actions available on this component as well

Focus

focusIfield

This action will set the focus to the ifield when called

Clear

clearIfield

This action will clear the data from the ifield when called

Get Token

getToken

This action will load the token for the ifield when called.

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

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	The token should be retrieved as soon as the data is valid. This setting will also turn on capturing a submit event triggered from within the iFrame when submitting the data. 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
environment	string	The 3DS environment Valid values are: staging production These values can be imported from the iFields package import { THREEDS_ENVIRONMENT } from "vue-cardknox-ifields";
handle3DSResults	Handle3DSResults	A callback that will be called when the payment is validated. This data should be sent to the Cardknox gateway by your back-end server. See https://docs.cardknox.com/cardknox-products/3d-secure

Handle3DSResults callback

Parameters
ActionCode
CAVV
ECIFlag
CardknoxRefnum
PAResStatus
SignatureVerification
Error

Update Event Data

Name	Type	Description
cardNumberlength	Number	The length of the data in the card iField Only returned on an update event from the card iField
event	String	The name of the event
ifieldValueChanged	Boolean	Whether or not the value in this iField has changed
isEmpty	Boolean	Whether or not the iField is empty
isValid	Boolean	Whether or not the data in the iField is valid
issuer	String	The card issuer Only returned on an update event from the card iField
length	Boolean	The length of the data in the iField Note: For card iFields, this includes the formating character. Use cardNumberlength to get the actual data length.

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.15.2302.0801