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.

​
Prerequisites

  • Next.js 15+ with the App Router enabled
  • Node.js 18 or higher
  • Access to your project’s .env or .env.local files

​
Install the package

npm install @moneydevkit/nextjs

​
Provision credentials with the CLI

Run the onboarding CLI from any project root to mint API keys, webhook secrets, and seed mnemonics. The CLI writes directly to .env.local so the checkout package can consume the values immediately. 
npx @moneydevkit/create

​
Add credentials to your deployment environment

Bring your credentials into your environment variables wherever you’re deploying.

​
(Optional) Configure environment variables manually

Generate credentials from your dashboard at moneydevkit.com and add them to your .env file: 
MDK_ACCESS_TOKEN=your_api_key_here
MDK_WEBHOOK_SECRET=your_webhook_key_here
MDK_MNEMONIC=your_mnemonic_here
If you don’t use @moneydevkit/create you will need to generate MDK_MNEMONIC yourself.
Your mnemonic is the key to your wallet. Do not lose it! create-moneydevkit will automatically backup your mnemonic locally at ~/.mdk. Otherwise you will need to make sure you backup (ideally, write down) your mnemonic and keep it safe.

​
Testing Locally

Right now, @moneydevkit/nextjs relies on webhooks to your website to receive payments, as such you will not be able to test locally unless you use something like ngrok. We will be adding an easy to use sandbox mode for testnet soon. Reach out to us on Discord if you’d like to test using mutinynet.

​
Implementation steps

1

Trigger a checkout from a client component

// app/page.js
"use client";

import { useCheckout } from "@moneydevkit/nextjs";

export default function HomePage() {
  const { navigate, isNavigating } = useCheckout();

  const handlePurchase = () => {
    navigate({
      title: "Describe the purchase shown to the buyer",
      description: "Explain what the buyer receives",
      amount: 500,
      currency: "USD",
      metadata: {
        type: "my_type",
        customField: "internal reference for this checkout",
        successUrl: "/checkout/success",
      },
    });
  };

  return (
    <button onClick={handlePurchase} disabled={isNavigating}>
      {isNavigating ? "Creating checkout…" : "Buy now"}
    </button>
  );
}
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 moneydevkit endpoint

// app/api/mdk/route.js
export { POST } from "@moneydevkit/nextjs/server/route";
4

Enable the Next.js plugin

// next.config.js / next.config.mjs
import withMdkCheckout from "@moneydevkit/nextjs/next-plugin";

export default withMdkCheckout({});