# dsadada

> React custom hook - generating card token

Latest version **1.1.2** (published 2021-06-14) · unlicensed license · 0 weekly downloads

## Install

```sh
npm install dsadada
pnpm add dsadada
yarn add dsadada
bun add dsadada
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-06-14 |
| First published | 2021-06-14 |
| Weekly downloads | 0 |
| License | unlicensed |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rapyd R&D |
| Maintainers | nivbd |
| Keywords | cp |

## Links

- npm: https://www.npmjs.com/package/dsadada
- npm.io page: https://npm.io/package/dsadada

## Recent versions

- 1.1.2 (latest) — 2021-06-14
- 1.1.1 — 2021-06-14

## README

## useToolkit

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

## Installation

run npm i @rapyd/use-toolkit

## Usage

```javascript
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:

```javascript
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'.

```javascript
const toolkit = useToolkit(toolkitParams);

const { submit } = toolkit;
```

Usage of ToolkitWrap:

under the hood toolkit wrap will render a div with id = 'rapyd-checkout'.

```javascript
return <ToolkitWrap />;
```

---
_Source: https://npm.io/package/dsadada · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._