SDK

The Scribe Pay simplifies integration of payment functionalities into your application. This guide walks you through installation, initialization, and usage.

Github repo for Demo Application: ScribePay Demo

Installation

Install the Scribe SDK package using npm:

npm install scribe-sdk

Usage

Step 1: Import the Payment Component

Import the Payment component from the SDK:

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

Step 2: Initialize the Provider

Use ethers.js to create a provider. Here's an example of setting it up in a React component:

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

Step 3: Use the Payment Component Embed the Payment component into your application with the required props:

• 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" },
   });

• 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" },
   });

Types

Payment Props

Below are the types for the Payment component:

interface PaymentProps {
  amount: string; // Amount to be paid
  expectedDelivery: number; // Delivery time in Unix timestamp
  providerConfig: ProviderConfig; // Configuration for the provider
  theme: "light" | "dark"; // UI theme
}

Provider Configuration

Define the provider settings with the following type:

export type ProviderConfig = {
  apiKey: string; // API key for authentication
  providerUrlConfig?: ProviderURLConfig; // Optional provider URL configuration
  provider?: JsonRpcProvider | BrowserProvider | WebSocketProvider; // Provider instance
  chainId?: number; // Optional chain ID for specifying networks
};

Customization

Theme

The theme prop allows you to switch between light and dark modes to match your application's design.

Example Code

Here is a complete example:

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;

Troubleshooting

• Missing Provider: Ensure the user's browser supports Ethereum (window.ethereum) and that a wallet like MetaMask is installed.

• Invalid API Key: Verify that the apiKey provided in providerConfig is correct.

• Incorrect Unix Timestamp: Check the format of the expectedDelivery prop to ensure it's a valid Unix timestamp.

FAQs

1. What is the providerConfig used for? It configures the SDK to communicate with the blockchain network, including API keys and provider details.

2. Can I use custom themes? Currently, only light and dark themes are supported.

3. How do I get the expectedDelivery timestamp? Use a timestamp generator or the Date object in JavaScript:

const timestamp = Math.floor(new Date().getTime() / 1000);

This structured documentation ensures clarity and ease of use for developers integrating the Scribe SDK.