@moneymq/react 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -395,7 +395,7 @@ function MoneyMQProvider({
 }
 
 // src/pay-button.tsx
-import { forwardRef, useEffect as useEffect3, useState as useState5 } from "react";
+import React5, { forwardRef, useEffect as useEffect3, useState as useState5 } from "react";
 
 // src/payment-modal.tsx
 import { useCallback as useCallback3, useState as useState4 } from "react";
@@ -481,8 +481,9 @@ async function makeRequestWith402Handling(url, method, body, secretKeyHex, rpcUr
   }
   return data;
 }
-async function createSandboxPayment(apiUrl, rpcUrl, amount, currency, recipient, senderAddress, secretKeyHex, productName) {
+async function createSandboxPayment(apiUrl, rpcUrl, amount, currency, recipient, senderAddress, secretKeyHex, lineItems) {
   console.log("[MoneyMQ] Creating sandbox payment...", { amount, currency, recipient, senderAddress });
+  const description = lineItems && lineItems.length > 0 ? `Purchase - ${lineItems.map((item) => item.product.name).join(", ")}` : "Payment";
   const paymentIntent = await makeRequestWith402Handling(
     `${apiUrl}/catalog/v1/payment_intents`,
     "POST",
@@ -491,7 +492,7 @@ async function createSandboxPayment(apiUrl, rpcUrl, amount, currency, recipient,
       // Convert to cents (Stripe-style)
       currency: currency.toLowerCase(),
       customer: senderAddress,
-      description: productName ? `Purchase - ${productName}` : "Payment",
+      description,
       metadata: {
         sender_address: senderAddress,
         recipient_address: recipient
@@ -522,7 +523,7 @@ function PaymentModal({
   amount,
   currency,
   recipient,
-  productName,
+  lineItems,
   onSuccess,
   onError,
   accentColor = "#ec4899"
@@ -620,7 +621,7 @@ function PaymentModal({
           recipient,
           senderAddress,
           secretKeyHex,
-          productName
+          lineItems
         );
         setIsSending(false);
         onSuccess?.(paymentId);
@@ -668,7 +669,7 @@ function PaymentModal({
       setIsSending(false);
       onError?.(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [publicKey, recipient, amount, currency, onSuccess, onError, onClose, selectedPaymentMethod, client.config.endpoint, productName]);
+  }, [publicKey, recipient, amount, currency, onSuccess, onError, onClose, selectedPaymentMethod, client.config.endpoint, lineItems]);
   const canPay = (connected && publicKey || selectedPaymentMethod?.type === "sandbox_account") && recipient && !isSending;
   if (!visible) return null;
   const WalletIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
@@ -1157,7 +1158,38 @@ function PaymentModal({
                   },
                   children: [
                     /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "1rem" }, children: [
-                      /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: productName ? `Pay ${productName}` : "Total" }),
+                      lineItems && lineItems.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginBottom: "0.75rem" }, children: lineItems.map((item, index) => /* @__PURE__ */ jsxs3(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            padding: "0.5rem 0",
+                            borderBottom: index < lineItems.length - 1 ? "1px solid #3a3a3c" : "none"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+                              /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.875rem", color: "#fff", fontWeight: 500 }, children: item.product.name }),
+                              item.quantity > 1 && /* @__PURE__ */ jsxs3("div", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
+                                "Qty: ",
+                                item.quantity,
+                                " \xD7 ",
+                                (item.price.unit_amount / 100).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+                                " ",
+                                item.price.currency.toUpperCase()
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxs3("div", { style: { fontSize: "0.875rem", color: "#fff", fontWeight: 500 }, children: [
+                              item.subtotal.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+                              " ",
+                              item.price.currency.toUpperCase()
+                            ] })
+                          ]
+                        },
+                        item.product.id + "-" + index
+                      )) }),
+                      /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: "Total" }),
                       /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
                         /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
                           /* @__PURE__ */ jsx4("span", { style: { fontSize: "2rem", fontWeight: 600, color: "#fff" }, children: amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }),
@@ -1326,9 +1358,7 @@ var outlineStyle = {
 };
 var PayButton = forwardRef(
   function PayButton2({
-    priceId,
-    price: priceObject,
-    product: productObject,
+    basket,
     onSuccess,
     onError,
     variant = "solid",
@@ -1338,18 +1368,35 @@ var PayButton = forwardRef(
     const client = useMoneyMQ();
     const [isModalOpen, setIsModalOpen] = useState5(false);
     const [isHovered, setIsHovered] = useState5(false);
-    const hasPriceObject = priceObject !== void 0;
-    const [isLoading, setIsLoading] = useState5(!hasPriceObject);
+    const [isLoading, setIsLoading] = useState5(true);
     const [error, setError] = useState5(null);
-    const [amount, setAmount] = useState5(hasPriceObject ? priceObject.unit_amount / 100 : 0);
-    const [currency, setCurrency] = useState5(hasPriceObject ? priceObject.currency.toUpperCase() : "USDC");
     const [recipient, setRecipient] = useState5("");
-    const [productName, setProductName] = useState5(productObject?.name);
+    const { totalAmount, currency, lineItems } = React5.useMemo(() => {
+      if (!basket || basket.length === 0) {
+        return { totalAmount: 0, currency: "USDC", lineItems: [] };
+      }
+      const baseCurrency = basket[0].price.currency.toUpperCase();
+      const items = basket.map((item) => ({
+        product: item.product,
+        price: item.price,
+        quantity: item.quantity ?? 1,
+        subtotal: item.price.unit_amount / 100 * (item.quantity ?? 1)
+      }));
+      const total = items.reduce((sum, item) => sum + item.subtotal, 0);
+      return {
+        totalAmount: total,
+        currency: baseCurrency,
+        lineItems: items
+      };
+    }, [basket]);
     useEffect3(() => {
       async function fetchPaymentDetails() {
         setIsLoading(true);
         setError(null);
         try {
+          if (!basket || basket.length === 0) {
+            throw new Error("Basket is empty");
+          }
           const apiUrl = client.config.endpoint;
           const configResponse = await fetch(`${apiUrl}/config`);
           if (!configResponse.ok) {
@@ -1359,42 +1406,6 @@ var PayButton = forwardRef(
           if (config.x402?.payoutAccount?.address) {
             setRecipient(config.x402.payoutAccount.address);
           }
-          if (hasPriceObject) {
-            setAmount(priceObject.unit_amount / 100);
-            setCurrency(priceObject.currency.toUpperCase());
-            if (productObject) {
-              setProductName(productObject.name);
-            } else if (priceObject.product) {
-              try {
-                const productResponse = await fetch(`${apiUrl}/catalog/v1/products/${priceObject.product}`);
-                if (productResponse.ok) {
-                  const product = await productResponse.json();
-                  setProductName(product.name);
-                }
-              } catch {
-              }
-            }
-          } else if (priceId) {
-            const priceResponse = await fetch(`${apiUrl}/catalog/v1/prices/${priceId}`);
-            if (!priceResponse.ok) {
-              throw new Error(`Failed to fetch price: ${priceResponse.status}`);
-            }
-            const price = await priceResponse.json();
-            setAmount(price.unit_amount / 100);
-            setCurrency(price.currency.toUpperCase());
-            if (price.product) {
-              try {
-                const productResponse = await fetch(`${apiUrl}/catalog/v1/products/${price.product}`);
-                if (productResponse.ok) {
-                  const product = await productResponse.json();
-                  setProductName(product.name);
-                }
-              } catch {
-              }
-            }
-          } else {
-            throw new Error("Either priceId or price object is required");
-          }
         } catch (err) {
           console.error("[PayButton] Error fetching payment details:", err);
           const errorMessage = err instanceof Error ? err.message : "Failed to load payment details";
@@ -1405,7 +1416,7 @@ var PayButton = forwardRef(
         }
       }
       fetchPaymentDetails();
-    }, [priceId, priceObject, productObject, client.config.endpoint, onError, hasPriceObject]);
+    }, [basket, client.config.endpoint, onError]);
     const handleClick = () => {
       if (!isLoading && !error) {
         setIsModalOpen(true);
@@ -1414,7 +1425,7 @@ var PayButton = forwardRef(
     const handlePaymentSuccess = (signature) => {
       const payment = {
         id: `pay_${Date.now()}`,
-        amount,
+        amount: totalAmount,
         currency,
         status: "completed",
         signature
@@ -1450,10 +1461,10 @@ var PayButton = forwardRef(
         {
           visible: isModalOpen,
           onClose: () => setIsModalOpen(false),
-          amount,
+          amount: totalAmount,
           currency,
           recipient,
-          productName,
+          lineItems,
           onSuccess: handlePaymentSuccess,
           onError: handlePaymentError
         }