CDP Frontend SDK
    Preparing search index...

    Function Fund

    • The Fund component.

      Parameters

      • props: FundProps

        The props of the Fund component.

        All the props for the Fund component.

        • Optionalchildren?: ReactNode | ((state: FundState) => ReactNode)
        • OptionalclassName?: string
        • fetchBuyOptions: FetchBuyOptions
        • fetchBuyQuote: FetchBuyQuote
        • OptionalinputType?: InputType
        • OptionalopenIn?: "tab" | "popup"
        • OptionalredirectUrl?: string
        • OptionalsubmitLabel?: ReactNode
        • Optionaltitle?: ReactNode
        • country: string
        • Optionallocale?: string
        • OptionalcryptoDecimalPlaces?: number
        • cryptoCurrency: string
        • fiatCurrency: string
        • OptionalfiatDecimalPlaces?: number
        • network: string
        • OptionalpresetAmountInputs?: FundPresetAmountInputs
        • Optionalsubdivision?: string
        • destinationAddress: string
        • OptionalonError?: (e: undefined | OnrampError) => void
        • OptionalonStatus?: (lifecycleStatus: FundLifecycleStatus) => void
        • OptionalonSuccess?: (result?: OnrampSuccessEventData) => void

      Returns Element

      The Fund component.

      // Basic usage
      const App = () => {
        const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
          // call the buy quote API
        }
        const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
          // call the buy options API
        }
        return (
          <Fund
            country="US"
            subdivision="NY"
            cryptoCurrency="eth"
            fiatCurrency="usd"
            fetchBuyQuote={fetchBuyQuote}
            fetchBuyOptions={fetchBuyOptions}
            network="base"
            presetAmountInputs={[10, 25, 50]}
          />
        )
      }

      // Example customizing the children to render the title as a page title
      // and add a custom error message
      const App = () => {
        const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
          // call the buy quote API
        }
        const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
          // call the buy options API
        }
        const title = "Buy ETH";
        const titleId = useId();
        const submitLabel = "Purchase now";
        return (
          <Fund
            country="US"
            subdivision="NY"
            cryptoCurrency="eth"
            fiatCurrency="usd"
            fetchBuyQuote={fetchBuyQuote}
            fetchBuyOptions={fetchBuyOptions}
            network="base"
            presetAmountInputs={[10, 25, 50]}
            submitLabel={submitLabel}
            title={title}
          >
            <FundTitle as="h1" id={titleId}>{title}</FundTitle>
            <FundForm aria-labelledby={titleId} submitLabel={submitLabel}>
              {({ view, Content }) => (
                <>
                  {Content}
                  {view === "error" && <p>Contact support at support@example.com</p>}
                </>
              )}
            </FundForm>
            <FundFooter />
          </Fund>
        )
      }
    Index

    Documents

    README

    Settings

    Member Visibility