chore(ONRAMP-843): FundCard accept sessionToken param (#366)

Author: rustam-cb

docs/images/onchainkit/onramp-secure-init.png

@@ -43,19 +43,27 @@ Coinbase account.
   </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';
 
-  <FundButton />
+
+  const sessionToken = "YOUR_SESSION_TOKEN";
+
+  <FundButton sessionToken={sessionToken} />
   ```
 
   <App>
     <FundWrapper>
       {({ address }) => {
         if (address) {
           return (
-            <FundButton />
+            <FundButton sessionToken={sessionToken} />
           )
         }
         return <>
@@ -72,20 +80,6 @@ Coinbase account.
   </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 />```
@@ -100,9 +94,7 @@ 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'
 });
@@ -120,9 +112,7 @@ const onrampBuyUrl = getOnrampBuyUrl({
     {({ address, projectId }) => {
       if (address && projectId) {
         const onrampBuyUrl = getOnrampBuyUrl({
-          projectId,
-          addresses: { [address]: ['base'] },
-          assets: ['USDC'],
+          sessionToken: "YOUR_SESSION_TOKEN"
           presetFiatAmount: 20,
           fiatCurrency: 'USD'
         });
@@ -145,7 +135,7 @@ const onrampBuyUrl = getOnrampBuyUrl({
 You can choose to have the funding URL open in a popup or a new tab using the `openIn` prop.
 
 ```tsx
-<FundButton openIn={"tab"} />
+<FundButton openIn={"tab"} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -158,7 +148,7 @@ You can choose to have the funding URL open in a popup or a new tab using the `o
     {({ address }) => {
       if (address) {
         return (
-          <FundButton openIn={"tab"} />
+          <FundButton openIn={"tab"} sessionToken={sessionToken} />
         )
       }
       return <>
@@ -178,7 +168,7 @@ You can choose to have the funding URL open in a popup or a new tab using the `o
 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} />
+<FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -191,7 +181,7 @@ You can override the text on the fund button using the `text` prop, and hide the
     {({ address }) => {
       if (address) {
         return (
-          <FundButton text={"Onramp"} hideIcon={true} />
+          <FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
         )
       }
       return <>
@@ -209,7 +199,7 @@ You can override the text on the fund button using the `text` prop, and hide the
 You can hide the text with the `hideText` prop.
 
 ```tsx
-<FundButton hideText={true} />
+<FundButton hideText={true} sessionToken={sessionToken} />
 ```
 
 <iframe
@@ -223,7 +213,7 @@ You can hide the text with the `hideText` prop.
       if (address) {
         return (
           <>
-            <FundButton hideText={true} />
+            <FundButton hideText={true} sessionToken={sessionToken} />
           </>
         )
       }
@@ -279,6 +269,8 @@ type FundButtonBaseProps = {
   onPopupClose?: () => void;
   /** 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;
 };
 ```
 

docs/onchainkit/latest/components/fund/fund-button.mdx

@@ -29,6 +29,10 @@ To use the `FundCard` component, you'll need to provide a Client API Key in `Onc
 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>
 
+<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>
+
 
 ## Usage
 
@@ -37,7 +41,10 @@ This component requires a `projectId` to be set in the `OnchainKitProvider`. You
 ```tsx
 import { FundCard } from '@coinbase/onchainkit/fund';
 
+const sessionToken = "YOUR_SESSION_TOKEN";
+
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -53,7 +60,7 @@ import { FundCard } from '@coinbase/onchainkit/fund';
   <FundWrapper>
     {({ address }) => {
       if (address) {
-        return <FundCard assetSymbol="ETH" country="US" currency="USD" />;
+        return <FundCard sessionToken={sessionToken} assetSymbol="ETH" country="US" currency="USD" />;
       }
       return (
         <>
@@ -77,6 +84,7 @@ You can customize the header and button text:
 
 ```tsx
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -96,6 +104,7 @@ You can customize the header and button text:
       if (address) {
         return (
           <FundCard
+            sessionToken={sessionToken}
             assetSymbol="ETH"
             country="US"
             currency="USD"
@@ -124,6 +133,7 @@ You can specify which fiat currency to use:
 
 ```tsx
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="GB"
   currency="GBP"
@@ -138,6 +148,7 @@ You can specify preset amount buttons:
 const presetAmountInputs = ['10', '20', '50'] as const;
 
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -156,6 +167,7 @@ You can provide custom children to completely customize the card content while k
 
 ```tsx
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -184,6 +196,7 @@ import {
  } from '@coinbase/onchainkit/fund';
 
 <FundCard
+  sessionToken={sessionToken}
   assetSymbol="ETH"
   country="US"
   currency="USD"
@@ -253,6 +266,8 @@ 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;
 ```