@coin-voyage/paykit/dist/components/pay-button/index.d.ts

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

import type { ChainId, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderCreationErrorEvent, PayOrderMetadata, PayOrderRefundedEvent } from "@coin-voyage/shared/types";
import type { CustomTheme, Mode, PayModalOptions, Theme } from "../../types";
type DepositPayButtonParams = {
    /**
     * Destination chain ID. The chain to deposit to.
     */
    toChain: ChainId;
    /**
     * The destination token to receive. Specify the contract address of the token (ERC-20/SPL/...)
     * Omitting (undefined) indicates the native token ETH/SOL/TRX/SUI/...
     */
    toToken?: string;
    /**
     * The amount of destination token to receive.
     */
    toAmount: number;
    /**
     * The recipient of the deposit. Is an address on the `toChain`
     */
    toAddress: string;
    /**
     * Metadata to attach to the deposit.
     */
    metadata?: PayOrderMetadata;
};
type PayButtonPaymentProps = DepositPayButtonParams | {
    /** The payOrder ID, generated via the Coin Voyage API. Replaces params above. */
    payId: string;
};
type PayButtonCommonProps = PayButtonPaymentProps & {
    /**
     * The intent verb, such as "Pay", "Deposit", or "Purchase".
     */
    intent?: string;
    /** Called when invalid properties are used in order to create a deposit payOrder */
    onPaymentCreationError?: (event: PayOrderCreationErrorEvent) => void;
    /** Called when user sends payment and transaction is seen on chain */
    onPaymentStarted?: (event: PayOrderConfirmingEvent) => void;
    /** Called when destination transfer or call completes successfully */
    onPaymentCompleted?: (event: PayOrderCompletedEvent) => void;
    /** Called when destination call reverts and funds are refunded */
    onPaymentBounced?: (event: PayOrderRefundedEvent) => void;
    /** Called when the modal is opened. */
    onOpen?: () => void;
    /** Called when the modal is closed. */
    onClose?: () => void;
    /** Open the modal by default. */
    defaultOpen?: boolean;
} & PayModalOptions;
type PayButtonProps = PayButtonCommonProps & {
    /** Add custom styles to the payButton. */
    style?: React.CSSProperties;
    /** 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;
};
type PayButtonCustomProps = PayButtonCommonProps & {
    /** Custom renderer */
    children: (renderProps: {
        show: () => void;
        hide: () => void;
    }) => React.ReactNode;
};
export declare function PayButton(props: PayButtonProps): import("react/jsx-runtime").JSX.Element;
export declare namespace PayButton {
    var Custom: typeof PayButtonCustom;
}
/** Like PayButton, but with custom styling. */
declare function PayButtonCustom(props: PayButtonCustomProps): import("react").ReactNode;
declare namespace PayButtonCustom {
    var displayName: string;
}
export {};