@moneymq/react 0.2.0 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 MoneyMQ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -54,13 +54,17 @@ interface Product {
     name: string;
     description?: string;
 }
+interface BasketItem {
+    /** Product details */
+    product: Product;
+    /** Price details */
+    price: Price;
+    /** Quantity (defaults to 1) */
+    quantity?: number;
+}
 interface PayButtonProps {
-    /** Price ID to fetch details from API */
-    priceId?: string;
-    /** Price object (alternative to priceId) */
-    price?: Price;
-    /** Product object */
-    product?: Product;
+    /** Basket of items to purchase */
+    basket: BasketItem[];
     onSuccess?: (payment: Payment$1) => void;
     onError?: (error: Error) => void;
     variant?: 'solid' | 'outline';
@@ -69,18 +73,32 @@ interface PayButtonProps {
 }
 declare const PayButton: React.ForwardRefExoticComponent<PayButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface LineItem {
+    product: {
+        id: string;
+        name: string;
+        description?: string;
+    };
+    price: {
+        id: string;
+        unit_amount: number;
+        currency: string;
+    };
+    quantity: number;
+    subtotal: number;
+}
 interface PaymentModalProps {
     visible: boolean;
     onClose: () => void;
     amount: number;
     currency: string;
     recipient: string;
-    productName?: string;
+    lineItems?: LineItem[];
     onSuccess?: (signature: string) => void;
     onError?: (error: Error) => void;
     accentColor?: string;
 }
-declare function PaymentModal({ visible, onClose, amount, currency, recipient, productName, onSuccess, onError, accentColor, }: PaymentModalProps): react_jsx_runtime.JSX.Element | null;
+declare function PaymentModal({ visible, onClose, amount, currency, recipient, lineItems, onSuccess, onError, accentColor, }: PaymentModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface Payment {
     id: string;
@@ -96,4 +114,4 @@ interface UsePaymentReturn {
 }
 declare function usePayment(): UsePaymentReturn;
 
-export { type Branding, type MoneyMQClient, MoneyMQProvider, type MoneyMQProviderProps, PayButton, type PayButtonProps, type Payment$1 as Payment, PaymentModal, type PaymentModalProps, type Price, type Product, type SandboxAccount, type UsePaymentReturn, useMoneyMQ, usePayment, useSandbox };
+export { type BasketItem, type Branding, type LineItem, type MoneyMQClient, MoneyMQProvider, type MoneyMQProviderProps, PayButton, type PayButtonProps, type Payment$1 as Payment, PaymentModal, type PaymentModalProps, type Price, type Product, type SandboxAccount, type UsePaymentReturn, useMoneyMQ, usePayment, useSandbox };

package/dist/index.d.ts

@@ -54,13 +54,17 @@ interface Product {
     name: string;
     description?: string;
 }
+interface BasketItem {
+    /** Product details */
+    product: Product;
+    /** Price details */
+    price: Price;
+    /** Quantity (defaults to 1) */
+    quantity?: number;
+}
 interface PayButtonProps {
-    /** Price ID to fetch details from API */
-    priceId?: string;
-    /** Price object (alternative to priceId) */
-    price?: Price;
-    /** Product object */
-    product?: Product;
+    /** Basket of items to purchase */
+    basket: BasketItem[];
     onSuccess?: (payment: Payment$1) => void;
     onError?: (error: Error) => void;
     variant?: 'solid' | 'outline';
@@ -69,18 +73,32 @@ interface PayButtonProps {
 }
 declare const PayButton: React.ForwardRefExoticComponent<PayButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface LineItem {
+    product: {
+        id: string;
+        name: string;
+        description?: string;
+    };
+    price: {
+        id: string;
+        unit_amount: number;
+        currency: string;
+    };
+    quantity: number;
+    subtotal: number;
+}
 interface PaymentModalProps {
     visible: boolean;
     onClose: () => void;
     amount: number;
     currency: string;
     recipient: string;
-    productName?: string;
+    lineItems?: LineItem[];
     onSuccess?: (signature: string) => void;
     onError?: (error: Error) => void;
     accentColor?: string;
 }
-declare function PaymentModal({ visible, onClose, amount, currency, recipient, productName, onSuccess, onError, accentColor, }: PaymentModalProps): react_jsx_runtime.JSX.Element | null;
+declare function PaymentModal({ visible, onClose, amount, currency, recipient, lineItems, onSuccess, onError, accentColor, }: PaymentModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface Payment {
     id: string;
@@ -96,4 +114,4 @@ interface UsePaymentReturn {
 }
 declare function usePayment(): UsePaymentReturn;
 
-export { type Branding, type MoneyMQClient, MoneyMQProvider, type MoneyMQProviderProps, PayButton, type PayButtonProps, type Payment$1 as Payment, PaymentModal, type PaymentModalProps, type Price, type Product, type SandboxAccount, type UsePaymentReturn, useMoneyMQ, usePayment, useSandbox };
+export { type BasketItem, type Branding, type LineItem, type MoneyMQClient, MoneyMQProvider, type MoneyMQProviderProps, PayButton, type PayButtonProps, type Payment$1 as Payment, PaymentModal, type PaymentModalProps, type Price, type Product, type SandboxAccount, type UsePaymentReturn, useMoneyMQ, usePayment, useSandbox };

package/dist/index.js

@@ -436,7 +436,7 @@ function MoneyMQProvider({
 }
 
 // src/pay-button.tsx
-var import_react6 = require("react");
+var import_react6 = __toESM(require("react"));
 
 // src/payment-modal.tsx
 var import_react4 = require("react");
@@ -522,8 +522,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",
@@ -532,7 +533,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
@@ -563,7 +564,7 @@ function PaymentModal({
   amount,
   currency,
   recipient,
-  productName,
+  lineItems,
   onSuccess,
   onError,
   accentColor = "#ec4899"
@@ -661,7 +662,7 @@ function PaymentModal({
           recipient,
           senderAddress,
           secretKeyHex,
-          productName
+          lineItems
         );
         setIsSending(false);
         onSuccess?.(paymentId);
@@ -709,7 +710,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__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
@@ -1198,7 +1199,38 @@ function PaymentModal({
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "1rem" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: productName ? `Pay ${productName}` : "Total" }),
+                      lineItems && lineItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: "0.75rem" }, children: lineItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            padding: "0.5rem 0",
+                            borderBottom: index < lineItems.length - 1 ? "1px solid #3a3a3c" : "none"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1 }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.875rem", color: "#fff", fontWeight: 500 }, children: item.product.name }),
+                              item.quantity > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: "Total" }),
                       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "2rem", fontWeight: 600, color: "#fff" }, children: amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }),
@@ -1367,9 +1399,7 @@ var outlineStyle = {
 };
 var PayButton = (0, import_react6.forwardRef)(
   function PayButton2({
-    priceId,
-    price: priceObject,
-    product: productObject,
+    basket,
     onSuccess,
     onError,
     variant = "solid",
@@ -1379,18 +1409,35 @@ var PayButton = (0, import_react6.forwardRef)(
     const client = useMoneyMQ();
     const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
     const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
-    const hasPriceObject = priceObject !== void 0;
-    const [isLoading, setIsLoading] = (0, import_react6.useState)(!hasPriceObject);
+    const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
     const [error, setError] = (0, import_react6.useState)(null);
-    const [amount, setAmount] = (0, import_react6.useState)(hasPriceObject ? priceObject.unit_amount / 100 : 0);
-    const [currency, setCurrency] = (0, import_react6.useState)(hasPriceObject ? priceObject.currency.toUpperCase() : "USDC");
     const [recipient, setRecipient] = (0, import_react6.useState)("");
-    const [productName, setProductName] = (0, import_react6.useState)(productObject?.name);
+    const { totalAmount, currency, lineItems } = import_react6.default.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]);
     (0, import_react6.useEffect)(() => {
       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) {
@@ -1400,42 +1447,6 @@ var PayButton = (0, import_react6.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";
@@ -1446,7 +1457,7 @@ var PayButton = (0, import_react6.forwardRef)(
         }
       }
       fetchPaymentDetails();
-    }, [priceId, priceObject, productObject, client.config.endpoint, onError, hasPriceObject]);
+    }, [basket, client.config.endpoint, onError]);
     const handleClick = () => {
       if (!isLoading && !error) {
         setIsModalOpen(true);
@@ -1455,7 +1466,7 @@ var PayButton = (0, import_react6.forwardRef)(
     const handlePaymentSuccess = (signature) => {
       const payment = {
         id: `pay_${Date.now()}`,
-        amount,
+        amount: totalAmount,
         currency,
         status: "completed",
         signature
@@ -1491,10 +1502,10 @@ var PayButton = (0, import_react6.forwardRef)(
         {
           visible: isModalOpen,
           onClose: () => setIsModalOpen(false),
-          amount,
+          amount: totalAmount,
           currency,
           recipient,
-          productName,
+          lineItems,
           onSuccess: handlePaymentSuccess,
           onError: handlePaymentError
         }