Accept Crypto in Next.js & React Apps

Integrate non-custodial multi-chain USDT, USDC, EURC, and SOL checkout into Next.js 14/15 App Router, Server Actions, and Vercel Edge/Node route handlers using @xpayr/node-sdk (v0.2.0) and xpayr-pay-button.js.

Install @xpayr/node-sdk GitHub Source & v1.0.0 Developer Docs

Integration Details

Version 0.2.0
Last Updated 2026-11-11
Compatibility Next.js 13 / 14 / 15 & React 18+
Open-Source Repo v1.0.0 Release
Install @xpayr/node-sdk

How to add XPayr to Next.js in 5 minutes

  1. Run npm install @xpayr/node-sdk in your Next.js repository
  2. Add XPAYR_API_KEY and XPAYR_WEBHOOK_SECRET to your .env.local or Vercel environment
  3. Create a Server Action or /api/checkout route calling xpayr.payments.create()
  4. Verify raw-body HMAC-SHA256 webhooks in app/api/webhooks/xpayr/route.ts

5-Step Next.js App Router Integration

  1. Install the typed TypeScript client with npm install @xpayr/node-sdk.
  2. Configure XPAYR_API_KEY (sk_test_... for preview deployments, sk_live_... for production) in Vercel.
  3. In a Server Action, invoke client.payments.create({ amount, currency: "USDC", network: "base-mainnet", metadata: { userId } }).
  4. Redirect the buyer to session.checkout_url or mount the 1-line xpayr-pay-button.js modal overlay inside your React client component.
  5. In app/api/webhooks/xpayr/route.ts, read await request.text() and verify X-XPayr-Signature with crypto.timingSafeEqual before updating Prisma/Drizzle.

Why Next.js & SaaS teams ship with XPayr

100% TypeScript typed

Autocomplete every session field, chain slug, and webhook payload inside Cursor and VS Code.

Vercel Serverless ready

Zero native binary dependencies — runs cleanly in Next.js Route Handlers and Server Actions.

Modal or hosted UX

Keep users on your domain with xpayr-pay-button.js or redirect to XPayr Dual Checkout.

0.5% flat SaaS billing

Replace 2.9% + FX card fees and 38% global card declines with instant Base/Solana USDC finality.

Built for Modern Full-Stack TypeScript & AI SaaS

Next.js powers the majority of modern AI SaaS startups, developer portals, and headless storefronts. Pairing Next.js App Router with @xpayr/node-sdk and @xpayr/mcp-server lets full-stack TypeScript teams launch global prepaid credit top-ups, subscriptions, and HTTP 402 API paywalls in minutes while keeping 99.5% of revenue non-custodial.

FAQ

Next.js & React Crypto Checkout FAQ

HMAC-SHA256 signatures are computed over the exact raw UTF-8 request body. Always call const rawBody = await req.text() in Next.js App Router before parsing JSON.

Yes. Install npx -y @xpayr/mcp-server in Cursor or Claude Code so your IDE agent has live access to all 21 XPayr tools and OpenAPI 3.1 schemas.

Yes. Point Vercel Preview environments to sk_test_ keys and override ipn_callback_url per session so every PR branch tests webhooks safely.

Yes. Combine @xpayr/node-sdk with @xpayr/extension-kit (/license-kit) to issue ES256 JWT software entitlements.

Ship Next.js crypto checkout in 5 minutes.

Install @xpayr/node-sdk and test end-to-end on Sandbox before Mainnet.

Get Started View All Plugins