# SDK

Github repo for Demo Application: [ScribePay Demo](https://github.com/syedMohib44/scribepay-demo)

<figure><img src="https://2183554551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOThdde3kgElPId9LRohq%2Fuploads%2F7sYI9XuzxZ6rs80Pikym%2Fimage.png?alt=media&#x26;token=d00d6cbd-3dfa-4dca-afad-2ed0acb7eb90" alt="" width="563"><figcaption></figcaption></figure>

## **Installation**

Install the Scribe SDK package using npm:

```
npm install scribepay-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:

<pre class="language-html"><code class="lang-html"><strong>import { useInitializeSDK } from "scribepay-sdk";
</strong> const providerConfig: ProviderConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    provider: provider, // Change 'ethereum' to the actual provider if necessary
  };
  const { businessData } = useInitializeSDK(providerConfig);
</code></pre>

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

* **Native Cryptocurrency Payment**

```html
import { usePay } from 'scribepay-sdk';

const { payNativeToken, currencyResData } = usePay({
     amount: "amount to Pay",
     expectedDelivery: 'unix 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: 'unix 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:

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

const Transactions = () => {
  const [provider, setProvider] = useState&#x3C;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: "unix timestamp",
    fromCurrency: "currency to pay",
    token: { value: "native token address", label: "native token label" },
  });

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

export default Transactions;
</code></pre>

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