CDP Frontend SDK
    Preparing search index...

    Function unstable_Fund

    • The Fund component.

      Parameters

      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>
        )
      }

    Settings

    Member Visibility