useToolkit

useToolkit is a custom hook used to generate a card token.

Installation

run npm i use-toolkit-hook6

Usage

import { ToolkitWrap, useToolkit } from 'use-toolkit-hook6';

ToolkitWrap is the component wrapper which holds the div elements, that the iframe will be rendered inside.

useToolkit is the custom hook which enables to get a card token by filling card details.

Information

useToolkit can accept these parameters:

onSuccess - a callback function that should run after generating the card succeeded

onFail - a callback function that should run after generating the card failed

onValidationFail - a callback function that should run when there is a validation error in one of the fields ( after submitting )

styles - a custom object which can be injected to control the styles

env - a string, one of : 'dev', 'qa', 'sandbox', 'prod'

The hook exposes a function, which responsible for submitting the form

Example

Params that can be passed to useToolkit:

  const styles = {
    inputs: {},
    inputWrapper: {},
    inputLabel: {},
    input: {
      border: '1px solid red'
    },
    expiration: {},
    inputError: {}
  };
  const onSuccess = (token) => {
    console.log('success');
  }
  const onFail = () => {
    console.log('fail');
  }
  const onValidationFail = (errors) => {
    console.log('validation fail ? ', errors);
  }
  const toolkitParams = {
    onSuccess,
    onFail,
    onValidationFail,
    styles,
    env: 'dev',
  };

Usage of useToolkit: submit function can get one param

  const toolkit = useToolkit(toolkitParams);
  const { submit } = toolkit;

Usage of ToolkitWrap: under the hood toolkit wrap will render a div with id = 'rapyd-checkout'

  return (
    <ToolkitWrap />
  );