Halliday Payments SDK Widget Documentation

type Address = string;

type TypedData = string;

interface TransactionRequest {
  to: string;
  from?: string;
  nonce?: number;
  gasLimit?: bigint;
  gasPrice?: bigint;
  maxPriorityFeePerGas?: bigint;
  maxFeePerGas?: bigint;
  data?: string;
  value?: 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 CustomStyles {
  primaryColor?: string;
  backgroundColor?: string;
  borderColor?: string;
  textColor?: string;
  textSecondaryColor?: string;
  accentColor?: string;
  componentShadow?: string;
  borderStyle?: "SQUARE" | "DEFAULT";
  backgroundStyle?: "OFF" | "BLUR";
  successColor?: string;
  alertColor?: string;
}

type FontName = "haffer" | "wudoo-mono"| "inter";

type HeaderTitle = string;

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 = (input: { type: string; payload: OrderStatus }) => void;

interface UserWalletRole {
  address: Address;
  signMessage?: SignMessage;
  sendTransaction?: SendTransaction;
  signTypedData?: SignTypedData
  connect?: () => void;
}

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

  targetElementId?: string;
  userWallet?: UserWalletRole;
  statusCallback?: StatusCallback;
  fontName?: FontName;
  headerTitle?: HeaderTitle;
}

// Full user wallet object
openHallidayPayments({
    // ...
    userWallet: {
        address: "0x...",
        signMessage: async ({ message }) => "...",      // optional
        sendTransaction: async (tx, chain) => receipt,  // optional
        signTypedData: async ({ typedData }) => "...",  // optional
        connect: () => { /* trigger wallet connect */ }, // optional
    }
    // ...
  });

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'],
      userWallet: { address, ...connectedWalletClient }
    });
  };

  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"],
      userWallet: { address: wallet.address, ...connectedSigner }
    });
  };

  // ...

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

export default Component