# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skrape-docs.gitbook.io/skrape/libraries-and-sdk/react-js-library.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.