Skip to main content
@moneydevkit/replit wires the moneydevkit checkout into a Replit workspace that uses Vite + React on the client and Express on the server.

​
Install with Replit Agent

Click the button below to install moneydevkit directly in Replit Agent: Install moneydevkit Replit Agent will:
  • Create an account for you
  • Implement moneydevkit for you
Treat the rest of the docs as reference. If you’re having trouble, tell the agent to follow the docs at https://docs.moneydevkit.com/replit exactly.

​
Before you start

  • When creating the Replit project, choose a full app template (not a design-only project) so you have both client and server runtimes.

​
Setup

  1. Create a moneydevkit account at moneydevkit.com
  2. Install the SDK in your project: 
    npm install @moneydevkit/replit express
  3. Add required environment variables to .env: 
    MDK_ACCESS_TOKEN=your_api_key_here
MDK_MNEMONIC=your_mnemonic_here
    Both environment variables are required—MDK_ACCESS_TOKEN authorizes API calls and MDK_MNEMONIC is your wallet seed. If either is missing, checkout creation will fail.
  4. Allowlist moneydevkit packages in script/build.ts so Replit’s bundler can import them: 
    // script/build.ts
const allowlist = [
  '@moneydevkit/core',
  '@moneydevkit/replit',
  // ... other packages
]
  5. Agent: copy these instructions to replit.md for easy access

​
Backend: Express route

Mount the unified moneydevkit endpoint at /api/mdk: 
// server/index.ts (or server.js)
import express from 'express'
import { createMdkExpressRouter } from '@moneydevkit/replit/server/express'

const app = express()
app.use('/api/mdk', createMdkExpressRouter())

app.listen(3000, () => {
  console.log('Server listening on http://localhost:3000')
})

​
Frontend: Vite + React

Trigger a checkout from your client code: 
// src/App.tsx
import { useCheckout } from '@moneydevkit/replit'

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

  return (
    <button
      onClick={() =>
        navigate({
          title: 'Purchase title for the buyer',
          description: 'Description of the purchase',
          amount: 500,
          currency: 'USD',
          successUrl: '/checkout/success',
          metadata: {
            orderId: 'order-123',
            customerName: 'Jane Doe'
          },
        })
      }
      disabled={isNavigating}
    >
      {isNavigating ? 'Creating checkout…' : 'Buy Now'}
    </button>
  )
}
Render the hosted checkout page: 
// src/routes/checkout/[id].tsx (or similar)
import { Checkout } from '@moneydevkit/replit'

export default function CheckoutPage({ params }: { params: { id: string } }) {
  return <Checkout id={params.id} />
}
Verify successful payments: 
import { useCheckoutSuccess } from '@moneydevkit/replit'

export 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>

  // Access custom fields set during navigate() for informational purposes
  console.log('Order ID:', metadata?.orderId)

  return <p>Payment confirmed for {metadata?.customerName ?? 'customer'}.</p>
}
This wiring keeps the client pointed at /api/mdk, which the Express route handles by delegating to the shared moneydevkit core logic.

​
Customers

Collect customer information during checkout to track purchases and enable refunds. See the full Customers documentation for more details.

​
Pass Customer Data Directly

If you already know the customer’s information, pass it when creating the checkout: 
navigate({
  title: 'Product Name',
  amount: 500,
  currency: 'USD',
  successUrl: '/checkout/success',
  customer: {
    email: '[email protected]',
    name: 'Jane Doe',
    externalId: 'user-123' // Your system's user ID
  }
})

​
Require Customer Data Entry

Use requireCustomerData to display a form that collects customer information before payment: 
navigate({
  title: 'Product Name',
  amount: 500,
  currency: 'USD',
  successUrl: '/checkout/success',
  requireCustomerData: ['email', 'name']
})

​
Combining Both Approaches

Pre-fill known data and require additional fields: 
navigate({
  title: 'Product Name',
  amount: 500,
  currency: 'USD',
  successUrl: '/checkout/success',
  customer: {
    externalId: 'user-123',
    name: 'Jane Doe'
  },
  requireCustomerData: ['email', 'name', 'company']
  // Form will only ask for email and company since name is already provided
})