diff --git a/apps/base-docs/docs/pages/use-cases/accept-crypto-payments.mdx b/apps/base-docs/docs/pages/use-cases/accept-crypto-payments.mdx
index be29ea4dcff..c6577b15177 100644
--- a/apps/base-docs/docs/pages/use-cases/accept-crypto-payments.mdx
+++ b/apps/base-docs/docs/pages/use-cases/accept-crypto-payments.mdx
@@ -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.
+
+
## 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
@@ -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.
@@ -56,25 +54,11 @@ 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.
::::
@@ -82,83 +66,20 @@ yarn
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 (
-
-
-
-
- {children}
-
-
-
-
- );
-}
-
-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
@@ -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
-
-
-
- {address ? (
-
-
-
-
- ) : (
-
- )}
-
-
+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]
+
+
+ ONCHAIN PIZZA
+
+
+
+
+
+ {address ? (
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+