feat: dynamically show product checkout buttons

Use useProducts hook to fetch available products and conditionally
render product checkout buttons. Single product button shows product
name, multi-product button appears only when 2+ products exist.
Gracefully falls back to amount-only checkout if no products.

Author: NatElkins

mdk-nextjs-demo/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCheckout } from "@moneydevkit/nextjs";
+import { useCheckout, useProducts } from "@moneydevkit/nextjs";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 
@@ -21,6 +21,7 @@ export default function HomePage() {
   const [customerName, setCustomerName] = useState("Satoshi Nakamoto");
   const [note, setNote] = useState("Fast IBD snapshot with hosted checkout.");
   const { navigate, isNavigating } = useCheckout();
+  const { products, isLoading: productsLoading } = useProducts();
 
   const metadata = useMemo(
     () => ({
@@ -43,6 +44,26 @@ export default function HomePage() {
     });
   };
 
+  const handleProductCheckout = () => {
+    if (products.length === 0) return;
+    navigate({
+      // Single product checkout - uses first available product
+      productId: products[0].id,
+      metadata,
+      checkoutPath: "/checkout",
+    });
+  };
+
+  const handleMultiProductCheckout = () => {
+    if (products.length < 2) return;
+    navigate({
+      // Multiple products checkout - uses first two available products
+      products: [products[0].id, products[1].id],
+      metadata,
+      checkoutPath: "/checkout",
+    });
+  };
+
   return (
     <main className="page">
       <div className="container">
@@ -95,8 +116,30 @@ export default function HomePage() {
                 disabled={isNavigating}
                 data-test="start-checkout"
               >
-                {isNavigating ? "Creating checkout…" : "Launch checkout"}
+                {isNavigating ? "Creating checkout…" : "Launch checkout (Amount)"}
               </button>
+              {products.length >= 1 && (
+                <button
+                  type="button"
+                  className="button"
+                  onClick={handleProductCheckout}
+                  disabled={isNavigating || productsLoading}
+                  style={{ marginTop: "0.5rem", background: "#2563eb" }}
+                >
+                  {isNavigating ? "Creating checkout…" : `Launch checkout (${products[0].name})`}
+                </button>
+              )}
+              {products.length >= 2 && (
+                <button
+                  type="button"
+                  className="button"
+                  onClick={handleMultiProductCheckout}
+                  disabled={isNavigating || productsLoading}
+                  style={{ marginTop: "0.5rem", background: "#7c3aed" }}
+                >
+                  {isNavigating ? "Creating checkout…" : "Launch checkout (2 Products)"}
+                </button>
+              )}
               <p className="hint">
                 We create a checkout session with the values above and redirect to
                 {" /checkout/[id] "} using <code>useCheckout</code>.