useToolkit

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

Installation

run npm i @rapyd/use-toolkit

Usage

import { ToolkitWrap, useToolkit } from '@rapyd/use-toolkit';

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 )

onFormStatusUpdate - a callback function that should run when form completion status is changed

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

errors - a custom object which can be injected to control the error messages

env - a string, one of : 'development', 'qa', 'sandbox', 'production'

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

Example

Params that can be passed to useToolkit:

const styles = {
  fonts: [], // url string of google fonts, example: ['https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap']

  inputs: {},

  inputWrapper: {},

  inputLabel: {},

  input: {
    border: '1px solid red',
  },

  expiration: {},

  inputError: {},
};

const errors = {
  card_number: '',

  name: '',

  cvv: '',

  expiration_month: '',

  expiration_year: ''
};

const onSuccess = (data) => {
  console.log('success');
};

const onFail = () => {
  console.log('fail');
};

const onValidationFail = (errors) => {
  console.log('validation fail ? ', errors);
};

const onFormStatusUpdate = (status) => {
  console.log('form status update');
};

const toolkitParams = {
  onSuccess,

  onFail,

  onValidationFail,

  onFormStatusUpdate,

  styles,

  errors,

  env: 'development',
};

Usage of useToolkit:

submit function can get one param, should be an object. expected: 'access_key', 'payment_method_type'.

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