Skip to content

Update checkout guide #2313

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
merged 4 commits into from
May 7, 2025
Merged

Update checkout guide #2313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95d9069
update crypto payments guide to use latest ock config and components
hughescoin May 6, 2025
96296cb
replace outdated images with latest implementation
hughescoin May 6, 2025
e95ab51
add filenames and checkout gif
hughescoin May 6, 2025
9f0a1ae
Merge branch 'master' into update-checkout-guide
hughescoin May 7, 2025
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
199 changes: 62 additions & 137 deletions apps/base-docs/docs/pages/use-cases/accept-crypto-payments.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,19 @@ authors:

Accepting crypto payments can help you **eliminate traditional credit card fees** and **avoid costly chargebacks**, giving you a faster, more global payment experience. In this guide, you'll learn how to quickly integrate Coinbase Commerce and OnchainKit to accept crypto payments for products or services in your application.

<img alt="Checkout"
src="/images/onchainkit/checkout.gif"
height="364"/>

## Objectives

By following this guide, you will learn how to:

- Create or configure a product in **Coinbase Commerce**
- Configure your **OnchainKit** environment
- Implement a checkout flow for accepting crypto payments
- Create or configure a product in **Coinbase Commerce**
- Configure your **OnchainKit** environment
- Implement a checkout flow for accepting crypto payments
- Deploy and test your app to confirm the payment flow


## Prerequisites

### 1. Coinbase Commerce Account
Expand All @@ -29,21 +32,16 @@ By following this guide, you will learn how to:

[Coinbase Developer Platform](https://www.coinbase.com/cloud) (CDP) provides the tools and APIs you need for integration.

### 3. Reown (WalletConnect) Account

[Reown](https://cloud.reown.com/) (formerly WalletConnect) provides a secure way to connect wallets across different devices and platforms.


## Step-by-Step Setup

::::steps

### Step 1: Create a Product in Coinbase Commerce

1. **Log in** to your Coinbase Commerce account.
2. Go to the [product creation page](https://beta.commerce.coinbase.com/products).
3. **Add product details** (name, description, price).
4. Click **Create product**.
1. **Log in** to your Coinbase Commerce account.
2. Go to the [product creation page](https://beta.commerce.coinbase.com/products).
3. **Add product details** (name, description, price).
4. Click **Create product**.
5. Once created, select **View product** and copy the **UUID** from the URL.

![Create product screenshot](/images/onchainkit-tutorials/pay-create-product-details.png)
Expand All @@ -56,109 +54,32 @@ Use the official **OnchainKit app template** to bootstrap your project:

::::code-group

```bash [Bun]
git clone https://github.com/coinbase/onchainkit-app-template.git
cd onchainkit-app-template
bun i
```


```bash [npm]
git clone https://github.com/coinbase/onchainkit-app-template.git
cd onchainkit-app-template
npm install
npm create onchain@latest
```


```bash [Yarn]
git clone https://github.com/coinbase/onchainkit-app-template.git
cd onchainkit-app-template
yarn
```
Follow the prompts to configure your project. You'll be asked to provide a project name, add your CDP Client API key, and choose to share feedback with the OnchainKit team.

::::

### Step 3: Configure Environment Variables

In the project folder, open (or create) your `.env` file and add:

```bash
NEXT_PUBLIC_WC_PROJECT_ID=
NEXT_TELEMETRY_DISABLED=1
```bash [.env]
NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=
NEXT_PUBLIC_ONCHAINKIT_API_KEY=
NEXT_PUBLIC_PRODUCT_ID=
```

> **Note**:
> - `NEXT_PUBLIC_PRODUCT_ID` should be set to the **UUID** from your Coinbase Commerce product.
> - `NEXT_PUBLIC_ONCHAINKIT_API_KEY` should be your **CDP** API key.
> - `NEXT_PUBLIC_WC_PROJECT_ID` is your Reown (WalletConnect) project ID.

### Step 4: Configure Wagmi for Smart Wallets
> **Note**:
>
> - `NEXT_PUBLIC_PRODUCT_ID` should be set to the **UUID** from your Coinbase Commerce product.
> - `NEXT_PUBLIC_ONCHAINKIT_API_KEY` should be your **CDP** API key.

Open your Wagmi configuration file (e.g., `src/app/wagmi.ts` or similar) and **after** your `useMemo()` hook, add:
### Step 4: Implement the Payment Component

```diff
// other Wagmi config
+ coinbaseWallet.preference = 'smartWalletOnly';
```

This ensures Coinbase Wallet only connects to **smart wallets**.

In `src/app/components/OnchainProviders.tsx`, set up **OnchainKitProvider** to use your **CDP** API key and **Base** as the chain:

```typescript
'use client';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { ReactNode } from 'react';
import { base } from 'viem/chains';
import { WagmiProvider } from 'wagmi';
import { useWagmiConfig } from '../wagmi';

type Props = { children: ReactNode };
const queryClient = new QueryClient();

function OnchainProviders({ children }: Props) {
const wagmiConfig = useWagmiConfig();
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<OnchainKitProvider
apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
chain={base}
>
<RainbowKitProvider modalSize='compact'>
{children}
</RainbowKitProvider>
</OnchainKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}

export default OnchainProviders;
```

Finally, update your `Config.ts` (or similar config file) to read from environment variables and match your hosted URL:

```typescript
export const NEXT_PUBLIC_URL =
process.env.NODE_ENV === 'development'
? 'http://localhost:3000'
: 'https://based-jerseys.vercel.app';

export const NEXT_PUBLIC_CDP_API_KEY =
process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY;

export const NEXT_PUBLIC_WC_PROJECT_ID =
process.env.NEXT_PUBLIC_WC_PROJECT_ID;
```

### Step 5: Implement the Payment Component

1. **Open** `src/app/page.tsx` (or similar entry page).
1. **Open** `app/page.tsx` (or similar entry page).
2. **Import** the necessary components:

```typescript
Expand All @@ -168,27 +89,41 @@ export const NEXT_PUBLIC_WC_PROJECT_ID =
const productId = process.env.NEXT_PUBLIC_PRODUCT_ID;
```

3. **Add an image** of your product or service in the `public` folder (e.g., `/public/based-jersey-front.jpeg`).
4. **Display** that image and conditionally render the checkout UI only when a wallet is connected:

```jsx
<section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-zinc-100 px-2 py-4 md:grow">
<div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
<div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
<Image src={'/based-jersey-front.jpeg'} width={250} height={250} alt="jersey" />
</div>
</div>
<div className="mt-6">
{address ? (
<Checkout productId={productId}>
<CheckoutButton coinbaseBranded={true} />
<CheckoutStatus />
</Checkout>
) : (
<WalletWrapper className="w-[450px] max-w-full" text="Sign in to transact" />
)}
</div>
</section>
3. Create a folder to house the image of your product or service in `app/public`
4. **Add an image** of your product or service in the `public` folder (e.g., `app/public/my-pizza.jpeg`).
5. **Display** that image and conditionally render the checkout UI only when a wallet is connected:

```jsx [app/page.tsx]
<section className='flex w-full flex-col items-center justify-center gap-8 px-2 py-4'>
<h1 className='pixel-font text-xl md:text-2xl mb-8 text-center'>
ONCHAIN PIZZA
</h1>
<div className='w-[300px] h-[300px] relative'>
<Image
src='/8bitpizza.png'
fill
style={{ objectFit: 'contain' }}
alt='8-bit pizza'
className='rounded-xl'
priority
/>
</div>
<div className='mt-6'>
{address ? (
<Checkout productId={productId}>
<CheckoutButton coinbaseBranded={true} />
<CheckoutStatus />
</Checkout>
) : (
<Wallet>
<ConnectWallet>
<Avatar className='h-6 w-6' />
<Name />
</ConnectWallet>
</Wallet>
)}
</div>
</section>
```

:::tip
Expand All @@ -201,37 +136,27 @@ Use **conditional rendering** to avoid errors when no wallet address is detected

::::code-group

```bash [Bun]
bun run dev
```

```bash [npm]
npm run dev
```

```bash [Yarn]
yarn dev
```

::::

2. **Visit** `http://localhost:3000` to confirm that the payment button works for your product or service.
2. **Visit** `http://localhost:3000` to confirm that the payment button works for your product or service.
3. **Deploy** with your preferred hosting provider (e.g., Vercel).

![Final product screenshot](/images/onchainkit-tutorials/pay-final-product.png)


## Conclusion

Congratulations! You've successfully **integrated Coinbase Commerce** and **OnchainKit** into your application, enabling crypto payments. By providing this option, you can:

- Eliminate traditional payment fees and chargebacks
- Expand your audience to crypto users worldwide
- Easily scale your offerings for more products and services
- Eliminate traditional payment fees and chargebacks
- Expand your audience to crypto users worldwide
- Easily scale your offerings for more products and services

**Happy building** and enjoy the benefits of a global, decentralized payment system on Base!


[Passkeys]: https://www.coinbase.com/blog/introducing-passkeys-a-safer-and-easier-way-to-sign-in-to-coinbase
[Reown]: https://cloud.reown.com/
[Passkeys]: https://www.coinbase.com/blog/introducing-passkeys-a-safer-and-easier-way-to-sign-in-to-coinbase
[Reown]: https://cloud.reown.com/
[product creation page]: https://beta.commerce.coinbase.com/products
Binary file modified ...ase-docs/docs/public/images/onchainkit-tutorials/pay-create-product-details.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified apps/base-docs/docs/public/images/onchainkit-tutorials/pay-final-product.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.