> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moneydevkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replit (Express + Vite)

> moneydevkit checkout package for Replit (Vite + React + Express)

<Info>
  `@moneydevkit/replit` wires the moneydevkit checkout into a Replit workspace that uses Vite + React on the client and Express on the server.
</Info>

## Install with Replit Agent

Click the button below to install moneydevkit directly in Replit Agent:

[![Install moneydevkit](https://replit.com/badge?caption=Install%20moneydevkit)](https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Im1vbmV5ZGV2a2l0IiwiYmFzZVVybCI6Imh0dHBzOi8vbWNwLm1vbmV5ZGV2a2l0LmNvbS9tY3AifQ==)

Replit Agent will:

* Create an account for you
* Implement moneydevkit for you

**Already have a moneydevkit account?** Use this button instead:

[![Install mdk (with account)](https://replit.com/badge?caption=Install%20mdk%20%28with%20account%29)](https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Im1vbmV5ZGV2a2l0IChhdXRoZW50aWNhdGVkKSIsImJhc2VVcmwiOiJodHRwczovL21jcC5tb25leWRldmtpdC5jb20vbWNwL2FjY291bnQifQ==)

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](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](https://moneydevkit.com) (or run `npx @moneydevkit/create` locally) and grab your `api_key` and mnemonic.
2. **Install the SDK** in your project (Express is a peer dependency):
   ```bash theme={null}
   npm install @moneydevkit/replit express
   ```
3. **Add required environment variables** to `.env` (or Replit Secrets):
   ```env theme={null}
   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:
   ```ts theme={null}
   // 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`:

```ts theme={null}
// 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 (the checkout component pulls in its own CSS; import `@moneydevkit/replit/mdk-styles.css` once globally only if you want to preload it):

```tsx theme={null}
// src/App.tsx
import { useCheckout } from '@moneydevkit/replit'
import { useState } from 'react'

export default function App() {
  const { createCheckout, isLoading } = useCheckout()
  const [error, setError] = useState<string | null>(null)

  const handlePurchase = async () => {
    setError(null)

    const result = await createCheckout({
      type: 'AMOUNT',      // or 'PRODUCTS' for product-based checkouts
      title: 'Purchase title for the buyer',
      description: 'Description of the purchase',
      amount: 500,
      currency: 'USD',
      successUrl: '/checkout/success',
      metadata: { 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>
  )
}
```

Render the hosted checkout page:

```tsx theme={null}
// 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:

```tsx theme={null}
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>

  return <p>Payment confirmed for {metadata?.name ?? '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.

```tsx theme={null}
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](/dashboard/customers) for details on customer matching, returning customers, and custom fields.

## Product Checkouts

Sell products defined in your Money Dev Kit dashboard using `type: 'PRODUCTS'`:

```tsx theme={null}
import { useCheckout, useProducts } from '@moneydevkit/replit'

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

const result = await createCheckout({
  type: 'PRODUCTS',
  product: products[0].id,
  successUrl: '/checkout/success',
})
```

See the full [Products documentation](/dashboard/products) for details on creating products, pricing options, and pay-what-you-want pricing.