Scribepay-sdk NPM

scribepay-sdk

ScribePay SDK to interact with contracts for payments

ScribePay SDK

The ScribePay SDK is a library designed to streamline payment integration in projects or business. It provides on click solution for user to pay businesses in crypto.

Features

Native Payments: Easily send native cryptocurrency payments to a specified business address
ERC-20 Payments: Transfer ERC-20 tokens seamlessly
Dynamic Provider Support: Supports browser providers like MetaMask and custom provider URLs
Business Validation: Validates the business using an API key before enabling transactions

Installation

Install the SDK using npm:

npm install scribepay-sdk

Usage

Import the SDK

import {
  Payment,
  usePay,
  usePayErc20,
  ProviderConfig,
  useInitializeSDK,
} from "scribepay-sdk";

Initialization

You must initialize the SDK with your provider configuration before making any calls:

import { useInitializeSDK } from "scribepay-sdk";
 const providerConfig: ProviderConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    provider: provider, // Change 'ethereum' to the actual provider if necessary
  };
  const { businessData } = useInitializeSDK(providerConfig);
  console.log(businessData, 'get business details')

Making Payments

Native Cryptocurrency Payment

import { usePay } from 'scribepay-sdk';

   const { payNativeToken, currencyResData } =    usePay({
     amount: "amount to Pay",
     expectedDelivery: 'uniax timestamp,
     fromCurrency: "currency to pay",
     token: { value: 'native token address',   label: "native token address" },
   });
 // currencyResData use to get the exchange of currency details

ERC-20 Token Payment

import { usePayErc20 } from 'scribepay-sdk';

    const {  payERC20Token ,currencyResData} = usePayErc20({
     amount: "amount to Pay",
     expectedDelivery: 'uniax timestamp,
     fromCurrency: "currency to pay",
     token: { value: 'erc20 token address',   label: "erc20 token address" },
   });
   // currencyResData use to get the exchange of currency details

Example Frontend Integration

import { ethers } from "ethers";
import {
  Payment,
  usePay,
  usePayErc20,
  ProviderConfig,
  useInitializeSDK,
} from "scribepay-sdk/src";
import { useEffect, useState } from "react";

const Transactions = () => {
  const [provider, setProvider] = useState<ethers.BrowserProvider | undefined>(
    undefined
  );
  const currentTime = Math.floor(Date.now() / 1000);
  const timePlus3Minutes = currentTime + 3 * 60;
  useEffect(() => {
    const { ethereum } = window;
    if (ethereum) {
      const newProvider = new ethers.BrowserProvider(ethereum);
      setProvider(newProvider);
    }
  }, []);
  const providerConfig: ProviderConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
    provider: provider, // Change 'ethereum' to the actual provider if necessary
  };
  const { businessData: bss } = useInitializeSDK(providerConfig);
  
  const handlePaymentSuccess = () => {
    console.log("Payment was successful!");
    // Perform any additional actions, such as navigation or showing a success message
  };

  const { payNativeToken, currencyResData } = usePay({
    amount: "amount to pay",
    expectedDelivery: "uniax timestamp",
    fromCurrency: "currency to pay",
    token: { value: "native token address", label: "native token label" },
  });

  const { payERC20Token } = usePayErc20({
    amount: "amount to pay",
    expectedDelivery: "uniax timestamp",
    fromCurrency: "currency to pay",
    token: { value: "erc20 token address", label: "erc20 token label" },
  });
  return (
    <div>
      <Payment
        amount="0.01"
        expectedDelivery={timePlus3Minutes}
        theme="dark"
        fromCurrency="PKR",
        onSuccess={handlePaymentSuccess}
      />
      <button onClick={payERC20Token} className="text-white">
        Pay ERC20
      </button>
      <button onClick={payNativeToken} className="text-white">
        Pay Native
      </button>
    </div>
  );
};

export default Transactions;

API Documentation

`initialize(providerConfig)`

Initializes the SDK with the given provider configuration.

Parameters:

providerConfig (object): Contains apiKey, providerUrlConfig, and/or provider

`usePay`

Makes a native cryptocurrency payment.

Parameters:

amount (string): The amount to be sent in ETH
expectedDelivery (number): The expectedDelivery tiem in uniax timestamp
fromCurrency (string): The currency being used for the payment.
token (object:{value:string, label: string}): The native token address and label fro payement

`usePayErc20`

Transfers ERC-20 tokens.

Parameters:

amount (string): The amount to be sent in ETH
expectedDelivery (number): The expectedDelivery tiem in uniax timestamp
fromCurrency (string): The currency being used for the payment.
token (object:{value:string, label: string}): The erc20 token address and label fro payement