Embed the moneydevkit checkout loop inside your Next.js App Router project
@moneydevkit/nextjs is the moneydevkit checkout SDK for App Router-based Next.js apps. It bundles the client hook, hosted checkout UI, API route handler, and config helpers required to launch Lightning-powered payments within minutes.
// app/page.js'use client'import { useCheckout } from '@moneydevkit/nextjs'import { useState } from 'react'export default function HomePage() { const { createCheckout, isLoading } = useCheckout() const [error, setError] = useState(null) const handlePurchase = async () => { setError(null) const result = await createCheckout({ type: 'AMOUNT', // or 'PRODUCTS' for product-based checkouts title: 'Describe the purchase shown to the buyer', description: 'A description of the purchase', amount: 500, // 500 USD cents or Bitcoin sats currency: 'USD', // or 'SAT' successUrl: '/checkout/success', metadata: { customField: 'internal reference for this checkout', name: 'John Doe' } }) if (result.error) { setError(result.error.message) return } window.location.href = result.data.checkoutUrl } return ( <div> {error && <p style={{ color: 'red' }}>{error}</p>} <button onClick={handlePurchase} disabled={isLoading}> {isLoading ? 'Creating checkout…' : 'Buy Now'} </button> </div> )}
2
Render the hosted checkout page
// app/checkout/[id]/page.js"use client";import { Checkout } from "@moneydevkit/nextjs";import { use } from "react";export default function CheckoutPage({ params }) { const { id } = use(params); return <Checkout id={id} />;}
3
Expose the unified Money Dev Kit endpoint
// app/api/mdk/route.jsexport { POST } from '@moneydevkit/nextjs/server/route'
4
Configure Next.js
// next.config.js / next.config.mjsimport withMdkCheckout from '@moneydevkit/nextjs/next-plugin'export default withMdkCheckout({})
You now have a complete Lightning checkout loop: the button creates a session, the dynamic route renders it, and the webhook endpoint signals your Lightning node to claim paid invoices.
When a checkout completes, use useCheckoutSuccess() on the success page.
'use client'import { useCheckoutSuccess } from '@moneydevkit/nextjs'export default function SuccessPage() { const { isCheckoutPaidLoading, isCheckoutPaid, metadata } = useCheckoutSuccess() if (isCheckoutPaidLoading || isCheckoutPaid === null) { return <p>Verifying payment…</p> } if (!isCheckoutPaid) { return <p>Payment has not been confirmed.</p> } // We set 'name' when calling createCheckout(), and it's accessible here on the success page. console.log('Customer name:', metadata?.name) // "John Doe" return ( <div> <p>Payment confirmed. Enjoy your purchase!</p> </div> )}