> ## 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.

# Products

> Create and manage products for checkouts in the moneydevkit dashboard

Products are pre-configured items you can sell through moneydevkit. Instead of specifying amount and description for each checkout, you can reference a product by ID and the checkout will use the product's price and details.

## What are Products?

Products let you define reusable items with fixed or variable pricing. When you create a checkout using a product, the checkout automatically uses the product's name, description, and price configuration.

## Products Dashboard

The products page in your [moneydevkit dashboard](https://moneydevkit.com/dashboard/products) displays all your products:

<Frame>
  <img src="https://mintcdn.com/moneydevkit/p_I6McbnzATF57qM/images/products-list.png?fit=max&auto=format&n=p_I6McbnzATF57qM&q=85&s=37fedece219d5f9078106316efd6b65d" alt="Products list in the moneydevkit dashboard" width="3840" height="1936" data-path="images/products-list.png" />
</Frame>

Each product shows:

* **Product name** and description
* **Price** - Fixed amount or "Pay what you want" range
* **Billing** - One-time
* **Created date**
* **Actions** - View details, edit, or delete

## Creating a Product

<Frame>
  <img src="https://mintcdn.com/moneydevkit/p_I6McbnzATF57qM/images/product-create-form.png?fit=max&auto=format&n=p_I6McbnzATF57qM&q=85&s=5dde7f0267f6d377881e2eda7298f4fc" alt="Create product form in moneydevkit dashboard" width="3840" height="1936" data-path="images/product-create-form.png" />
</Frame>

1. Navigate to Products in the dashboard
2. Click the **+** button in the top right
3. Fill in the product details:
   * **Name** - Product name shown to customers
   * **Description** - Brief description of what's included
   * **Price Type** - Fixed price or Pay what you want
   * **Currency** - USD (dollars) or SAT (satoshis)
   * **Price** - Amount (for fixed price products)
4. Click **Create Product**

## Pricing Options

| Type                  | Description             | Use Case                          |
| --------------------- | ----------------------- | --------------------------------- |
| **Fixed price**       | Set specific amount     | Standard products, subscriptions  |
| **Pay what you want** | Customer chooses amount | Donations, tips, pay-what-you-can |

## Product Details

Click any product to view its details in a sidebar:

<Frame>
  <img src="https://mintcdn.com/moneydevkit/p_I6McbnzATF57qM/images/product-detail.png?fit=max&auto=format&n=p_I6McbnzATF57qM&q=85&s=a01c0c353d7008f5013ed962d88a81fc" alt="Product detail sidebar in moneydevkit dashboard" width="3840" height="1936" data-path="images/product-detail.png" />
</Frame>

* **Product ID** - Unique identifier (click to copy)
* **Description** - Product description
* **Billing** - One-time or subscription interval
* **Created/Modified** - Timestamps
* **Pricing** - Price amount, type, and currency

## Using Products in Code

### Fetch Available Products

```tsx theme={null}
import { useProducts } from '@moneydevkit/nextjs'

function ProductList() {
  const { products, isLoading, error } = useProducts()

  if (isLoading) return <p>Loading products...</p>
  if (error) return <p>Error: {error.message}</p>

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}
```

### Create a Product Checkout

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

function BuyProduct() {
  const { createCheckout, isLoading } = useCheckout()
  const { products } = useProducts()

  const handleBuy = async (productId: string) => {
    const result = await createCheckout({
      type: 'PRODUCTS',
      product: productId,
      successUrl: '/checkout/success',
    })

    if (result.error) {
      console.error(result.error.message)
      return
    }

    window.location.href = result.data.checkoutUrl
  }

  return (
    <div>
      {products.map(product => (
        <button
          key={product.id}
          onClick={() => handleBuy(product.id)}
          disabled={isLoading}
        >
          Buy {product.name}
        </button>
      ))}
    </div>
  )
}
```

<Tip>
  When using product checkouts, you don't need to specify `amount` or `currency` - these are automatically pulled from the product's price configuration.
</Tip>

## Checkout Types

| Type               | Description                                   | Required Fields        |
| ------------------ | --------------------------------------------- | ---------------------- |
| `type: 'PRODUCTS'` | Sell products from your dashboard             | `product` (product ID) |
| `type: 'AMOUNT'`   | Dynamic amounts for donations, tips, invoices | `amount`, `currency`   |

<Tip>
  Use products when you have fixed catalog items. Use amount checkouts for dynamic pricing scenarios like invoices or custom quotes.
</Tip>

## Pay What You Want (CUSTOM prices)

Products can have CUSTOM prices that let customers choose their own amount. When a checkout includes a product with a CUSTOM price, the checkout UI automatically shows an amount input field:

```tsx theme={null}
const result = await createCheckout({
  type: 'PRODUCTS',
  product: customPriceProductId,  // Product configured with CUSTOM price in dashboard
  successUrl: '/checkout/success',
})
```

The customer enters their desired amount during checkout. For USD, amounts are in dollars (converted to cents internally). For SAT, amounts are in satoshis.

See the [Replit integration guide](/replit) or [Next.js integration guide](/nextjs) for complete setup instructions.