npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cardknox/react-ifields

v2.2.62

Published

A React component for Cardknox iFields

Downloads

1,648

Readme

react-ifields

A React 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
    <IField type={CARD_TYPE} />

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 '@cardknox/react-ifields';

2. Account

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

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} />
  }
}

Events

There are 2 lifecycle events and 7 user events.


Lifecycle events

1. Load

Is emitted when the iframe has loaded

    <IField onLoad={this.onLoad} />

2. Token

Is emitted when a token is received from the iField

    <IField onToken={this.onToken} />

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. issuerupdated (CVV only)
  9. submit*

* the submit event works slightly differently, see below.

Update Event

Aside from submit, the above events are all collected on a single event update.

The event payload is in e.data. The data also contains the event type so you can filter out events you don't need with a switch statement like this:

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;
    }
  }
}

Submit Event

This event is triggered when the user submits the form (presses the Enter key) from within the iFrame.

This event works differently than other user events.

  • This event is only emitted if prop options.autoSubmit is true.
  • This event does not call onUpdate.
  • No data is passed along with this event.
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
  }
}

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.

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

Error

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

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

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.

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();
  }
}

Props

Account

Options

ThreeDS

For full documentation about 3D-Secure with iFields see here

Update Event Data

Token Data

Error Data


iFields Version: 2.15.2309.2601