@daimo/pay/build/components/DaimoPayButton/index.d.ts

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { ReactElement } from "react";
import { DaimoPayOrderView, DaimoPayUserMetadata, ExternalPaymentOptionsString, PaymentBouncedEvent, PaymentCompletedEvent, PaymentStartedEvent } from "@daimo/pay-common";
import { Address, Hex } from "viem";
import { CustomTheme, Mode, Theme } from "../../types";
/** Payment details and status. */
export type DaimoPayment = DaimoPayOrderView;
/** Props for DaimoPayButton. */
export type PayButtonPaymentProps = {
    /**
     * Your public app ID. Specify either (payId) or (appId + parameters).
     */
    appId: string;
    /**
     * Destination chain ID.
     */
    toChain: number;
    /**
     * The destination token to send, completing payment. Must be an ERC-20
     * token or the zero address, indicating the native token / ETH.
     */
    toToken: Address;
    /**
     * The amount of destination token to send (transfer or approve).
     * If not provided, the user will be prompted to enter an amount.
     */
    toUnits?: string;
    /**
     * The destination address to transfer to, or contract to call.
     */
    toAddress: Address;
    /**
     * Optional calldata to call an arbitrary function on `toAddress`.
     */
    toCallData?: Hex;
    /**
     * The intent verb, such as "Pay", "Deposit", or "Purchase".
     */
    intent?: string;
    /**
     * Payment options. By default, all are enabled.
     */
    paymentOptions?: ExternalPaymentOptionsString[];
    /**
     * Preferred chain IDs. Assets on these chains will appear first.
     */
    preferredChains?: number[];
    /**
     * Preferred tokens. These appear first in the token list.
     */
    preferredTokens?: {
        chain: number;
        address: Address;
    }[];
    /**
     * Only allow payments on these EVM chains.
     */
    evmChains?: number[];
    /**
     * External ID. E.g. a correlation ID.
     */
    externalId?: string;
    /**
     * Developer metadata. E.g. correlation ID.
     * */
    metadata?: DaimoPayUserMetadata;
    /**
     * The address to refund to if the payment bounces.
     */
    refundAddress?: Address;
} | {
    /** The payment ID, generated via the Daimo Pay API. Replaces params above. */
    payId: string;
    /** Payment options. By default, all are enabled. */
    paymentOptions?: ExternalPaymentOptionsString[];
};
type PayButtonCommonProps = PayButtonPaymentProps & {
    /** Called when user sends payment and transaction is seen on chain */
    onPaymentStarted?: (event: PaymentStartedEvent) => void;
    /** Called when destination transfer or call completes successfully */
    onPaymentCompleted?: (event: PaymentCompletedEvent) => void;
    /** Called when destination call reverts and funds are refunded */
    onPaymentBounced?: (event: PaymentBouncedEvent) => void;
    /** Called when the modal is opened. */
    onOpen?: () => void;
    /** Called when the modal is closed. */
    onClose?: () => void;
    /** Open the modal by default. */
    defaultOpen?: boolean;
    /** Automatically close the modal after a successful payment. */
    closeOnSuccess?: boolean;
    /** Reset the payment after a successful payment. */
    resetOnSuccess?: boolean;
    /** Go directly to tokens in already-connected Ethereum and Solana wallet(s).
     * Don't let the user pick any other payment method. Used in embedded flows.*/
    connectedWalletOnly?: boolean;
    /** Custom message to display on confirmation page. */
    confirmationMessage?: string;
    /** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */
    redirectReturnUrl?: string;
};
export type DaimoPayButtonProps = PayButtonCommonProps & {
    /** Light mode, dark mode, or auto. */
    mode?: Mode;
    /** Named theme. See docs for options. */
    theme?: Theme;
    /** Custom theme. See docs for options. */
    customTheme?: CustomTheme;
    /** Disable interaction. */
    disabled?: boolean;
};
export type DaimoPayButtonCustomProps = PayButtonCommonProps & {
    /** Custom renderer */
    children: (renderProps: {
        show: () => void;
        hide: () => void;
    }) => ReactElement;
};
/**
 * A button that shows the Daimo Pay checkout. Replaces the traditional
 * Connect Wallet » approve » execute sequence with a single action.
 */
export declare function DaimoPayButton(props: DaimoPayButtonProps): JSX.Element;
export declare namespace DaimoPayButton {
    var Custom: typeof DaimoPayButtonCustom;
}
/** Like DaimoPayButton, but with custom styling. */
declare function DaimoPayButtonCustom(props: DaimoPayButtonCustomProps): JSX.Element;
declare namespace DaimoPayButtonCustom {
    var displayName: string;
}
export declare function DaimoPayButtonInner(): import("react/jsx-runtime").JSX.Element;
export {};