Herald Exchange Onramp-Offramp SDK Widget npm install herald-exchange-onramp_offramp-widget
or
yarn add herald-exchange-onramp_offramp-widget

You can install Herald Exchange Onramp-Offramp SDK Widget via npm

Usage

To use widget in your React application, follow these steps:

To Generate API Key Please Visit Herald Exchange .

Supported Token Types : ["USDT", "USDC", "ETH", "BNB", "POL", "SOL", "TRX"]

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.

Props

apiKey string required
  • A unique API key generated via the Herald Exchange App
  • This key is used to authenticate and authorize the widget.
  • Example: 4bb06e2fdbfb8e392a0ab49e4d9819ae072dcef82d79af7893625a5ff1416f
mode string Optional
  • 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.
clientReferenceID string required
redirectUrl string required
  • 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
redirectUrl string required
  • 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
buyParameters string required
  • 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.
sellParameters string required
  • 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.
defaultTab string optional
  • Type: "buy" | "sell"
  • 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.
Previous
Offramp SDK
Next
Glide SDK