From 414e7475cd0bbb814566a498283aeb1a8014130c Mon Sep 17 00:00:00 2001
From: Suryateja Mandadi <suryateja.mandadi@coinbase.com>
Date: Wed, 19 Nov 2025 14:14:38 -0800
Subject: [PATCH] updating docs to include session token more explicitly

---
 docs/onchainkit/fund/fund-button.mdx          | 300 ++++++++----------
 docs/onchainkit/fund/fund-card.mdx            | 273 +++++++++-------
 .../latest/components/fund/fund-button.mdx    | 294 +++++++----------
 .../latest/components/fund/fund-card.mdx      | 243 +++++++-------
 4 files changed, 542 insertions(+), 568 deletions(-)

diff --git a/docs/onchainkit/fund/fund-button.mdx b/docs/onchainkit/fund/fund-button.mdx
index ed5f63ee..4b03c0da 100644
--- a/docs/onchainkit/fund/fund-button.mdx
+++ b/docs/onchainkit/fund/fund-button.mdx
@@ -1,117 +1,111 @@
 ---
-title: <FundButton /> · OnchainKit
+title: <FundButton />
 sidebarTitle: <FundButton />
-description: The `<FundButton />` component provides a way for users to onramp from fiat to crypto from within your app.
+description: The `<FundButton />` component provides a way for users to fund their wallet without leaving your app.
 ---
 
+# FundButton
+
 The `<FundButton />` component provides a way for users to fund their wallet without leaving your app. It automatically
 detects the user's wallet type (EOA vs Smart Wallet) and directs them to the appropriate funding URL.
 
-If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet 
-[Fund](https://keys.coinbase.com/fund) flow. Users will be able to buy and receive crypto, or use their Coinbase 
+If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet
+[Fund](https://keys.coinbase.com/fund) flow. Users will be able to buy and receive crypto, or use their Coinbase
 balances onchain with [Magic Spend](https://www.smartwallet.dev/guides/magic-spend).
 
 If your user connects any other EOA wallet, it provides an easy way to access [Coinbase Onramp](https://docs.cdp.coinbase.com/onramp/docs/welcome/)
 where your users will also be able to buy crypto using a fiat payment method, or transfer existing crypto from their
 Coinbase account.
 
-Before using it, ensure you've completed all [Getting Started steps](/onchainkit/getting-started). 
-
 ## Walkthrough
 
 <Steps>
   <Step title="Get your Project ID">
-  1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
+    1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
 
-<Frame>
-  <img alt="OnchainKit copy Project Id" src="/images/onchainkit/copy-project-id.png" />
-</Frame>
+    <Frame>
+      <img alt="OnchainKit copy Project Id" src="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=a252ce9520dc3909df614eaa3739a09d" data-og-width="1247" width="1247" data-og-height="466" height="466" data-path="images/onchainkit/copy-project-id.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=280&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=f5bed02ce1fa668ee0915e149fd208e2 280w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=560&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=3353683c600c3d6406473bd9d96b6c3e 560w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=840&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=fc1ea92d8d5ea02b932ed38b3c5f7933 840w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=1100&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=4f1b3d6cdb5aecce2bfdef9c679286c1 1100w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=1650&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=aab84604e4c4ea446cac4d5c93daa659 1650w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=2500&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=8a9febaf3ca315cb4ffed4be7de2e2f3 2500w" />
+    </Frame>
 
-  2. Add your Project ID to your `.env` file.
+    2. Add your Project ID to your `.env` file.
+
+    ```tsx .env theme={null}
+    NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
+    NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID // [!code ++]
+    ```
 
-  ```tsx .env
-  // @noErrors
-  NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
-  NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID // [!code ++]
-  ```
   </Step>
-  <Step title="Add Project ID to OnchainKitProvider">
-  ```tsx
-  // @noErrors
+
+<Step title="Add Project ID to OnchainKitProvider">
+  ```tsx theme={null}
   <OnchainKitProvider
-    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY} 
+    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
     projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID} // [!code ++]
     chain={base}
   >
     {props.children}
   </OnchainKitProvider>
   ```
-  </Step>
-  <Step title="Drop in the<FundButton /> component">
-  ```tsx
-  import { FundButton } from '@coinbase/onchainkit/fund';
-
-  <FundButton />
-  ```
+</Step>
+
+<Step title="Get a session token">
+  [Getting session
+  token](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication)
+</Step>
+
+  <Step title="Drop in the <FundButton /> component">
+    ```tsx theme={null}
+    import { FundButton } from '@coinbase/onchainkit/fund';
+
+    const sessionToken = "YOUR_SESSION_TOKEN";
+
+    // can use EITHER sessionToken or fundingUrl
+    <FundButton sessionToken={sessionToken} />
+    ```
+
+    {/* <App>
+      <FundWrapper>
+        {({ address }) => {
+          if (address) {
+            return (
+              <FundButton sessionToken={sessionToken} />
+            )
+          }
+          return <>
+            <Wallet>
+              <ConnectWallet>
+                <Avatar className="h-6 w-6" />
+                <Name />
+              </ConnectWallet>
+            </Wallet>
+          </>;
+        }}
+      </FundWrapper>
+    </App> */}
 
-  <App>
-    <FundWrapper>
-      {({ address }) => {
-        if (address) {
-          return (
-            <FundButton />
-          )
-        }
-        return <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>;
-      }}
-    </FundWrapper>
-  </App>
   </Step>
 </Steps>
 
-
-<Tip>
-**Troubleshooting**
-
-If you see a "something went wrong" error message when navigating to pay.coinbase.com, make sure you have "enforce 
-secure initialization" disabled on the [Onramp config page in Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/products/onramp).
-
-<Frame>
-<img alt="OnchainKit require secure init" src="/images/onchainkit/onramp-secure-init.png" />
-</Frame>
-
-</Tip>
-
-
 ## Customizing the funding experience
 
-You can customize the Coinbase Onramp experience by bringing your own Onramp URL and passing it to the ```<FundButton />```
+You can customize the Coinbase Onramp experience by bringing your own Onramp URL and passing it to the `<FundButton />`
 component. We provide the [`getOnrampBuyUrl`](/onchainkit/fund/get-onramp-buy-url) utility to help you generate a Coinbase Onramp
 URL tailored to your use case.
 
-```tsx
-import { FundButton, getOnrampBuyUrl } from '@coinbase/onchainkit/fund';
-import { useAccount } from 'wagmi';
+```tsx theme={null}
+import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
+import { useAccount } from "wagmi";
 
-const projectId = 'YOUR_CDP_PROJECT_ID';
+const projectId = "YOUR_CDP_PROJECT_ID";
 const { address } = useAccount();
 
 const onrampBuyUrl = getOnrampBuyUrl({
-  projectId,
-  addresses: { [address]: ['base'] },
-  assets: ['USDC'],
+  sessionToken: "YOUR_SESSION_TOKEN",
   presetFiatAmount: 20,
-  fiatCurrency: 'USD'
+  fiatCurrency: "USD",
 });
 
-<FundButton fundingUrl={onrampBuyUrl} />
+<FundButton fundingUrl={onrampBuyUrl} />;
 ```
 
 <iframe
@@ -119,37 +113,11 @@ const onrampBuyUrl = getOnrampBuyUrl({
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address, projectId }) => {
-      if (address && projectId) {
-        const onrampBuyUrl = getOnrampBuyUrl({
-          projectId,
-          addresses: { [address]: ['base'] },
-          assets: ['USDC'],
-          presetFiatAmount: 20,
-          fiatCurrency: 'USD'
-        });
-        return (
-          <FundButton fundingUrl={onrampBuyUrl} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 You can choose to have the funding URL open in a popup or a new tab using the `openIn` prop.
 
-```tsx
-<FundButton openIn={"tab"} />
+```tsx theme={null}
+<FundButton openIn={"tab"} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -157,32 +125,13 @@ You can choose to have the funding URL open in a popup or a new tab using the `o
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundButton openIn={"tab"} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 ## Customizing the fund button
 
 You can override the text on the fund button using the `text` prop, and hide the icon with the `hideIcon` prop.
 
-```tsx
-<FundButton text={"Onramp"} hideIcon={true} />
+```tsx theme={null}
+<FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -190,30 +139,11 @@ You can override the text on the fund button using the `text` prop, and hide the
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundButton text={"Onramp"} hideIcon={true} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 You can hide the text with the `hideText` prop.
 
-```tsx
-<FundButton hideText={true} />
+```tsx theme={null}
+<FundButton hideText={true} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -221,30 +151,76 @@ You can hide the text with the `hideText` prop.
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <>
-            <FundButton hideText={true} />
-          </>
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 See [`FundButtonReact`](/onchainkit/fund/types#fundbuttonreact) for the full list of customization options.
 
 ## Props
-- [`FundButtonReact`](/onchainkit/fund/types#fundbuttonreact)
 
+[`FundButtonProps`](#fundbuttonprops)
+
+```ts theme={null}
+export type FundButtonProps = FundButtonBaseProps &
+  FundButtonSourceProps &
+  FundButtonRenderProps;
+
+type FundButtonBaseProps = {
+  /* An optional CSS class name for styling the button component */
+  className?: string;
+  /* A optional prop to disable the fund button */
+  disabled?: boolean;
+  /* The state of the button component */
+  state?: FundButtonState;
+  /* Whether to open the funding flow in a tab or a popup window */
+  openIn?: "popup" | "tab";
+  /**
+   * Size of the popup window if `openIn` is set to `popup`
+   * Note: popupSize will be ignored when using a Coinbase Onramp URL (i.e. https://pay.coinbase.com/*) as it requires
+   * a fixed popup size.
+   */
+  popupSize?: "sm" | "md" | "lg";
+  /* Where to open the target if `openIn` is set to tab */
+  target?: string;
+  /* The currency code of the fiat amount provided in the presetFiatAmount param e.g. USD, CAD, EUR. */
+  fiatCurrency?: string;
+  /* A callback function that will be called when the popup window is closed */
+  onPopupClose?: () => void;
+  /* A callback function that will be called when the button is clicked */
+  onClick?: () => void;
+};
+
+// Require exactly one funding source for FundButton (not both)
+type FundButtonSourceProps =
+  | { fundingUrl: string; sessionToken?: string }
+  | { sessionToken: string; fundingUrl?: string };
+
+type FundButtonRenderProps =
+  | {
+      render?: (props: FundButtonRenderParams) => React.ReactNode;
+      /* An optional React node to be displayed in the button component */
+      children?: never;
+    }
+  | {
+      render?: never;
+      /* An optional React node to be displayed in the button component */
+      children?: ReactNode;
+    };
+
+export type FundButtonRenderParams = {
+  /* The state of the button component, only relevant when using FundCardSubmitButton */
+  status: FundButtonState;
+  /* A callback function that will be called when the button is clicked */
+  onClick: (e: React.MouseEvent) => void;
+  /* Whether the button is disabled */
+  isDisabled: boolean;
+};
+```
+
+<Note>
+  **Note:** `FundButton` requires either `sessionToken` or `fundingUrl` to be
+  provided. If neither is provided, the component will throw an error before
+  compiling.
+</Note>
+
+## Related Components
+
+- [`<FundCard />`](/onchainkit/fund/fund-card)
diff --git a/docs/onchainkit/fund/fund-card.mdx b/docs/onchainkit/fund/fund-card.mdx
index 32f45239..98a21b39 100644
--- a/docs/onchainkit/fund/fund-card.mdx
+++ b/docs/onchainkit/fund/fund-card.mdx
@@ -1,79 +1,111 @@
 ---
-title: <FundCard /> · OnchainKit
+title: <FundCard />
 sidebarTitle: <FundCard />
 description: The `<FundCard />` component provides a complete fiat onramp experience with amount input, currency switching, and payment method selection.
 ---
 
 <Frame>
-<img alt="FundCard"
-  src="/images/onchainkit/fund-card.gif"
-  height="364"/>
+  <img
+    alt="FundCard"
+    src="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/fund-card.gif?s=bc5009881dd7bfa9554cb714f8c948fe"
+    height="364"
+    data-og-width="576"
+    data-og-height="360"
+    data-path="images/onchainkit/fund-card.gif"
+    data-optimize="true"
+    data-opv="3"
+  />
 </Frame>
 
 The `<FundCard />` component provides a complete fiat onramp experience within your app. It includes:
 
 - Amount input with fiat/crypto switching
 - Payment method selection (Coinbase, Apple Pay, Debit Card)
+  <Note>
+    The Apple Pay and Debit Card onramp options are only available for Coinbase
+    supported assets.
+  </Note>
 - Automatic exchange rate updates
 - Smart handling of payment method restrictions (based on country and subdivision)
 
-<Note>
-The Apple Pay and Debit Card onramp options are only available for Coinbase supported assets.  
-</Note>
-
+<Info>
+**Session Token Required:** This utility requires a session token generated on your backend server using your CDP API keys. The session token encapsulates user addresses, supported assets, and client IP.
 
-## Prerequisites
+**Note:** Restricting assets and addresses are done during session token creation on your backend.
 
-Before using the `FundCard` component, ensure you've completed the [Getting Started](/onchainkit/installation/nextjs#get-your-client-api-key) steps.
+See [Session Token Authentication](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication) for implementation details.
 
+</Info>
 <Tip>
-To use the `FundCard` component, you'll need to provide a Client API Key in `OnchainKitProvider`. You can get one following our [Getting Started](/onchainkit/installation/nextjs#get-your-client-api-key) steps.
-</Tip>
+  To use the `FundCard` component, you'll need to provide a Client API Key in
+  `OnchainKitProvider`. You can get one following our [Getting
+  Started](/onchainkit/getting-started#get-your-client-api-key) steps.
 
+This component requires a `projectId` to be set in the `OnchainKitProvider`.
+You can find your `projectId` on [Coinbase Developer
+Platform](https://portal.cdp.coinbase.com/products/onchainkit).
 
-<Note>
-This component requires a `projectId` to be set in the `OnchainKitProvider`. You can find your `projectId` on [Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/onchainkit).
-</Note>
+</Tip>
 
+## Walkthrough
 
-## Usage
+<Steps>
+  <Step title="Get your Project ID">
+  1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
 
-### Drop in the `<FundCard />` component
+<Frame>
+  <img
+    alt="OnchainKit copy Project Id"
+    src="/images/onchainkit/copy-project-id.png"
+  />
+</Frame>
 
-```tsx
-import { FundCard } from '@coinbase/onchainkit/fund';
+2. Add your Project ID to your `.env` file.
 
-<FundCard
-  assetSymbol="ETH"
-  country="US"
-  currency="USD"
-/>;
+```tsx .env
+NEXT_PUBLIC_ONCHAINKIT_API_KEY = YOUR_PUBLIC_API_KEY;
+NEXT_PUBLIC_CDP_PROJECT_ID = YOUR_CDP_PROJECT_ID; // [!code ++]
+```
+
+  </Step>
+  <Step title="Add Project ID to OnchainKitProvider">
+  ```tsx
+  <OnchainKitProvider
+    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY} 
+    projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID} // [!code ++]
+    chain={base}
+  >
+    {props.children}
+  </OnchainKitProvider>
+  ```
+  </Step>
+
+<Step title="Get a session token">
+  [Getting session
+  token](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication)
+</Step>
+
+  <Step title="Drop in the <FundCard /> component">
+  ```tsx
+  import { FundCard } from '@coinbase/onchainkit/fund';
+
+const sessionToken = "YOUR_SESSION_TOKEN";
+
+  <FundCard
+    sessionToken={sessionToken}
+    assetSymbol="ETH"
+    country="US"
+    currency="USD"
+  />
 ```
+</Step>
+</Steps>
 
 <iframe
   src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-card--default&viewMode=story&dark=true&hero=true"
   width="100%"
   height="370px"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return <FundCard assetSymbol="ETH" country="US" currency="USD" />;
-      }
-      return (
-        <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>
-      );
-    }}
-  </FundWrapper>
-</App> */}
 
 ## Customization
 
@@ -81,8 +113,9 @@ import { FundCard } from '@coinbase/onchainkit/fund';
 
 You can customize the header and button text:
 
-```tsx
+```tsx theme={null}
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -96,40 +129,14 @@ You can customize the header and button text:
   width="100%"
   height="370px"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundCard
-            assetSymbol="ETH"
-            country="US"
-            currency="USD"
-            headerText="Purchase Ethereum"
-            buttonText="Purchase"
-          />
-        );
-      }
-      return (
-        <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>
-      );
-    }}
-  </FundWrapper>
-</App> */}
 
 ### Custom Currency
 
 You can specify which fiat currency to use:
 
-```tsx
+```tsx theme={null}
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="GB"
   currency="GBP"
@@ -140,10 +147,11 @@ You can specify which fiat currency to use:
 
 You can specify preset amount buttons:
 
-```tsx
-const presetAmountInputs = ['10', '20', '50'] as const;
+```tsx theme={null}
+const presetAmountInputs = ["10", "20", "50"] as const;
 
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -152,16 +160,17 @@ const presetAmountInputs = ['10', '20', '50'] as const;
 ```
 
 <Note>
-**Note: 3 preset amount inputs are required in order to show the preset amount buttons.**
+  **Note: 3 preset amount inputs are required in order to show the preset amount
+  buttons.**
 </Note>
 
-
 ### Custom Content
 
 You can provide custom children to completely customize the card content while keeping the fund button functionality:
 
-```tsx
+```tsx theme={null}
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -179,7 +188,7 @@ You can provide custom children to completely customize the card content while k
 
 You can also reuse the existing children from the default implementation and add your own custom content.
 
-```tsx
+```tsx theme={null}
 import {
   FundCardHeader,
   FundCardAmountInput,
@@ -187,14 +196,14 @@ import {
   FundCardPresetAmountInputList,
   FundCardPaymentMethodDropdown,
   FundCardSubmitButton,
- } from '@coinbase/onchainkit/fund';
+} from "@coinbase/onchainkit/fund";
 
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
 >
-
   <h2>Custom Header instead of the default "FundCardHeader" </h2>
   <FundCardAmountInput />
   <FundCardAmountInputTypeSwitch />
@@ -203,51 +212,87 @@ import {
   <FundCardPaymentMethodDropdown />
   <FundCardSubmitButton />
   <div>Any custom content</div>
-</FundCard>
+</FundCard>;
 ```
 
 <Note>
-**Note:** If you are using the custom components then you are going to need to access the state of the `FundCard` component. You can do this by using the `useFundContext` hook.
+  **Note:** If you are using the custom components then you are going to need to
+  access the state of the `FundCard` component. You can do this by using the
+  `useFundContext` hook.
 </Note>
 
-
-```tsx
+```tsx theme={null}
 const {
-    asset,
-    currency,
-    selectedPaymentMethod,
-    setSelectedPaymentMethod,
-    fundAmountFiat,
-    setFundAmountFiat,
-    fundAmountCrypto,
-    setFundAmountCrypto,
-    selectedInputType,
-    setSelectedInputType,
-    exchangeRate,
-    setExchangeRate,
-    exchangeRateLoading,
-    setExchangeRateLoading,
-    submitButtonState,
-    setSubmitButtonState,
-    paymentMethods,
-    setPaymentMethods,
-    paymentMethodsLoading,
-    setPaymentMethodsLoading,
-    headerText,
-    buttonText,
-    country,
-    subdivision,
-    lifecycleStatus,
-    updateLifecycleStatus,
-    presetAmountInputs,
- } = useFundContext();
+  asset,
+  currency,
+  selectedPaymentMethod,
+  setSelectedPaymentMethod,
+  fundAmountFiat,
+  setFundAmountFiat,
+  fundAmountCrypto,
+  setFundAmountCrypto,
+  selectedInputType,
+  setSelectedInputType,
+  exchangeRate,
+  setExchangeRate,
+  exchangeRateLoading,
+  setExchangeRateLoading,
+  submitButtonState,
+  setSubmitButtonState,
+  paymentMethods,
+  setPaymentMethods,
+  isPaymentMethodsLoading,
+  setIsPaymentMethodsLoading,
+  headerText,
+  buttonText,
+  country,
+  subdivision,
+  lifecycleStatus,
+  updateLifecycleStatus,
+  presetAmountInputs,
+  sessionToken,
+} = useFundContext();
 ```
 
 ## Props
 
-- [`FundCardPropsReact`](/onchainkit/fund/types#fundcardpropsreact)
+[`FundCardProps`](#fundcardprops)
+
+```ts theme={null}
+type FundCardProps = {
+  children?: ReactNode;
+  /** Required session token for authentication */
+  sessionToken: string;
+  assetSymbol: string;
+  placeholder?: string | React.ReactNode;
+  headerText?: string;
+  buttonText?: string;
+  country: string;
+  subdivision?: string;
+  currency?: string;
+  className?: string;
+  presetAmountInputs?: PresetAmountInputs;
+} & LifecycleEvents;
+```
+
+### FundCardSubmitButtonProps
+
+```ts theme={null}
+type FundCardSubmitButtonProps =
+  | {
+      render?: (props: {
+        state: "default" | "success" | "error" | "loading";
+        onClick: () => void;
+        disabled: boolean;
+      }) => React.ReactNode; // Custom render function for complete control of submit button rendering
+      children?: never;
+    }
+  | {
+      render?: never;
+      children?: ReactNode;
+    };
+```
 
 ## Related Components
 
 - [`<FundButton />`](/onchainkit/fund/fund-button)
-
diff --git a/docs/onchainkit/latest/components/fund/fund-button.mdx b/docs/onchainkit/latest/components/fund/fund-button.mdx
index 7b09d77e..4b03c0da 100644
--- a/docs/onchainkit/latest/components/fund/fund-button.mdx
+++ b/docs/onchainkit/latest/components/fund/fund-button.mdx
@@ -1,105 +1,111 @@
 ---
-title: "FundButton"
+title: <FundButton />
+sidebarTitle: <FundButton />
+description: The `<FundButton />` component provides a way for users to fund their wallet without leaving your app.
 ---
 
+# FundButton
+
 The `<FundButton />` component provides a way for users to fund their wallet without leaving your app. It automatically
 detects the user's wallet type (EOA vs Smart Wallet) and directs them to the appropriate funding URL.
 
-If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet 
-[Fund](https://keys.coinbase.com/fund) flow. Users will be able to buy and receive crypto, or use their Coinbase 
+If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet
+[Fund](https://keys.coinbase.com/fund) flow. Users will be able to buy and receive crypto, or use their Coinbase
 balances onchain with [Magic Spend](https://www.smartwallet.dev/guides/magic-spend).
 
 If your user connects any other EOA wallet, it provides an easy way to access [Coinbase Onramp](https://docs.cdp.coinbase.com/onramp/docs/welcome/)
 where your users will also be able to buy crypto using a fiat payment method, or transfer existing crypto from their
 Coinbase account.
 
- 
-
 ## Walkthrough
 
 <Steps>
   <Step title="Get your Project ID">
-  1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
+    1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
 
-<Frame>
-  <img alt="OnchainKit copy Project Id" src="/images/onchainkit/copy-project-id.png" />
-</Frame>
+    <Frame>
+      <img alt="OnchainKit copy Project Id" src="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=a252ce9520dc3909df614eaa3739a09d" data-og-width="1247" width="1247" data-og-height="466" height="466" data-path="images/onchainkit/copy-project-id.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=280&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=f5bed02ce1fa668ee0915e149fd208e2 280w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=560&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=3353683c600c3d6406473bd9d96b6c3e 560w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=840&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=fc1ea92d8d5ea02b932ed38b3c5f7933 840w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=1100&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=4f1b3d6cdb5aecce2bfdef9c679286c1 1100w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=1650&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=aab84604e4c4ea446cac4d5c93daa659 1650w, https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/copy-project-id.png?w=2500&fit=max&auto=format&n=-q4fo0uzIfxlH3Wn&q=85&s=8a9febaf3ca315cb4ffed4be7de2e2f3 2500w" />
+    </Frame>
 
-  2. Add your Project ID to your `.env` file.
+    2. Add your Project ID to your `.env` file.
+
+    ```tsx .env theme={null}
+    NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
+    NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID // [!code ++]
+    ```
 
-  ```tsx .env
-  NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
-  NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID // [!code ++]
-  ```
   </Step>
-  <Step title="Add Project ID to OnchainKitProvider">
-  ```tsx
+
+<Step title="Add Project ID to OnchainKitProvider">
+  ```tsx theme={null}
   <OnchainKitProvider
-    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY} 
+    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
     projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID} // [!code ++]
     chain={base}
   >
     {props.children}
   </OnchainKitProvider>
   ```
-  </Step>
-
-  <Step title="Get sessionToken">
- [Getting session token](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication)
-  </Step>
-
-  <Step title="Drop in the<FundButton /> component">
-  ```tsx
-  import { FundButton } from '@coinbase/onchainkit/fund';
-
-
-  const sessionToken = "YOUR_SESSION_TOKEN";
-
-  <FundButton sessionToken={sessionToken} />
-  ```
+</Step>
+
+<Step title="Get a session token">
+  [Getting session
+  token](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication)
+</Step>
+
+  <Step title="Drop in the <FundButton /> component">
+    ```tsx theme={null}
+    import { FundButton } from '@coinbase/onchainkit/fund';
+
+    const sessionToken = "YOUR_SESSION_TOKEN";
+
+    // can use EITHER sessionToken or fundingUrl
+    <FundButton sessionToken={sessionToken} />
+    ```
+
+    {/* <App>
+      <FundWrapper>
+        {({ address }) => {
+          if (address) {
+            return (
+              <FundButton sessionToken={sessionToken} />
+            )
+          }
+          return <>
+            <Wallet>
+              <ConnectWallet>
+                <Avatar className="h-6 w-6" />
+                <Name />
+              </ConnectWallet>
+            </Wallet>
+          </>;
+        }}
+      </FundWrapper>
+    </App> */}
 
-  <App>
-    <FundWrapper>
-      {({ address }) => {
-        if (address) {
-          return (
-            <FundButton sessionToken={sessionToken} />
-          )
-        }
-        return <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>;
-      }}
-    </FundWrapper>
-  </App>
   </Step>
 </Steps>
 
 ## Customizing the funding experience
 
-You can customize the Coinbase Onramp experience by bringing your own Onramp URL and passing it to the ```<FundButton />```
+You can customize the Coinbase Onramp experience by bringing your own Onramp URL and passing it to the `<FundButton />`
 component. We provide the [`getOnrampBuyUrl`](/onchainkit/fund/get-onramp-buy-url) utility to help you generate a Coinbase Onramp
 URL tailored to your use case.
 
-```tsx
-import { FundButton, getOnrampBuyUrl } from '@coinbase/onchainkit/fund';
-import { useAccount } from 'wagmi';
+```tsx theme={null}
+import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
+import { useAccount } from "wagmi";
 
-const projectId = 'YOUR_CDP_PROJECT_ID';
+const projectId = "YOUR_CDP_PROJECT_ID";
 const { address } = useAccount();
 
 const onrampBuyUrl = getOnrampBuyUrl({
-  sessionToken: "YOUR_SESSION_TOKEN"
+  sessionToken: "YOUR_SESSION_TOKEN",
   presetFiatAmount: 20,
-  fiatCurrency: 'USD'
+  fiatCurrency: "USD",
 });
 
-<FundButton fundingUrl={onrampBuyUrl} />
+<FundButton fundingUrl={onrampBuyUrl} />;
 ```
 
 <iframe
@@ -107,34 +113,10 @@ const onrampBuyUrl = getOnrampBuyUrl({
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address, projectId }) => {
-      if (address && projectId) {
-        const onrampBuyUrl = getOnrampBuyUrl({
-          sessionToken: "YOUR_SESSION_TOKEN"
-          presetFiatAmount: 20,
-          fiatCurrency: 'USD'
-        });
-        return (
-          <FundButton fundingUrl={onrampBuyUrl} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 You can choose to have the funding URL open in a popup or a new tab using the `openIn` prop.
 
-```tsx
+```tsx theme={null}
 <FundButton openIn={"tab"} sessionToken={sessionToken} />
 ```
 
@@ -143,31 +125,12 @@ You can choose to have the funding URL open in a popup or a new tab using the `o
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundButton openIn={"tab"} sessionToken={sessionToken} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 ## Customizing the fund button
 
 You can override the text on the fund button using the `text` prop, and hide the icon with the `hideIcon` prop.
 
-```tsx
+```tsx theme={null}
 <FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
 ```
 
@@ -176,29 +139,10 @@ You can override the text on the fund button using the `text` prop, and hide the
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 You can hide the text with the `hideText` prop.
 
-```tsx
+```tsx theme={null}
 <FundButton hideText={true} sessionToken={sessionToken} />
 ```
 
@@ -207,27 +151,6 @@ You can hide the text with the `hideText` prop.
   width="100%"
   height="auto"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <>
-            <FundButton hideText={true} sessionToken={sessionToken} />
-          </>
-        )
-      }
-      return <>
-        <Wallet>
-          <ConnectWallet>
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-        </Wallet>
-      </>;
-    }}
-  </FundWrapper>
-</App> */}
 
 See [`FundButtonReact`](/onchainkit/fund/types#fundbuttonreact) for the full list of customization options.
 
@@ -235,42 +158,69 @@ See [`FundButtonReact`](/onchainkit/fund/types#fundbuttonreact) for the full lis
 
 [`FundButtonProps`](#fundbuttonprops)
 
-```ts
-type FundButtonProps =
-  | {
-      render?: (props: FundButtonRenderParams) => React.ReactNode;
-      children?: never;
-    }
-  | {
-      render?: never;
-      children?: ReactNode;
-    };
+```ts theme={null}
+export type FundButtonProps = FundButtonBaseProps &
+  FundButtonSourceProps &
+  FundButtonRenderProps;
 
 type FundButtonBaseProps = {
-  /** An optional CSS class name for styling the button component */
+  /* An optional CSS class name for styling the button component */
   className?: string;
-  /** An optional React node to be displayed in the button component */
-  children?: ReactNode;
-  /** A optional prop to disable the fund button */
+  /* A optional prop to disable the fund button */
   disabled?: boolean;
-  /** The state of the button component */
+  /* The state of the button component */
   state?: FundButtonState;
-  /** An optional prop to provide a custom funding URL */
-  fundingUrl?: string;
-  /** Whether to open the funding flow in a tab or a popup window */
-  openIn?: 'popup' | 'tab';
-  /** Size of the popup window if `openIn` is set to `popup` */
-  popupSize?: 'sm' | 'md' | 'lg';
-  /** Where to open the target if `openIn` is set to tab */
+  /* Whether to open the funding flow in a tab or a popup window */
+  openIn?: "popup" | "tab";
+  /**
+   * Size of the popup window if `openIn` is set to `popup`
+   * Note: popupSize will be ignored when using a Coinbase Onramp URL (i.e. https://pay.coinbase.com/*) as it requires
+   * a fixed popup size.
+   */
+  popupSize?: "sm" | "md" | "lg";
+  /* Where to open the target if `openIn` is set to tab */
   target?: string;
-  /** The currency code of the fiat amount provided in the presetFiatAmount param e.g. USD, CAD, EUR. */
+  /* The currency code of the fiat amount provided in the presetFiatAmount param e.g. USD, CAD, EUR. */
   fiatCurrency?: string;
-  /** A callback function that will be called when the popup window is closed */
+  /* A callback function that will be called when the popup window is closed */
   onPopupClose?: () => void;
-  /** A callback function that will be called when the button is clicked */
+  /* A callback function that will be called when the button is clicked */
   onClick?: () => void;
-  /** An optional prop to provide a session token. Required if no fundingUrl is provided */
-  sessionToken?: string;
+};
+
+// Require exactly one funding source for FundButton (not both)
+type FundButtonSourceProps =
+  | { fundingUrl: string; sessionToken?: string }
+  | { sessionToken: string; fundingUrl?: string };
+
+type FundButtonRenderProps =
+  | {
+      render?: (props: FundButtonRenderParams) => React.ReactNode;
+      /* An optional React node to be displayed in the button component */
+      children?: never;
+    }
+  | {
+      render?: never;
+      /* An optional React node to be displayed in the button component */
+      children?: ReactNode;
+    };
+
+export type FundButtonRenderParams = {
+  /* The state of the button component, only relevant when using FundCardSubmitButton */
+  status: FundButtonState;
+  /* A callback function that will be called when the button is clicked */
+  onClick: (e: React.MouseEvent) => void;
+  /* Whether the button is disabled */
+  isDisabled: boolean;
 };
 ```
 
+<Note>
+  **Note:** `FundButton` requires either `sessionToken` or `fundingUrl` to be
+  provided. If neither is provided, the component will throw an error before
+  compiling.
+</Note>
+
+## Related Components
+
+- [`<FundCard />`](/onchainkit/fund/fund-card)
diff --git a/docs/onchainkit/latest/components/fund/fund-card.mdx b/docs/onchainkit/latest/components/fund/fund-card.mdx
index 66eea2e7..98a21b39 100644
--- a/docs/onchainkit/latest/components/fund/fund-card.mdx
+++ b/docs/onchainkit/latest/components/fund/fund-card.mdx
@@ -1,80 +1,111 @@
 ---
-title: "FundCard"
+title: <FundCard />
+sidebarTitle: <FundCard />
+description: The `<FundCard />` component provides a complete fiat onramp experience with amount input, currency switching, and payment method selection.
 ---
 
 <Frame>
-<img alt="FundCard"
-  src="/images/onchainkit/fund-card.gif"
-  height="364"/>
+  <img
+    alt="FundCard"
+    src="https://mintcdn.com/base-a060aa97/-q4fo0uzIfxlH3Wn/images/onchainkit/fund-card.gif?s=bc5009881dd7bfa9554cb714f8c948fe"
+    height="364"
+    data-og-width="576"
+    data-og-height="360"
+    data-path="images/onchainkit/fund-card.gif"
+    data-optimize="true"
+    data-opv="3"
+  />
 </Frame>
 
 The `<FundCard />` component provides a complete fiat onramp experience within your app. It includes:
 
 - Amount input with fiat/crypto switching
 - Payment method selection (Coinbase, Apple Pay, Debit Card)
+  <Note>
+    The Apple Pay and Debit Card onramp options are only available for Coinbase
+    supported assets.
+  </Note>
 - Automatic exchange rate updates
 - Smart handling of payment method restrictions (based on country and subdivision)
 
-<Note>
-The Apple Pay and Debit Card onramp options are only available for Coinbase supported assets.  
-</Note>
+<Info>
+**Session Token Required:** This utility requires a session token generated on your backend server using your CDP API keys. The session token encapsulates user addresses, supported assets, and client IP.
+
+**Note:** Restricting assets and addresses are done during session token creation on your backend.
 
+See [Session Token Authentication](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication) for implementation details.
 
+</Info>
 <Tip>
-To use the `FundCard` component, you'll need to provide a Client API Key in `OnchainKitProvider`. You can get one following our [Getting Started](/onchainkit/getting-started#get-your-client-api-key) steps.
-</Tip>
+  To use the `FundCard` component, you'll need to provide a Client API Key in
+  `OnchainKitProvider`. You can get one following our [Getting
+  Started](/onchainkit/getting-started#get-your-client-api-key) steps.
 
+This component requires a `projectId` to be set in the `OnchainKitProvider`.
+You can find your `projectId` on [Coinbase Developer
+Platform](https://portal.cdp.coinbase.com/products/onchainkit).
 
-<Note>
-This component requires a `projectId` to be set in the `OnchainKitProvider`. You can find your `projectId` on [Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/onchainkit).
-</Note>
+</Tip>
 
-<Note>
-You'll need a session token for authentication. Learn how to obtain one in the [session token documentation](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication).
-</Note>
+## Walkthrough
 
+<Steps>
+  <Step title="Get your Project ID">
+  1. Get your Project ID from the [Coinbase Developer Platform Dashboard](https://portal.cdp.coinbase.com/).
+
+<Frame>
+  <img
+    alt="OnchainKit copy Project Id"
+    src="/images/onchainkit/copy-project-id.png"
+  />
+</Frame>
 
-## Usage
+2. Add your Project ID to your `.env` file.
 
-### Drop in the `<FundCard />` component
+```tsx .env
+NEXT_PUBLIC_ONCHAINKIT_API_KEY = YOUR_PUBLIC_API_KEY;
+NEXT_PUBLIC_CDP_PROJECT_ID = YOUR_CDP_PROJECT_ID; // [!code ++]
+```
 
-```tsx
-import { FundCard } from '@coinbase/onchainkit/fund';
+  </Step>
+  <Step title="Add Project ID to OnchainKitProvider">
+  ```tsx
+  <OnchainKitProvider
+    apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY} 
+    projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID} // [!code ++]
+    chain={base}
+  >
+    {props.children}
+  </OnchainKitProvider>
+  ```
+  </Step>
+
+<Step title="Get a session token">
+  [Getting session
+  token](https://docs.cdp.coinbase.com/onramp-&-offramp/session-token-authentication)
+</Step>
+
+  <Step title="Drop in the <FundCard /> component">
+  ```tsx
+  import { FundCard } from '@coinbase/onchainkit/fund';
 
 const sessionToken = "YOUR_SESSION_TOKEN";
 
-<FundCard
-  sessionToken={sessionToken}
-  assetSymbol="ETH"
-  country="US"
-  currency="USD"
-/>;
+  <FundCard
+    sessionToken={sessionToken}
+    assetSymbol="ETH"
+    country="US"
+    currency="USD"
+  />
 ```
+</Step>
+</Steps>
 
 <iframe
   src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-card--default&viewMode=story&dark=true&hero=true"
   width="100%"
   height="370px"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return <FundCard sessionToken={sessionToken} assetSymbol="ETH" country="US" currency="USD" />;
-      }
-      return (
-        <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>
-      );
-    }}
-  </FundWrapper>
-</App> */}
 
 ## Customization
 
@@ -82,7 +113,7 @@ const sessionToken = "YOUR_SESSION_TOKEN";
 
 You can customize the header and button text:
 
-```tsx
+```tsx theme={null}
 <FundCard
   sessionToken={sessionToken}
   assetSymbol="ETH"
@@ -98,40 +129,12 @@ You can customize the header and button text:
   width="100%"
   height="370px"
 />
-{/* <App>
-  <FundWrapper>
-    {({ address }) => {
-      if (address) {
-        return (
-          <FundCard
-            sessionToken={sessionToken}
-            assetSymbol="ETH"
-            country="US"
-            currency="USD"
-            headerText="Purchase Ethereum"
-            buttonText="Purchase"
-          />
-        );
-      }
-      return (
-        <>
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        </>
-      );
-    }}
-  </FundWrapper>
-</App> */}
 
 ### Custom Currency
 
 You can specify which fiat currency to use:
 
-```tsx
+```tsx theme={null}
 <FundCard
   sessionToken={sessionToken}
   assetSymbol="ETH"
@@ -144,8 +147,8 @@ You can specify which fiat currency to use:
 
 You can specify preset amount buttons:
 
-```tsx
-const presetAmountInputs = ['10', '20', '50'] as const;
+```tsx theme={null}
+const presetAmountInputs = ["10", "20", "50"] as const;
 
 <FundCard
   sessionToken={sessionToken}
@@ -157,15 +160,15 @@ const presetAmountInputs = ['10', '20', '50'] as const;
 ```
 
 <Note>
-**Note: 3 preset amount inputs are required in order to show the preset amount buttons.**
+  **Note: 3 preset amount inputs are required in order to show the preset amount
+  buttons.**
 </Note>
 
-
 ### Custom Content
 
 You can provide custom children to completely customize the card content while keeping the fund button functionality:
 
-```tsx
+```tsx theme={null}
 <FundCard
   sessionToken={sessionToken}
   assetSymbol="ETH"
@@ -185,7 +188,7 @@ You can provide custom children to completely customize the card content while k
 
 You can also reuse the existing children from the default implementation and add your own custom content.
 
-```tsx
+```tsx theme={null}
 import {
   FundCardHeader,
   FundCardAmountInput,
@@ -193,7 +196,7 @@ import {
   FundCardPresetAmountInputList,
   FundCardPaymentMethodDropdown,
   FundCardSubmitButton,
- } from '@coinbase/onchainkit/fund';
+} from "@coinbase/onchainkit/fund";
 
 <FundCard
   sessionToken={sessionToken}
@@ -201,7 +204,6 @@ import {
   country="US"
   currency="USD"
 >
-
   <h2>Custom Header instead of the default "FundCardHeader" </h2>
   <FundCardAmountInput />
   <FundCardAmountInputTypeSwitch />
@@ -210,53 +212,57 @@ import {
   <FundCardPaymentMethodDropdown />
   <FundCardSubmitButton />
   <div>Any custom content</div>
-</FundCard>
+</FundCard>;
 ```
 
 <Note>
-**Note:** If you are using the custom components then you are going to need to access the state of the `FundCard` component. You can do this by using the `useFundContext` hook.
+  **Note:** If you are using the custom components then you are going to need to
+  access the state of the `FundCard` component. You can do this by using the
+  `useFundContext` hook.
 </Note>
 
-
-```tsx
+```tsx theme={null}
 const {
-    asset,
-    currency,
-    selectedPaymentMethod,
-    setSelectedPaymentMethod,
-    fundAmountFiat,
-    setFundAmountFiat,
-    fundAmountCrypto,
-    setFundAmountCrypto,
-    selectedInputType,
-    setSelectedInputType,
-    exchangeRate,
-    setExchangeRate,
-    exchangeRateLoading,
-    setExchangeRateLoading,
-    submitButtonState,
-    setSubmitButtonState,
-    paymentMethods,
-    setPaymentMethods,
-    paymentMethodsLoading,
-    setPaymentMethodsLoading,
-    headerText,
-    buttonText,
-    country,
-    subdivision,
-    lifecycleStatus,
-    updateLifecycleStatus,
-    presetAmountInputs,
- } = useFundContext();
+  asset,
+  currency,
+  selectedPaymentMethod,
+  setSelectedPaymentMethod,
+  fundAmountFiat,
+  setFundAmountFiat,
+  fundAmountCrypto,
+  setFundAmountCrypto,
+  selectedInputType,
+  setSelectedInputType,
+  exchangeRate,
+  setExchangeRate,
+  exchangeRateLoading,
+  setExchangeRateLoading,
+  submitButtonState,
+  setSubmitButtonState,
+  paymentMethods,
+  setPaymentMethods,
+  isPaymentMethodsLoading,
+  setIsPaymentMethodsLoading,
+  headerText,
+  buttonText,
+  country,
+  subdivision,
+  lifecycleStatus,
+  updateLifecycleStatus,
+  presetAmountInputs,
+  sessionToken,
+} = useFundContext();
 ```
 
 ## Props
 
 [`FundCardProps`](#fundcardprops)
 
-```ts
+```ts theme={null}
 type FundCardProps = {
   children?: ReactNode;
+  /** Required session token for authentication */
+  sessionToken: string;
   assetSymbol: string;
   placeholder?: string | React.ReactNode;
   headerText?: string;
@@ -266,18 +272,16 @@ type FundCardProps = {
   currency?: string;
   className?: string;
   presetAmountInputs?: PresetAmountInputs;
-  /** An optional prop to provide a session token. Required if no fundingUrl is provided */
-  sessionToken?: string;
 } & LifecycleEvents;
 ```
 
 ### FundCardSubmitButtonProps
 
-```ts
+```ts theme={null}
 type FundCardSubmitButtonProps =
   | {
       render?: (props: {
-        state: 'default' | 'success' | 'error' | 'loading';
+        state: "default" | "success" | "error" | "loading";
         onClick: () => void;
         disabled: boolean;
       }) => React.ReactNode; // Custom render function for complete control of submit button rendering
@@ -292,4 +296,3 @@ type FundCardSubmitButtonProps =
 ## Related Components
 
 - [`<FundButton />`](/onchainkit/fund/fund-button)
-