diff --git a/playground/nextjs-app-router/app/api/createCharge/route.ts b/playground/nextjs-app-router/app/api/createCharge/route.ts
new file mode 100644
index 0000000000..0df2a06317
--- /dev/null
+++ b/playground/nextjs-app-router/app/api/createCharge/route.ts
@@ -0,0 +1,37 @@
+import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
+import axios from 'axios';
+import { NextResponse } from 'next/server';
+
+type CommerceCharge = {
+  data: {
+    id: string;
+  };
+};
+
+export async function POST() {
+  // Generates a chargeId
+  try {
+    const response = await axios.post<CommerceCharge>(
+      'https://api.commerce.coinbase.com/charges/',
+      {
+        name: 'Test Charge',
+        description: 'Test Charge Description',
+        pricing_type: 'fixed_price',
+        local_price: {
+          amount: '0.01',
+          currency: 'USD',
+        },
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CC-Api-Key': ENVIRONMENT_VARIABLES[ENVIRONMENT.COMMERCE_API_KEY],
+        },
+      },
+    );
+    return NextResponse.json({ id: response.data.data.id }, { status: 200 });
+  } catch (error) {
+    console.error(error);
+  }
+  return NextResponse.json({ status: 500 });
+}
diff --git a/playground/nextjs-app-router/components/OnchainProviders.tsx b/playground/nextjs-app-router/components/OnchainProviders.tsx
index 2959b5245d..25ecc58b52 100644
--- a/playground/nextjs-app-router/components/OnchainProviders.tsx
+++ b/playground/nextjs-app-router/components/OnchainProviders.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 import { http, createConfig } from 'wagmi';
diff --git a/playground/nextjs-app-router/components/demo/Pay.tsx b/playground/nextjs-app-router/components/demo/Pay.tsx
index d570c49ef9..78c6f99107 100644
--- a/playground/nextjs-app-router/components/demo/Pay.tsx
+++ b/playground/nextjs-app-router/components/demo/Pay.tsx
@@ -1,17 +1,43 @@
-import { useContext } from 'react';
+import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Pay, PayButton } from '../../onchainkit/src/pay';
 import { AppContext } from '../AppProvider';
 
 function PayComponent() {
   const { chainId } = useContext(AppContext);
+  const [chargeId, setChargeId] = useState(null);
+
+  const handleOnStatus = useCallback((status) => {
+    console.log('Playground.Pay.onStatus:', status);
+  }, []);
+
+  const createCharge = useCallback(async () => {
+    const res = await fetch(
+      `${ENVIRONMENT_VARIABLES[ENVIRONMENT.API_URL]}/api/createCharge`,
+      {
+        method: 'POST',
+      }
+    );
+    const data = await res.json();
+    console.log('Charge id', data.id);
+    setChargeId(data.id);
+  }, []);
+
+  useEffect(() => {
+    createCharge();
+  }, [createCharge]);
 
   return (
-    <Pay
-      chainId={chainId || 8453}
-      chargeId={'78fad9aa-52d9-4f56-af31-5719e37b1695'}
-    >
-      <PayButton />
-    </Pay>
+    chargeId && (
+      <Pay
+        key={chargeId}
+        chainId={chainId || 8453}
+        chargeId={chargeId}
+        onStatus={handleOnStatus}
+      >
+        <PayButton />
+      </Pay>
+    )
   );
 }
 
diff --git a/playground/nextjs-app-router/lib/constants.ts b/playground/nextjs-app-router/lib/constants.ts
index c3346cf6cb..bbfc01aa5e 100644
--- a/playground/nextjs-app-router/lib/constants.ts
+++ b/playground/nextjs-app-router/lib/constants.ts
@@ -11,6 +11,8 @@ export const deployedContracts: Record<number, { click: Address }> = {
 
 export const ENVIRONMENT = {
   API_KEY: 'API_KEY',
+  API_URL: 'API_URL',
+  COMMERCE_API_KEY: 'COMMERCE_API_KEY',
   ENVIRONMENT: 'ENVIRONMENT',
 } as const;
 
@@ -19,5 +21,10 @@ type EnvironmentKey = (typeof ENVIRONMENT)[keyof typeof ENVIRONMENT];
 export const ENVIRONMENT_VARIABLES: Record<EnvironmentKey, string | undefined> =
   {
     [ENVIRONMENT.API_KEY]: process.env.NEXT_PUBLIC_OCK_API_KEY,
+    [ENVIRONMENT.API_URL]: process.env.NEXT_PUBLIC_VERCEL_URL
+      ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+      : 'http://localhost:3000',
+    [ENVIRONMENT.COMMERCE_API_KEY]:
+      process.env.NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY,
     [ENVIRONMENT.ENVIRONMENT]: process.env.NEXT_PUBLIC_VERCEL_ENV,
   };