Skip to main content
@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.

Install with AI Coding Tools

Use an AI coding assistant to set up moneydevkit in your project. Choose the option that matches your situation:
Creates a moneydevkit account and implements the SDK for you.Claude Code:
claude mcp add moneydevkit --transport http https://mcp.moneydevkit.com/mcp/
ChatGPT Codex:
codex mcp add moneydevkit --url https://mcp.moneydevkit.com/mcp/

Setup

  1. Create a Money Dev Kit account at moneydevkit.com or run npx @moneydevkit/create to generate credentials locally, then grab your api_key and mnemonic.
  2. Install the SDK in your project:
    npm install @moneydevkit/nextjs
    
  3. Add required secrets to .env (or similar):
    MDK_ACCESS_TOKEN=your_api_key_here
    MDK_MNEMONIC=your_mnemonic_here
    

Quick Start (Next.js App Router)

1

Trigger a checkout from any client component

// 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.js
export { POST } from '@moneydevkit/nextjs/server/route'
4

Configure Next.js

// next.config.js / next.config.mjs
import 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.

Verify successful payments

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>
  )
}

Customers

Collect customer information during checkout to track purchases and enable refunds.
const result = await createCheckout({
  type: 'AMOUNT',
  title: 'Product Name',
  amount: 500,
  currency: 'USD',
  successUrl: '/checkout/success',
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe',
    externalId: 'user-123' // Your system's user ID
  },
  requireCustomerData: ['email', 'name'] // Show form for missing fields
})
See the full Customers documentation for details on customer matching, returning customers, and custom fields.

Product Checkouts

Sell products defined in your Money Dev Kit dashboard using type: 'PRODUCTS':
import { useCheckout, useProducts } from '@moneydevkit/nextjs'

const { createCheckout } = useCheckout()
const { products } = useProducts()

const result = await createCheckout({
  type: 'PRODUCTS',
  product: products[0].id,
  successUrl: '/checkout/success',
})
See the full Products documentation for details on creating products, pricing options, and pay-what-you-want pricing.