@moneydevkit/nextjs 0.7.0-beta.0 → 0.7.0-beta.10

package/README.md

@@ -21,29 +21,43 @@ moneydevkit checkout library for embedding Lightning-powered payments inside Nex
 'use client'
 
 import { useCheckout } from '@moneydevkit/nextjs'
+import { useState } from 'react'
 
 export default function HomePage() {
-  const { navigate, isNavigating } = useCheckout()
+  const { createCheckout, isLoading } = useCheckout()
+  const [error, setError] = useState(null)
 
-  const handlePurchase = () => {
-    navigate({
-      title: "Describe the purchase shown to the buyer",
+  const handlePurchase = async () => {
+    setError(null)
+
+    const result = await createCheckout({
+      type: 'AMOUNT',      // or 'PRODUCTS' for product-based checkouts
+      title: 'Describe the purchase shown to the buyer',
       description: 'A description of the purchase',
       amount: 500,         // 500 USD cents or Bitcoin sats
       currency: 'USD',     // or 'SAT'
       successUrl: '/checkout/success',
       metadata: {
-        type: 'my_type',
         customField: 'internal reference for this checkout',
         name: 'John Doe'
       }
     })
+
+    if (result.error) {
+      setError(result.error.message)
+      return
+    }
+
+    window.location.href = result.data.checkoutUrl
   }
 
   return (
-    <button onClick={handlePurchase} disabled={isNavigating}>
-      {isNavigating ? 'Creating checkout…' : 'Buy Now'}
-    </button>
+    <div>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button onClick={handlePurchase} disabled={isLoading}>
+        {isLoading ? 'Creating checkout…' : 'Buy Now'}
+      </button>
+    </div>
   )
 }
 ```
@@ -65,7 +79,7 @@ export default function CheckoutPage({ params }) {
 ### 3. Expose the unified Money Dev Kit endpoint
 ```js
 // app/api/mdk/route.js
-export { POST } from '@moneydevkit/nextjs/server/route'
+export { POST } from "@moneydevkit/nextjs/server/route";
 ```
 
 ### 4. Configure Next.js
@@ -82,7 +96,8 @@ You now have a complete Lightning checkout loop: the button creates a session, t
 Collect and store customer information with each checkout. Pass `customer` to pre-fill data and `requireCustomerData` to prompt the user for specific fields:
 
 ```jsx
-navigate({
+const result = await createCheckout({
+  type: 'AMOUNT',
   title: "Premium Plan",
   description: 'Monthly subscription',
   amount: 1000,
@@ -115,7 +130,8 @@ Customers are matched by `email` or `externalId`. When a match is found:
 When your user is already authenticated in your app, pass `externalId` to link checkouts to their account:
 
 ```jsx
-navigate({
+const result = await createCheckout({
+  type: 'AMOUNT',
   title: "Premium Plan",
   description: 'Monthly subscription',
   amount: 1000,
@@ -136,6 +152,57 @@ When `externalId` is provided:
 - Only fields missing from the customer record are requested
 - This prevents authenticated users from being asked for data you already have
 
+## Product Checkouts
+Sell products defined in your Money Dev Kit dashboard using `type: 'PRODUCTS'`:
+
+```jsx
+import { useCheckout, useProducts } from '@moneydevkit/nextjs'
+
+function ProductPage() {
+  const { createCheckout, isLoading } = useCheckout()
+  const { products } = useProducts()
+
+  const handleBuyProduct = async (productId) => {
+    const result = await createCheckout({
+      type: 'PRODUCTS',
+      product: productId,
+      successUrl: '/checkout/success',
+    })
+
+    if (result.error) return
+    window.location.href = result.data.checkoutUrl
+  }
+
+  return (
+    <div>
+      {products?.map(product => (
+        <button key={product.id} onClick={() => handleBuyProduct(product.id)}>
+          Buy {product.name} - ${(product.price?.priceAmount ?? 0) / 100}
+        </button>
+      ))}
+    </div>
+  )
+}
+```
+
+### Checkout Types
+- **`type: 'AMOUNT'`** - For donations, tips, or custom amounts. Requires `amount` field.
+- **`type: 'PRODUCTS'`** - For selling products. Requires `product` field with a product ID. Amount is calculated from product price.
+
+### 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:
+
+```jsx
+// Create a checkout for a product with CUSTOM pricing
+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.
+
 ## Verify successful payments
 When a checkout completes, use `useCheckoutSuccess()` on the success page
 ```tsx

package/dist/hooks/useProducts.d.ts

@@ -0,0 +1 @@
+export { useProducts } from '@moneydevkit/core/client';

package/dist/hooks/useProducts.js

@@ -0,0 +1,3 @@
+'use client';
+export { useProducts } from '@moneydevkit/core/client';
+//# sourceMappingURL=useProducts.js.map

package/dist/hooks/useProducts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProducts.js","sourceRoot":"","sources":["../../src/hooks/useProducts.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export { Checkout } from './components/Checkout';
 export type { CheckoutProps } from './components/Checkout';
 export { useCheckout } from './hooks/useCheckout';
 export { useCheckoutSuccess } from './hooks/useCheckoutSuccess';
+export { useProducts } from './hooks/useProducts';
+export type { MdkError, Result } from '@moneydevkit/core/client';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Checkout } from './components/Checkout';
 export { useCheckout } from './hooks/useCheckout';
 export { useCheckoutSuccess } from './hooks/useCheckoutSuccess';
+export { useProducts } from './hooks/useProducts';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+export { createCheckoutUrl } from '@moneydevkit/core/route';
+export type { CreateCheckoutUrlOptions } from '@moneydevkit/core/route';

package/dist/server/index.js

@@ -0,0 +1,2 @@
+export { createCheckoutUrl } from '@moneydevkit/core/route';
+//# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/server/route.d.ts

@@ -1 +1 @@
-export { POST } from '@moneydevkit/core/route';
+export { POST, GET } from '@moneydevkit/core/route';

package/dist/server/route.js

@@ -1,2 +1,2 @@
-export { POST } from '@moneydevkit/core/route';
+export { POST, GET } from '@moneydevkit/core/route';
 //# sourceMappingURL=route.js.map

package/dist/server/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","sourceRoot":"","sources":["../../src/server/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../../src/server/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneydevkit/nextjs",
-  "version": "0.7.0-beta.0",
+  "version": "0.7.0-beta.10",
   "title": "@moneydevkit/nextjs",
   "description": "moneydevkit checkout components for Next.js.",
   "repository": {
@@ -20,6 +20,11 @@
     },
     "./mdk-styles.css": "./dist/mdk-styles.css",
     "./package.json": "./package.json",
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    },
     "./server/route": {
       "types": "./dist/server/route.d.ts",
       "import": "./dist/server/route.js",
@@ -50,9 +55,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
-    "@moneydevkit/api-contract": "^0.1.13",
-    "@moneydevkit/core": "0.7.0-beta.0",
-    "@moneydevkit/lightning-js": "^0.1.59",
+    "@moneydevkit/api-contract": "^0.1.17",
+    "@moneydevkit/core": "0.7.0-beta.10",
+    "@moneydevkit/lightning-js": "^0.1.60",
     "@orpc/client": "1.3.0",
     "@orpc/contract": "1.3.0",
     "@radix-ui/react-collapsible": "^1.1.11",