Products

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

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

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