Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rustam-cb merged 1 commit into from
Sep 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed docs/images/onchainkit/onramp-secure-init.png
View file
Open in desktop
Binary file not shown.
48 changes: 20 additions & 28 deletions docs/onchainkit/latest/components/fund/fund-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <>
Expand All @@ -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 />```
Expand All @@ -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'
});
Expand All @@ -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'
});
Expand All @@ -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
Expand All @@ -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 <>
Expand All @@ -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
Expand All @@ -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 <>
Expand All @@ -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
Expand All @@ -223,7 +213,7 @@ You can hide the text with the `hideText` prop.
if (address) {
return (
<>
<FundButton hideText={true} />
<FundButton hideText={true} sessionToken={sessionToken} />
</>
)
}
Expand Down Expand Up @@ -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;
};
```

17 changes: 16 additions & 1 deletion docs/onchainkit/latest/components/fund/fund-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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"
Expand All @@ -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 (
<>
Expand All @@ -77,6 +84,7 @@ You can customize the header and button text:

```tsx
<FundCard
sessionToken={sessionToken}
assetSymbol="ETH"
country="US"
currency="USD"
Expand All @@ -96,6 +104,7 @@ You can customize the header and button text:
if (address) {
return (
<FundCard
sessionToken={sessionToken}
assetSymbol="ETH"
country="US"
currency="USD"
Expand Down Expand Up @@ -124,6 +133,7 @@ You can specify which fiat currency to use:

```tsx
<FundCard
sessionToken={sessionToken}
assetSymbol="ETH"
country="GB"
currency="GBP"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -184,6 +196,7 @@ import {
} from '@coinbase/onchainkit/fund';

<FundCard
sessionToken={sessionToken}
assetSymbol="ETH"
country="US"
currency="USD"
Expand Down Expand Up @@ -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;
```

Expand Down