@doujins/payments-ui 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -65,12 +65,18 @@ var loadCollectJs = (tokenizationKey) => {
   if (existing) return;
   const script = document.createElement("script");
   script.src = SCRIPT_SRC;
-  script.setAttribute("data-tokenization-key", "8u8B78-23Z347-c2svF3-pbEb7G");
+  script.setAttribute("data-tokenization-key", trimmed);
   script.setAttribute("data-field-ccnumber-placeholder", "0000 0000 0000 0000");
   script.setAttribute("data-field-ccexp-placeholder", "10 / 25");
   script.setAttribute("data-field-cvv-placeholder", "123");
   script.setAttribute("data-variant", "inline");
   script.async = true;
+  script.addEventListener("load", () => {
+    console.log("payments-ui: Collect.js loaded");
+  });
+  script.addEventListener("error", (event) => {
+    console.error("payments-ui: failed to load Collect.js", event);
+  });
   document.head.appendChild(script);
 };
 
@@ -106,20 +112,31 @@ var createApiClient = (paymentConfig, baseUrl, fetcher, resolveAuthToken) => {
     if (token) {
       headers.Authorization = `Bearer ${token}`;
     }
-    const response = await fetcher(url, {
-      method,
-      headers,
-      body: options?.body ? JSON.stringify(options.body) : void 0
-    });
-    if (!response.ok) {
-      const message = await response.text();
-      throw new Error(message || `Request failed with status ${response.status}`);
-    }
-    if (response.status === 204) {
-      return void 0;
+    try {
+      const response = await fetcher(url, {
+        method,
+        headers,
+        body: options?.body ? JSON.stringify(options.body) : void 0
+      });
+      if (!response.ok) {
+        const message = await response.text();
+        console.error("payments-ui: API request failed", {
+          url,
+          method,
+          status: response.status,
+          message
+        });
+        throw new Error(message || `Request failed with status ${response.status}`);
+      }
+      if (response.status === 204) {
+        return void 0;
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("payments-ui: API request error", { url, method, error });
+      throw error;
     }
-    const data = await response.json();
-    return data;
   };
   return {
     request,
@@ -1595,8 +1612,16 @@ var useSolanaDirectPayment = (options) => {
       const balance = balanceInfo?.balance || 0;
       const hasBalanceFlag = hasSufficientBalance(balance, tokenAmount);
       setTokenBalance({ balance, hasBalance: hasBalanceFlag });
+      console.log("payments-ui: Solana wallet balance", {
+        token: selectedToken.symbol,
+        balance,
+        required: tokenAmount
+      });
     } catch (error) {
-      console.error("Failed to fetch token balance:", error);
+      console.error("Failed to fetch token balance:", {
+        token: selectedToken?.symbol,
+        error
+      });
       setTokenBalance({ balance: 0, hasBalance: false });
     } finally {
       setIsBalanceLoading(false);
@@ -1660,30 +1685,49 @@ var useSolanaDirectPayment = (options) => {
       return;
     }
     if (!tokenBalance?.hasBalance) {
+      console.warn("payments-ui: insufficient balance for Solana direct payment", {
+        token: selectedToken.symbol
+      });
       onError("Insufficient balance for this token");
       return;
     }
     try {
       setIsProcessing(true);
       onStart();
+      console.log("payments-ui: initiating Solana direct payment", {
+        priceId,
+        token: selectedToken.symbol
+      });
       const paymentData = await solanaService.generatePayment(
         priceId,
         selectedToken.symbol,
         publicKey.toBase58()
       );
+      console.log("payments-ui: Solana payment intent created", {
+        intentId: paymentData.intent_id
+      });
       const transactionToSign = decodeTransaction(paymentData.transaction);
+      console.log("payments-ui: requesting Solana wallet signature");
       const signedTx = await signWithWallet(transactionToSign);
       const signedSerialized = buffer.Buffer.from(signedTx.serialize()).toString("base64");
       onConfirming();
+      console.log("payments-ui: submitting signed Solana transaction");
       const result = await solanaService.submitPayment(
         signedSerialized,
         priceId,
         paymentData.intent_id,
         `Payment for subscription - ${selectedToken.symbol}`
       );
+      console.log("payments-ui: Solana direct payment confirmed", {
+        transactionId: result.transaction_id
+      });
       onSuccess(result, result.transaction_id);
     } catch (err) {
-      console.error("Payment failed:", err);
+      console.error("Solana direct payment failed:", {
+        priceId,
+        token: selectedToken.symbol,
+        error: err
+      });
       let errorMessage = "Payment failed. Please try again.";
       const message = err instanceof Error ? err.message : typeof err === "string" ? err : "";
       if (message.includes("User rejected")) {
@@ -1775,11 +1819,13 @@ var DirectPayment = ({
 var useSolanaQrPayment = (options) => {
   const { priceId, selectedToken, onSuccess, onError } = options;
   const solanaService = useSolanaService();
+  const tokenSymbol = selectedToken?.symbol ?? null;
   const [intent, setIntent] = React3.useState(null);
   const [qrDataUri, setQrDataUri] = React3.useState(null);
   const [isLoading, setIsLoading] = React3.useState(false);
   const [error, setError] = React3.useState(null);
   const [timeRemaining, setTimeRemaining] = React3.useState(0);
+  const [refreshNonce, setRefreshNonce] = React3.useState(0);
   const pollRef = React3.useRef(null);
   const countdownRef = React3.useRef(null);
   const clearTimers = React3.useCallback(() => {
@@ -1797,27 +1843,41 @@ var useSolanaQrPayment = (options) => {
       clearTimers();
     };
   }, [clearTimers]);
+  const resetState = React3.useCallback(
+    (message) => {
+      clearTimers();
+      setIntent((prev) => prev ? null : prev);
+      setQrDataUri((prev) => prev ? null : prev);
+      setTimeRemaining((prev) => prev !== 0 ? 0 : prev);
+      setError((prev) => {
+        const next = message === void 0 ? null : message;
+        return prev === next ? prev : next;
+      });
+    },
+    [clearTimers]
+  );
   const handleError = React3.useCallback(
     (message, notifyParent = false) => {
+      console.error("[payments-ui] Solana Pay QR error:", message);
       clearTimers();
-      setError(message);
-      setIntent(null);
-      setQrDataUri(null);
-      setTimeRemaining(0);
+      resetState(message);
       if (notifyParent) {
         onError(message);
       }
     },
-    [clearTimers, onError]
+    [clearTimers, onError, resetState]
   );
   const handleSuccess = React3.useCallback(
     (status) => {
       clearTimers();
-      setTimeRemaining(0);
-      setIntent(null);
+      resetState(null);
+      console.log("[payments-ui] Solana Pay QR confirmed", {
+        paymentId: status.payment_id,
+        intentId: status.intent_id
+      });
       onSuccess(status.payment_id, status.transaction || "");
     },
-    [clearTimers, onSuccess]
+    [clearTimers, onSuccess, resetState]
   );
   const pollStatus = React3.useCallback(
     async (reference) => {
@@ -1869,57 +1929,75 @@ var useSolanaQrPayment = (options) => {
       handleError("Unable to render QR code");
     }
   }, [handleError]);
-  const fetchIntent = React3.useCallback(async () => {
-    if (!selectedToken) {
-      setIntent(null);
-      setQrDataUri(null);
-      setError(null);
+  React3.useEffect(() => {
+    let cancelled = false;
+    const generateIntent = async () => {
       clearTimers();
-      setTimeRemaining(0);
-      return;
-    }
-    try {
-      setIsLoading(true);
-      setError(null);
+      if (!tokenSymbol || !priceId) {
+        resetState(null);
+        setIsLoading((prev) => prev ? false : prev);
+        return;
+      }
+      try {
+        setIsLoading(true);
+        setError(null);
+        console.log("[payments-ui] Requesting Solana Pay QR intent", {
+          priceId,
+          token: tokenSymbol
+        });
+        const nextIntent = await solanaService.generateQRCode(
+          priceId,
+          tokenSymbol
+        );
+        if (cancelled) return;
+        setIntent(nextIntent);
+        setTimeRemaining(
+          Math.max(0, Math.floor(nextIntent.expires_at - Date.now() / 1e3))
+        );
+        await renderQr(nextIntent);
+        console.log("[payments-ui] Solana Pay QR ready", {
+          reference: nextIntent.reference
+        });
+        startCountdown(nextIntent.expires_at, nextIntent.reference);
+        pollStatus(nextIntent.reference);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Failed to generate Solana Pay QR intent:", err);
+        const message = err instanceof Error ? err.message : "Unable to create Solana Pay QR code";
+        handleError(message);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+    void generateIntent();
+    return () => {
+      cancelled = true;
       clearTimers();
-      const nextIntent = await solanaService.generateQRCode(
-        priceId,
-        selectedToken.symbol
-      );
-      setIntent(nextIntent);
-      setTimeRemaining(
-        Math.max(0, Math.floor(nextIntent.expires_at - Date.now() / 1e3))
-      );
-      await renderQr(nextIntent);
-      startCountdown(nextIntent.expires_at, nextIntent.reference);
-      pollStatus(nextIntent.reference);
-    } catch (err) {
-      console.error("Failed to generate Solana Pay QR intent:", err);
-      const message = err instanceof Error ? err.message : "Unable to create Solana Pay QR code";
-      handleError(message);
-    } finally {
-      setIsLoading(false);
-    }
+    };
   }, [
     clearTimers,
     handleError,
     pollStatus,
     priceId,
-    selectedToken,
+    renderQr,
+    resetState,
     solanaService,
     startCountdown,
-    renderQr
+    tokenSymbol,
+    refreshNonce
   ]);
-  React3.useEffect(() => {
-    void fetchIntent();
-  }, [fetchIntent]);
+  const refresh = React3.useCallback(() => {
+    setRefreshNonce((value) => value + 1);
+  }, []);
   return {
     intent,
     qrDataUri,
     isLoading,
     error,
     timeRemaining,
-    refresh: fetchIntent
+    refresh
   };
 };
 var QRCodePayment = ({
@@ -2042,11 +2120,15 @@ var useSupportedTokens = () => {
     setIsLoading(true);
     setError(null);
     try {
+      console.log("payments-ui: fetching supported Solana tokens");
       const tokens2 = await solanaService.getSupportedTokens();
       const sortedTokens = [...tokens2].sort(
         (a, b) => a.symbol.localeCompare(b.symbol)
       );
       setTokens(sortedTokens);
+      console.log("payments-ui: loaded supported tokens", {
+        count: sortedTokens.length
+      });
       setLastFetched(Date.now());
       return sortedTokens;
     } catch (error2) {
@@ -2892,7 +2974,10 @@ var usePaymentStatus = (options = {}) => {
           error: err ? `Transaction failed: ${err}` : void 0
         };
       } catch (error2) {
-        console.error("Failed to check transaction status:", error2);
+        console.error("Failed to check transaction status:", {
+          signature,
+          error: error2
+        });
         return {
           signature,
           confirmationStatus: "failed",
@@ -2914,7 +2999,10 @@ var usePaymentStatus = (options = {}) => {
         if (error2?.status === 404) {
           return null;
         }
-        console.error("Failed to check payment status:", error2);
+        console.error("Failed to check payment status:", {
+          purchaseId: id,
+          error: error2
+        });
         return null;
       }
     },
@@ -2977,7 +3065,11 @@ var usePaymentStatus = (options = {}) => {
           return;
         }
       } catch (error2) {
-        console.error("Error monitoring payment:", error2);
+        console.error("Error monitoring payment:", {
+          transactionId,
+          purchaseId,
+          error: error2
+        });
         setRetryCount((prev) => prev + 1);
         if (retryCount >= maxRetries) {
           if (intervalRef.current) {
@@ -3027,6 +3119,11 @@ var usePaymentStatus = (options = {}) => {
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : "Failed to check status";
       setError(errorMessage);
+      console.error("Failed to check payment status:", {
+        transactionId,
+        purchaseId,
+        error: error2
+      });
     } finally {
       setIsLoading(false);
     }