dsadada
v1.1.2
Published
React custom hook - generating card token
Downloads
1
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 element, that the iframe will be rendered into.
useToolkit is the custom hook which enables to get a card token by filling card details.
Information
useToolkit can accept the following parameters:
callback functions ->
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 being changed
styles - a custom object which can be injected to control the styles. can be an object or a function which will be triggered when there is a change in the element style. the function being executed with the following params: name (the name of the field) touched (if the field was being touched) error (the error of the current field, empty string if valid)
validation - a custom object which can be injected to control the validation of the fields. every field can get a custom validation passed from outside, except the 'card_number' field which uses luhn algorithm to validate the card number.
the object includes key value pairs -> key is the field name, value is an object with the following shape: { empty: 'empty error message', validate: [ { regex: /^.{3,5}$/, errorMessage: 'not 3-5 chars' }, { regex: /^.{10,12}$/, errorMessage: 'not 10-12 chars' } ] }
formatting - a custom array which represents the name of the fields that should be formatted. supported fields with formatting are: 'card_number', 'cvv'.
env - a string, one of : 'development', 'qa', 'sandbox', 'production', 'intg' (every env has also support for passing passive)
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: (obj) => {
const { name, touched, error } = obj;
if (touched) return {
border: '1px solid yellow'
}
if (error) return {
border: '1px solid red'
}
return {
border: '1px solid green'
}
},
inputWrapper: {},
inputLabel: {},
input: {
border: '1px solid red',
},
expiration: {},
inputError: {},
};
const validations = {
name: {
{
empty: 'empty error message',
validate: [
{ regex: /^.{3,5}$/, errorMessage: 'not 3-5 chars' },
{ regex: /^.{10,12}$/, errorMessage: 'not 10-12 chars' }
]
}
}
};
const formatting = ['card_number', 'cvv'];
const onSuccess = (data) => {
console.log('success ? ', data);
};
const onFail = (error) => {
console.log('fail ? ', error);
};
const onValidationFail = (errors) => {
console.log('validation fail ? ', errors);
};
const onFormStatusUpdate = (status) => {
console.log('form status update ? ', status);
};
const toolkitParams = {
onSuccess,
onFail,
onValidationFail,
onFormStatusUpdate,
styles,
validations,
formatting,
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 />;