> For the complete documentation index, see [llms.txt](https://skrape-docs.gitbook.io/skrape/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skrape-docs.gitbook.io/skrape/libraries-and-sdk/react-js-library.md).

# React JS Library

A React library for integrating Skrape payments into your web application.

### Installation

```shell
npm i skrape-react-v1
```

### Integration

There are two methods of integration available:

1. As a component
2. Into your code directly as hooks

### Usage

To use the library, import the `SkrapeButton` component or the `useSkrapePayment` hook from the package.

```shell
import { SkrapeButton, useSkrapePayment, closeSkrapePaymentModal } from 'skrape-react-v1';
```

### As a Component

To use the SkrapeButton component, simply import it and pass in the required configuration object.

```javascript
const config = {
    api_key: "skr_live_**********************",
    token_name: "USDT",
    tx_ref: '34mx23xe2xe2x2e2',
    amount: 100,
    customer: {
      first_name: 'Sam',
      last_name: 'Owolabi',
      email: 'owolabisamuel150@gmail.com'
    },
    customization: {
      title: "My NFT Store",
      description: "Items sold"
    },
  }

```

Then, create a new configuration object by spreading the config object and adding some more options, such as the text that appears on the button, the button size, callback url and function, and onClose function.

```javascript
const skrapeConfig = {
    ...config,
    text: 'Pay with Skrape',
    btnSize: 'medium', // small, medium, large
    callback_url: 'https://google.com',
    callback: (response) => {
      console.log(response);
      closeSkrapePaymentModal();
    },
    onClose: function () {
      alert('Transaction was not completed, window closed.');
    }
  }
  
  return (
  <>
    <SkrapeButton {...skrapeConfig} />
  </>
  )

```

### As a hook

```javascript
const config = {
    api_key: "skr_live_**********************",
    token_name: "USDT",
    tx_ref: '34mx23xe2xe2x2e2',
    amount: 100,
    customer: {
      first_name: 'Sam',
      last_name: 'Owolabi',
      email: 'owolabisamuel150@gmail.com'
    },
    customization: {
      title: "My NFT Store",
      description: "Items sold"
    },
  }
```

```javascript
const skrapeConfig = {
    ...config,
    callback_url: 'https://google.com',
    callback: (response) => {
      console.log(response);
      closeSkrapePaymentModal();
    },
    onClose: function () {
      alert('Transaction was not completed, window closed.');
    }
  }
```

Finally, call the `useSkrapePayment` hook with the configuration object, and assign the returned value to a variable. This variable can then be used as the event handler for a button or other interactive element to trigger the Skrape payment modal.

```javascript
  const handleSkrapePayment = useSkrapePayment(skrapeConfig);
  
  return (
  <>
    <button onClick={handleSkrapePayment}></button>
  </>
  )

```

###

### Parameters

<table><thead><tr><th width="191">Key</th><th width="103">Type</th><th width="111">Required</th><th>Description</th></tr></thead><tbody><tr><td>api_key</td><td>string</td><td>Yes</td><td>API key provided by Skrape to identify the merchant.</td></tr><tr><td>token_name</td><td>string</td><td>Yes</td><td>The name of the token or currency to be used for the transaction.</td></tr><tr><td>network_name</td><td>string</td><td>Yes</td><td>The blockchain network on which the transaction will be made, "testnet" or "mainnet"</td></tr><tr><td>tx_ref</td><td>string</td><td>No</td><td>A unique reference number for the transaction.</td></tr><tr><td>amount</td><td>string</td><td>Yes</td><td>Amount to be paid</td></tr><tr><td>customer</td><td>object</td><td>Yes</td><td>Holds the customer firstname, last name, email</td></tr><tr><td>customer.email</td><td>string</td><td>Yes</td><td>The email of the customer.</td></tr><tr><td>customer</td><td>object</td><td>Yes</td><td>It holds the customer email, first name, last name</td></tr><tr><td>customer.first_name</td><td>string</td><td>No</td><td>The first name of the customer.</td></tr><tr><td>customer.last_name</td><td>string</td><td>No</td><td>The last name of the customer.</td></tr><tr><td>customization</td><td>object</td><td>Yes</td><td>It holds the transaction title, description</td></tr><tr><td>customization.title</td><td>string</td><td>Yes</td><td>Customization title</td></tr><tr><td>customization.description</td><td>string</td><td>No</td><td>Customization description</td></tr><tr><td>callback_url</td><td>string</td><td>No</td><td>Callback url where the result will be posted after the payment is completed successfully</td></tr><tr><td>callback</td><td>function</td><td>No</td><td>Callback function that will be called after the payment is completed successfully with response object</td></tr><tr><td>onClose</td><td>function</td><td>No</td><td>Callback function that will be called when the transaction was not completed, window closed.</td></tr></tbody></table>

### Configuration

The `config` object passed to the component or hook must contain the following properties:

* `api_key`: Your Skrape API key.
* `token_name`: The token you wish to use for the transaction (e.g. "USDT").
* `tx_ref`: A unique reference for the transaction.
* `amount`: The amount to be charged.
* `customer`: An object containing the customer's first and last name, and email.
* `customization`: An object containing the title and description of the payment modal.

Additionally, you can pass the following properties to the hook:

* `text`: The text to be displayed on the button
* `btnSize`: The size of the button to be displayed
* `callback_url`: The callback URL to which the response will be sent
* `callback`: A callback function to handle the response
* `onClose`: A callback function to handle when the modal is closed

### Note

Make sure you have an account with Skrape and have created an API Key. Also, when testing, it is recommended to use test API Key.

### Support

If you have any issues or questions, please reach out to <support@skrape.io>