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. 'stripe'
type RampName = string; // Onramp/offramp provider names

type OnStatus = (input: { type: string; payload: any }) => void;
type OnConnectUserWallet = () => void;
type OnReady = () => void;
type OnError = (error: Error) => void;

type SignMessage = (input: { message: string; ownerAddress?: Address }) => Promise<string>;
type SignTypedData = (input: { typedData: string; ownerAddress?: Address }) => Promise<string>;
type SendTransaction = (
    transaction: TransactionRequest,
    chainConfig: EVMChainConfig,
) => Promise<TransactionReceipt>;

interface Funder {
  getAddress: () => Promise<Address>;
  sendTransaction: SendTransaction;
}

interface UserWallet {
  getAddress: () => Promise<Address>;
  signMessage: SignMessage;
  signTypedData: SignTypedData;
  sendTransaction?: SendTransaction;
}

interface PaymentsWidgetSDKParams {
  apiKey: string;
  outputs: Asset[];
  sandbox?: boolean;
  destinationAddress: Address;
  customStyles?: CustomStyles;
  targetElementId?: string;
  fontName?: FontName;
  headerTitle?: HeaderTitle;
  userWallet?: UserWallet;

  onStatus?: OnStatus;
  onConnectUserWallet?: () => void;
  onReady?: () => void;
  onError?: (error: Error) => void;
}

openHallidayPayments({
    // ...
    userWallet: {
        getAddress: async () => "0x...",                // required, async
        signMessage: async ({ message }) => "...",      // required
        signTypedData: async ({ typedData }) => "...",  // required
        sendTransaction: async (tx, chain) => TransactionReceipt,
    },
    onConnectUserWallet: () => { /* trigger wallet connect */ },
    // ...
});

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 || !isSuccess || !walletClient) return;

    // Remember to add Base in the Dynamic dashboard beforehand
    const userWallet = connectWalletClient(() => walletClient);

    openHallidayPayments({
      apiKey: HALLIDAY_PUBLIC_API_KEY,
      outputs: ['base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'],
      destinationAddress: address,
      userWallet,
    });
  };

  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];
    if (!wallet) return;

    const provider = await wallet.getEthereumProvider();

    const userWallet = connectSigner(() =>
      new BrowserProvider(provider).getSigner(),
    );

    openHallidayPayments({
      apiKey: HALLIDAY_PUBLIC_API_KEY,
      outputs: ["base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"],
      destinationAddress: wallet.address,
      userWallet,
    });
  };

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

export default Component