Herald Exchange Onramp-Offramp SDK Widget is a simple component for React applications.
npm install herald-exchange-sdkHerald Exchange Onramp-Offramp SDK Widget is a simple component for React applications.
You can install Herald Exchange Onramp-Offramp SDK Widget via npm:
``bash`
npm install herald-exchange-sdkor
yarn add herald-exchange-sdk
To use widget in your React application, follow these steps:
`tsx`
import WidgetComponent from "herald-exchange-sdk";
Initialize the widget:
> To Generate API Key Please Visit : Herald Exchange.
> Supported Token Types : ["USDT", "USDC", "ETH", "BNB", "MATIC", "SOL", "TRX"]
`tsx`
clientReferenceID={YOUR_CLIENT_REFERENCE_ID}
redirectUrl={REDIRECT_URL}
buyParameters={{ from_amount: "25", token_type: "USDC" }}
sellParameters={{
from_amount: "25",
from_currency: "USDT",
to_currency: "USD",
}}
defaultTab="sell"
mode="development"
/>
---
> Note:
>
> - In development mode, the widget operates on testnet and runs in a sandbox environment.
> - Transactions are simulated based on the fromAmount value:
> - 100 → Success
> - 200 → Failure
> - Any other value → Initiated
> - In development mode, when you'll be manually entering a transaction hash, ensure the hash is valid, and that the amount and currency match the transaction. If they don’t, the simulation will fail.
> - In production mode, the widget uses mainnet to process real transactions.
> - ⚠️ Ensure your application is deployed in a production environment when going live to enable accurate transaction tracking and wallet interactions.
- Type: string
- Description: A unique API key generated via the Herald Exchange App.
- This key is used to authenticate and authorize the widget.
- Example: 4bb06e2fdbfb8e392a0ab49e4d9819ae072dcef82d79af7893625a5ff1416f
---
- Type: string
- Allowed Values: "development" | "production"
- Default: "development"
- Description: Specifies the environment in which the widget runs.
- "development" is used for testing and debugging purposes.
- "production" should be used in live environments for optimized performance.
---
- Type: string
- Description: A unique identifier (UUID) generated via the Herald Exchange App, used to associate a transaction with a specific user or session.
- Helps track user activity and transaction flow.
- Example: 34edd6d6-eb12-422f-bd0e-63c5733527
---
- Type: string
- Description: The URL to which the user will be redirected after completing the transaction.
- A callback will be made to this URL along with the transaction result or status as query parameters or payload (depending on the integration).
- Example: https://yourapp.com/transaction-complete
---
- Type:
`ts`
{
from_amount: string;
token_type: string;
}
- Description: Defines the default configuration for the buy flow.
- from_amount: A string representing the default amount to be displayed in the input field (e.g., "25").
- token_type: The token that should be selected by default for purchase (e.g., "USDC").
⚠️ If the passed token_type is not active, the widget will automatically fall back to the first activated token.
---
- Type:
`ts``
{
from_amount: string;
from_currency: string;
to_currency: string;
}
- Description: Defines the default configuration for the sell flow.
- from_amount: A string representing the default amount to sell (e.g., "25").
- from_currency: The token the user wants to sell (e.g., "USDT").
- to_currency: The currency the user wants to receive (e.g., "USD").
⚠️ If the selected currencies are not available or not active, the widget will default to the first available currency pair.
---
- Type: "buy" | "sell"
- Description: Sets the default selected tab when the widget loads.
- Use "buy" to default to the buy flow.
- Use "sell" to default to the sell flow.
- Example: "sell"
---
This project is licensed under the MIT License - see the LICENSE file for details.