The iframe widget requires configuration to define its behavior and appearance. Below are the required and optional settings.

​
Required Configuration

  • apiKey (string): Your Aarc API key for authentication.
  • intent (object): The transaction intent details, such as:
    • token: The token to transact (e.g., 'USDC').
    • amount: The transaction amount (e.g., '100').
    • fromChain: The source blockchain (e.g., 'Ethereum').
    • toChain: The destination blockchain (e.g., 'Polygon').
    • destination: The recipient address or contract (e.g., '0xDeFiContract').

​
Optional Configuration

  • theme (object): Customize the widget’s appearance (e.g., colors, fonts).
  • language (string): Set the widget’s language (default: 'en').
  • onSuccess (function): Callback triggered on successful transaction execution.
  • onError (function): Callback triggered on transaction failure.

​
FKConfig

Configuration object which contains all information about widget. You can learn about sub types in each other their sections.

NameTypeDescription
appNamestringApplication name
apiKeysApiKeysAPI keys for services
appearanceFKAppearance (Optional)Visual customisation options
destinationFKDestinationTransaction destination details
eventsFKEventsEvent callback functions
moduleFKModuleModule configurations
originstring (URL)Origin URL

​
Example

  const config: FKConfig = {
    appName: "Dapp Name",
    module: {
      exchange: {
        enabled: false,
      },
      onRamp: {
        enabled: true,
        onRampConfig: {
          customerId: "123", // replace with any unique id for the user
          exchangeScreenTitle: "Deposit funds in your wallet", // replace with custom copy 
        },
      },
      bridgeAndSwap: {
        enabled: true,
        fetchOnlyDestinationBalance: false,
        routeType: "Value",
        connectors: [SourceConnectorName.ETHEREUM],
      },
    },
    destination: {
      walletAddress: "0xeDa8Dec60B6C2055B61939dDA41E9173Bab372b2",
    },
    appearance: {
      roundness: 42,
      theme: ThemeName.DARK,
    },

    apiKeys: {
      aarcSDK: "YOUR_API_KEY",
    },
    events: {
      onTransactionSuccess: (data: TransactionSuccessData) => {
        console.log("onTransactionSuccess", data);
      },
      onTransactionError: (data: TransactionErrorData) => {
        console.log("onTransactionError", data);
      },
      onWidgetClose: () => {
        console.log("onWidgetClose");
      },
      onWidgetOpen: () => {
        console.log("onWidgetOpen");
      },
    },
    origin: window.location.origin
  };