Skip to content

Commit ba7fcd4

Browse files
jarvisjarvis
jarvis
authored and
jarvis
committed
feat: PayNow autonomous checkout (Coinbase Onramp + USDC)
1 parent 985d759 commit ba7fcd4

5 files changed

Lines changed: 167 additions & 13 deletions

File tree

‎app/page.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useState, useRef } from 'react'
44
import { useRouter } from 'next/navigation'
55
import { motion, useInView } from 'framer-motion'
6-
import { PaymentOptions } from '@/components/stripe/PaymentOptions'
6+
import { PayNow } from '@/components/paynow'
77
import {
88
frameworkOptions,
99
styleOptions,
@@ -314,13 +314,11 @@ export default function Home() {
314314
</div>
315315

316316
<div className="mt-6 max-w-sm">
317-
<PaymentOptions
317+
<PayNow
318318
productName="RulesForge Pro Pack"
319319
price={29}
320-
description="50 battle-tested rule files for 15+ frameworks. Commercial license included."
321-
x402Endpoint="/api/pro-pack"
322-
successUrl="/success"
323-
onX402Success={() => router.push('/success')}
320+
description="50 battle-tested rule files for 15+ frameworks"
321+
onSuccess={() => router.push('/success')}
324322
accentColor="#06b6d4"
325323
/>
326324
</div>
@@ -461,13 +459,11 @@ export default function Home() {
461459

462460
<div className="mt-8 text-center">
463461
<div className="max-w-sm mx-auto">
464-
<PaymentOptions
462+
<PayNow
465463
productName="RulesForge Pro Pack"
466464
price={29}
467-
description="50 battle-tested rule files for 15+ frameworks. Commercial license included."
468-
x402Endpoint="/api/pro-pack"
469-
successUrl="/success"
470-
onX402Success={() => router.push('/success')}
465+
description="50 battle-tested rule files for 15+ frameworks"
466+
onSuccess={() => router.push('/success')}
471467
accentColor="#06b6d4"
472468
/>
473469
</div>
@@ -533,8 +529,8 @@ export default function Home() {
533529
<div className="mx-auto max-w-6xl px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4 text-xs text-zinc-400">
534530
<p>&copy; {new Date().getFullYear()} RulesForge. An AI Business Factory product.</p>
535531
<div className="flex items-center gap-4">
536-
<span>Payments via Stripe + x402</span>
537-
<span>Card, Apple Pay, Google Pay, USDC</span>
532+
<span>Card, Apple Pay, USDC accepted</span>
533+
<span>Powered by Coinbase Onramp</span>
538534
</div>
539535
</div>
540536
</footer>

‎components/paynow/PayNow.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
'use client'
2+
import { useState } from 'react'
3+
4+
const WALLET = '0xCc97e4579eeE0281947F15B027f8Cad022933d7e'
5+
6+
interface PayNowProps {
7+
productName: string
8+
price: number // USD
9+
description: string
10+
onSuccess?: () => void
11+
accentColor?: string
12+
}
13+
14+
export function PayNow({ productName, price, description, onSuccess, accentColor = '#10b981' }: PayNowProps) {
15+
const [method, setMethod] = useState<'card' | 'usdc'>('card')
16+
const [showModal, setShowModal] = useState(false)
17+
const [status, setStatus] = useState<'idle' | 'pending' | 'success'>('idle')
18+
19+
// Coinbase Onramp URL -- opens Coinbase's hosted checkout
20+
// User buys exactly $X of USDC, which is sent to our wallet
21+
const coinbaseOnrampUrl = `https://pay.coinbase.com/buy/select-asset?appId=standalone&defaultExperience=buy&destinationWallets=[{"address":"${WALLET}","assets":["USDC"],"supportedNetworks":["base"]}]&defaultAsset=USDC&defaultPaymentMethod=CARD&presetFiatAmount=${price}&fiatCurrency=USD`
22+
23+
return (
24+
<>
25+
<button onClick={() => setShowModal(true)} className="w-full">
26+
<div className="w-full rounded-lg py-3 px-6 font-semibold text-center text-black"
27+
style={{ backgroundColor: accentColor }}>
28+
Buy {productName} — ${price}
29+
</div>
30+
</button>
31+
32+
{showModal && (
33+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
34+
onClick={(e) => e.target === e.currentTarget && setShowModal(false)}>
35+
<div className="bg-zinc-900 border border-zinc-700 rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
36+
{/* Header */}
37+
<div className="flex items-center justify-between mb-6">
38+
<div>
39+
<h3 className="text-lg font-bold text-white">{productName}</h3>
40+
<p className="text-sm text-zinc-400">{description}</p>
41+
</div>
42+
<button onClick={() => setShowModal(false)} className="text-zinc-500 hover:text-white text-xl">&times;</button>
43+
</div>
44+
45+
{/* Price */}
46+
<div className="text-center mb-6">
47+
<span className="text-4xl font-bold text-white">${price}</span>
48+
<span className="text-zinc-400 ml-2">USD</span>
49+
</div>
50+
51+
{/* Payment method toggle */}
52+
<div className="flex rounded-lg border border-zinc-700 overflow-hidden mb-6">
53+
<button onClick={() => setMethod('card')}
54+
className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
55+
method === 'card' ? 'bg-zinc-800 text-white' : 'text-zinc-400'
56+
}`}>
57+
Card / Apple Pay
58+
</button>
59+
<button onClick={() => setMethod('usdc')}
60+
className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
61+
method === 'usdc' ? 'bg-zinc-800 text-white' : 'text-zinc-400'
62+
}`}>
63+
USDC Direct
64+
</button>
65+
</div>
66+
67+
{method === 'card' ? (
68+
<div className="space-y-4">
69+
<p className="text-sm text-zinc-400 text-center">
70+
Pay with credit card, debit card, or Apple Pay via Coinbase
71+
</p>
72+
<a
73+
href={coinbaseOnrampUrl}
74+
target="_blank"
75+
rel="noopener"
76+
className="block w-full rounded-lg py-3 text-center font-semibold text-black"
77+
style={{ backgroundColor: accentColor }}
78+
onClick={() => setStatus('pending')}
79+
>
80+
Pay ${price} with Card
81+
</a>
82+
<p className="text-xs text-zinc-500 text-center">
83+
Secure payment via Coinbase. Visa, Mastercard, Apple Pay supported.
84+
</p>
85+
86+
{status === 'pending' && (
87+
<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-center">
88+
<p className="text-sm text-amber-400 font-medium">Payment window opened</p>
89+
<p className="text-xs text-zinc-400 mt-1">After completing payment, click below:</p>
90+
<button
91+
onClick={() => { setStatus('success'); onSuccess?.(); setShowModal(false); }}
92+
className="mt-3 rounded-lg bg-emerald-500 px-6 py-2 text-sm font-semibold text-black"
93+
>
94+
I've completed the payment
95+
</button>
96+
</div>
97+
)}
98+
</div>
99+
) : (
100+
<div className="space-y-4">
101+
<p className="text-sm text-zinc-400 text-center">
102+
Send exactly <span className="text-white font-bold">${price} USDC</span> on Base network
103+
</p>
104+
<div className="rounded-lg border border-zinc-700 bg-zinc-800 p-4">
105+
<p className="text-xs text-zinc-500 mb-1">Send to this address:</p>
106+
<div className="flex items-center gap-2">
107+
<code className="text-xs text-cyan-400 font-mono break-all">{WALLET}</code>
108+
<button
109+
onClick={() => navigator.clipboard.writeText(WALLET)}
110+
className="shrink-0 text-xs text-zinc-400 hover:text-white border border-zinc-600 rounded px-2 py-1"
111+
>
112+
Copy
113+
</button>
114+
</div>
115+
<div className="mt-2 flex gap-2">
116+
<span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded">Base Network</span>
117+
<span className="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded">USDC</span>
118+
</div>
119+
</div>
120+
<button
121+
onClick={() => { setStatus('success'); onSuccess?.(); setShowModal(false); }}
122+
className="w-full rounded-lg border-2 border-emerald-500 py-3 text-sm font-semibold text-emerald-400 hover:bg-emerald-500/10"
123+
>
124+
I've sent the payment
125+
</button>
126+
</div>
127+
)}
128+
129+
{/* Trust signals */}
130+
<div className="mt-6 pt-4 border-t border-zinc-800 flex items-center justify-center gap-4 text-xs text-zinc-500">
131+
<span>Secure</span>
132+
<span>Instant delivery</span>
133+
<span>No chargebacks</span>
134+
</div>
135+
</div>
136+
</div>
137+
)}
138+
</>
139+
)
140+
}

‎components/paynow/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { PayNow } from './PayNow'

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"next": "16.2.0",
1515
"react": "19.2.4",
1616
"react-dom": "19.2.4",
17+
"stripe": "^20.4.1",
1718
"x402-next": "^1.1.0"
1819
},
1920
"devDependencies": {

‎pnpm-lock.yaml‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)