React JS Library

skrape-react-v1

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

Installation

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.

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.

const config = {
    api_key: "skr_live_**********************",
    token_name: "USDT",
    tx_ref: '34mx23xe2xe2x2e2',
    amount: 100,
    customer: {
      first_name: 'Sam',
      last_name: 'Owolabi',
      email: '[e-mail]'
    },
    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.

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

const config = {
    api_key: "skr_live_**********************",
    token_name: "USDT",
    tx_ref: '34mx23xe2xe2x2e2',
    amount: 100,
    customer: {
      first_name: 'Sam',
      last_name: 'Owolabi',
      email: '[e-mail]'
    },
    customization: {
      title: "My NFT Store",
      description: "Items sold"
    },
  }

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.

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

Parameters

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

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 [e-mail]