@cardknox/vue-cardknox-ifields
v2.2.58
Published
A Vue component for Cardknox iFields
Downloads
93
Readme
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
- click
- dblclick
- focus
- blur
- input
- change
- keypress
- 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
Account
Options
ThreeDS
Handle3DSResults callback
Update Event Data
Error Data
iFields Version: 2.15.2302.0801