use-toolkit-test-new
v1.0.11
Published
React custom hook - generating card token
Downloads
3
Readme
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 )
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, should be an object.
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 />;