Halliday Payments SDK Widget Documentation

type Address = string;

type TypedData = string;

interface TransactionRequest {
  to: string;
  from?: string;
  nonce?: number;
  gasLimit?: string | number | bigint;
  gasPrice?: string | number | bigint;
  maxPriorityFeePerGas?: string | number | bigint;
  maxFeePerGas?: string | number | bigint;
  data?: string;
  value?: string | number | bigint;
  chainId: number;
}

interface TransactionReceipt {
  transactionHash?: string;
  blockHash?: string;
  blockNumber?: number;
  from?: string;
  to?: string;
  // Preserves the original receipt from ethers or viem
  rawReceipt: any;
}

interface EVMChainConfig {
  chain_id: number;
  network: string;
  native_currency: {
    name: string;
    symbol: string;
    decimals: number;
  };
  rpc: string;
  image: string;
  is_testnet: boolean;
  explorer: string;
}

type WindowType = "MODAL" | "EMBED" | "POPUP";

interface CustomStyles {
  primaryColor?: string;
  backgroundColor?: string;
  /**
   * In popup mode, the border only shows when the window is resized and made larger.
   * If you would like there to be no border at all, you can set it to the same color as backgroundColor.
   */
  borderColor?: string;
  textColor?: string;
  textSecondaryColor?: string;
  accentColor?: string;
  componentShadow?: string;
  borderStyle?: "SQUARE" | "DEFAULT";
  textMode?: "DEFAULT" | "ALL_UPPERCASE";
  paymentCategoryGrouping?: "ATTACHED" | "BUTTON";
  fontWeight?: "AUTO" | "MEDIUM";
}


type Asset = string; // Format: "chainId:tokenAddress" or native token identifier or fiat symbol

// i.e. 'moonpay'
type RampName = string; // Onramp/offramp provider names

type OrderStatus = any;

type StatusCallback = (status: OrderStatus) => void;

interface OwnerRole {
  address: Address;
}

interface PaymentsWidgetSDKParams {
  apiKey: string;
  ownerAddress?: Address;
  destinationAddress?: Address;
  inputs?: Asset[];
  outputs?: Asset[];
  onramps?: RampName[];
  offramps?: RampName[];
  customStyles?: CustomStyles;

  // windowType = "EMBED", targetElementId is required
  targetElementId?: string;
  windowType?: WindowType;
  owner?: OwnerRole;
  funder?: FunderRole;
  statusCallback?: StatusCallback;

  // Skeleton options (EMBED only)
  showSkeleton?: boolean;
  skeletonBackgroundColor?: string;
}

import { useDynamicContext, useIsLoggedIn } from '@dynamic-labs/sdk-react-core'
import { useAccount, useWalletClient } from 'wagmi'
import { openHallidayPayments } from '@halliday-sdk/payments'
import { connectWalletClient } from '@halliday-sdk/payments/viem'

const HALLIDAY_PUBLIC_API_KEY = import.meta.env.VITE_HALLIDAY_API_KEY

function App() {
  const { sdkHasLoaded, setShowAuthFlow, handleLogOut } = useDynamicContext();
  const isLoggedIn = useIsLoggedIn();
  const { address, isConnected } = useAccount();
  const { data: walletClient, isSuccess } = useWalletClient();

  const launchHalliday = async () => {
    if (!isConnected || !address) return;

    let connectedWalletClient;
    if (walletClient && isSuccess) {
      // Remember to add Base in the Dynamic dashboard beforehand (see README)
      connectedWalletClient = connectWalletClient(() => walletClient);
    } else {
      // Using window.ethereum EIP-1193 wallet like MetaMask via Dynamic
      connectedWalletClient = window.ethereum;
    }

    openHallidayPayments({
      apiKey: HALLIDAY_PUBLIC_API_KEY,
      outputs: ['base:0x', 'base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'],
      windowType: 'MODAL',
      owner: { address, ...connectedWalletClient },
      funder: { address, ...connectedWalletClient }
    }).catch(e => console.error('Halliday error:', e.issues));
  };

  if (!sdkHasLoaded) {
    return <p>Loading...</p>
  }

  if (!isLoggedIn) {
    return (
      <button onClick={() => setShowAuthFlow(true)}>
        Sign in
      </button>
    )
  }

  return (
    <div>
      <button onClick={handleLogOut}>Log out</button>
      <p>Wallet: {address}</p>
      <button onClick={launchHalliday}>Open Halliday</button>
    </div>
  );
}

export default App

import { openHallidayPayments } from '@halliday-sdk/payments'
import { usePrivy, useWallets } from '@privy-io/react-auth'
import { connectSigner } from '@halliday-sdk/payments/ethers'
import { BrowserProvider } from 'ethers'

function Component() {
  const { ready, authenticated, login, logout } = usePrivy()
  const { wallets } = useWallets()

  const connect = async () => {
    // Get the embedded wallet (or find the one you want)
    // const wallet = wallets.find(w => w.walletClientType === 'privy');
    const wallet = wallets[0];
    const provider = await wallet.getEthereumProvider()

    const connectedSigner = connectSigner(() => {
      return new BrowserProvider(provider).getSigner()
    });

    openHallidayPayments({
      apiKey: HALLIDAY_PUBLIC_API_KEY,
      outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"],
      owner: { address: wallet.address, ...connectedSigner },
      funder: { address: wallet.address, ...connectedSigner }
    }).catch((error) => {
      console.log('error.issues', error.issues)
    });
  };

  // ...

  return (<div>...</div>);
}

export default Component