The Checkout Widget supports multiple funding sources including wallet transfers and exchange deposits, with built-in cross-chain routing and DeFi token swapping capabilities.

Try the Demo

Try out the checkout flow

Integration Guide

Add to your app
Key features include:
  • Multiple funding sources: Connect wallets (MetaMask, Rabby) or exchanges (Binance)
  • Cross-chain deposits: Automatic routing between different blockchain networks
  • Real-time quotes: Live pricing and gas estimates
  • Customizable theming: Full control over appearance and branding
  • Transaction tracking: Real-time status updates with block explorer links
Route Widget Flow

​
How it Works

The widget provides multiple deposit flows depending on the user’s preferred funding source:
  1. Wallet Flow: Connect existing wallets and transfer tokens directly
  2. Exchange Flow: Link exchange accounts (Binance) for seamless withdrawals
  3. Card Deposits: Traditional payment methods (coming soon)

​
Integrate

1

Install the package

Install the widget:
npm i @ensofinance/checkout-widget
2

API key

You can get an API key from the Developer Portal.
3

Basic implementation

Import and configure the widget.To enable Binance deposits, add the enableExchange configuration.
Domain whitelisting required: Contact Enso support to whitelist your domain(s) before enabling exchange integration.
  import { CheckoutModal } from '@ensofinance/checkout-widget';

  export function MyCheckoutComponentModal() {
    const [isCheckoutActive, setIsCheckoutActive] = useState(false);

    return (
      <CheckoutModal 
        config={{
          apiKey: "YOUR_API_KEY",
          tokenOut: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
          chainIdOut: 8453,
          enableExchange: ["binance"] // Enable Binance integration
        }}
        isActive={isCheckoutActive}
        setIsActive={setIsCheckoutActive}
      />
    );
  }
4

Setup Web3 providers

The widget requires Wagmi and React Query providers. Set up your app’s root component:
import { WagmiProvider, createConfig, http } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { base, mainnet, arbitrum } from 'wagmi/chains';
import { injected, walletConnect } from 'wagmi/connectors';

// Configure supported chains and connectors
const config = createConfig({
  chains: [mainnet, base, arbitrum],
  connectors: [
    injected(), // MetaMask, Rabby, etc.
    walletConnect({
      projectId: 'YOUR_WALLETCONNECT_PROJECT_ID'
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
    [arbitrum.id]: http(),
  },
});

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
        <MyCheckoutComponent />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
5

Theme customization

The widget accepts a complete Chakra UI v3 SystemConfig for theming.
For advanced theming, refer to the Chakra UI theming documentation.
import { CheckoutModal, type WidgetTheme } from '@ensofinance/checkout-widget';
const customTheme: WidgetTheme = {
  theme: {
    semanticTokens: {
      colors: {
        // Background colors
        bg: { value: "#ffffff" },
        "bg.subtle": { value: "#f8fafc" },
        "bg.emphasized": { value: "#f1f5f9" },
        // Foreground/text colors  
        fg: { value: "#0f172a" },
        "fg.muted": { value: "#64748b" },
        "fg.subtle": { value: "#94a3b8" },
        
        // Border colors
        border: { value: "#e2e8f0" },
        "border.emphasized": { value: "#cbd5e1" },
        
        // Primary accent color
        primary: { value: "#3b82f6" },
        "primary.emphasis": { value: "#2563eb" },
        
        // Status colors
        success: { value: "#10b981" },
        warning: { value: "#f59e0b" },
        error: { value: "#ef4444" },
      },
    },
    // Custom button variants
    recipes: {
      button: {
        variants: {
          solid: { 
            bg: "primary", 
            color: "white",
            _hover: { bg: "primary.emphasis" }
          }
        }
      }
    }
  }
};
function App() {
  return (
    <CheckoutModal
      config={{
        apiKey: "YOUR_API_KEY",
        tokenOut: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
        chainIdOut: 8453,
        theme: customTheme
      }}
      isActive={isCheckoutActive}
      setIsActive={setIsCheckoutActive}
    />
  );
}

​
Configuration Props

​
CheckoutConfig Properties

The following checkout config exists:
ParameterTypeDescriptionRequired
apiKeystringYour Enso API keyYes
tokenOutstringDestination token addressYes
chainIdOutnumberDestination chain IDYes
themeWidgetThemeCustom Chakra UI theme configNo
enableExchangeSupportedExchanges[]Enable exchange integrations (["binance"])No

​
CheckoutModalProps

The CheckoutModal expands CheckoutConfig with modal-related properties and callbacks:
ParameterTypeDescriptionRequired
configCheckoutConfigWidget configuration objectYes
isActivebooleanControls modal visibilityYes
setIsActive(active: boolean) => voidModal state setterYes
onClose() => voidClose callback functionNo

​
Supported Networks

The widget supports deposits across all networks:
  • Ethereum (Chain ID: 1)
  • Base (Chain ID: 8453)
  • Arbitrum (Chain ID: 42161)
  • Optimism (Chain ID: 10)
  • Polygon (Chain ID: 137)
  • Avalanche (Chain ID: 43114)
  • BSC (Chain ID: 56)
  • And many more

​
Learn more

Updated