Accept USDC Payments in Next.js — A 5-Minute Guide
By Ashutosh Kumar Singh · October 12, 2026 · 5 min read
This tutorial walks through accepting your first USDC payment in a Next.js 15 App Router project. By the end you will have a working checkout flow: your server creates a payment, the customer pays from any wallet, and your webhook confirms it.
Prerequisites
- A FurlPay account and API key (sign up at furlpay.com)
- Node.js 18+ and a Next.js 15 project
- npm install @furlpay/js
Step 1 — Initialise the SDK
Create a server-side utility that initialises the FurlPay client. The API key must stay server-side — never expose it in browser code.
// lib/furlpay.ts
import { FurlPay } from '@furlpay/js';
export const furlpay = new FurlPay({
apiKey: process.env.FURLPAY_API_KEY!,
environment: 'sandbox', // switch to 'production' when ready
});Step 2 — Create a checkout session
Add an API route that creates a Checkout Session. The response includes a url — redirect the customer there.
// app/api/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { furlpay } from '@/lib/furlpay';
export async function POST(req: NextRequest) {
const { amount, orderId } = await req.json();
const session = await furlpay.checkout.createSession({
amount, // minor units — 2500 = $25.00
currency: 'USDC',
merchantId: process.env.FURLPAY_MERCHANT_ID!,
successUrl: `${process.env.NEXT_PUBLIC_URL}/orders/${orderId}/success`,
cancelUrl: `${process.env.NEXT_PUBLIC_URL}/orders/${orderId}`,
metadata: { orderId },
});
return NextResponse.json({ url: session.url });
}Step 3 — Verify the webhook
When the customer pays, FurlPay sends a payment.completed event to your webhook endpoint. Always verify the HMAC signature before trusting it.
// app/api/webhooks/furlpay/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { constructEvent } from '@furlpay/js';
export async function POST(req: NextRequest) {
const body = await req.text();
const sig = req.headers.get('x-furlpay-signature') ?? '';
try {
const event = constructEvent(
body, sig, process.env.FURLPAY_WEBHOOK_SECRET!
);
if (event.type === 'payment.completed') {
// Mark order as paid in your database
console.log(`Payment ${event.data.id} completed`);
}
return NextResponse.json({ received: true });
} catch {
return NextResponse.json(
{ error: 'invalid_signature' }, { status: 401 }
);
}
}Step 4 — Call it from the frontend
// components/CheckoutButton.tsx
'use client';
export function CheckoutButton({ amount, orderId }: {
amount: number; orderId: string;
}) {
async function handleClick() {
const res = await fetch('/api/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount, orderId }),
});
const { url } = await res.json();
window.location.href = url; // redirect to hosted checkout
}
return (
<button onClick={handleClick}>
Pay ${(amount / 100).toFixed(2)} USDC
</button>
);
}That's it
Four files, under 50 lines of application code. The customer pays USDC from any supported wallet on any of 9 chains. FurlPay handles chain detection, confirmation monitoring, and settlement. You receive a verified webhook when funds are settled.
Next steps: read the full SDK reference at docs.furlpay.com/sdks/javascript, or drop in the pre-built <PayButton /> and <CheckoutForm /> React components from @furlpay/react.
Founder & CEO, FurlPay · Software Engineer at Skyhigh Security · NeurIPS 2026 author · Google DeepMind contributor · ex-Quantiphi
Ashutosh is a Software Engineer at Skyhigh Security (previously Quantiphi), working across ML systems and cloud infrastructure. He is a contributor to Google DeepMind and a NeurIPS 2026 author. He is building Furlpay: stablecoin payments, travel booking, and investing in one client — settled on Arbitrum. Pay in USDC, book 2.2M+ stays and flights, and let AI agents pay per-request via x402. Phishing-resistant. Compliance-aware. Zero gas.
Don't miss the next one
Stay ahead of the curve
Get product updates, engineering deep-dives, and security bulletins. No spam — just the signal.