azirid-react 0.9.4 → 0.9.7

package/dist/index.cjs

@@ -2256,8 +2256,9 @@ function usePaymentProviders() {
 }
 
 // src/utils/payphone-loader.ts
-var PAYPHONE_CSS_URL = "https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css";
-var PAYPHONE_JS_URL = "https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js";
+var PAYPHONE_CDN = "https://cdn.payphonetodoesposible.com";
+var PAYPHONE_CSS_URL = `${PAYPHONE_CDN}/box/v1.1/payphone-payment-box.css`;
+var PAYPHONE_JS_URL = `${PAYPHONE_CDN}/box/v1.1/payphone-payment-box.js`;
 var loadPromise = null;
 function loadCss(href) {
   if (document.querySelector(`link[href="${href}"]`)) return;
@@ -2275,7 +2276,11 @@ function loadScript(src) {
     const script = document.createElement("script");
     script.src = src;
     script.onload = () => resolve();
-    script.onerror = () => reject(new Error(`Failed to load Payphone SDK: ${src}`));
+    script.onerror = () => reject(
+      new Error(
+        `Failed to load Payphone SDK from ${src}. If your app uses a Content-Security-Policy, add "${PAYPHONE_CDN}" to both script-src and style-src directives.`
+      )
+    );
     document.head.appendChild(script);
   });
 }
@@ -2284,21 +2289,27 @@ function loadPayphoneSdk() {
   loadPromise = (async () => {
     loadCss(PAYPHONE_CSS_URL);
     await loadScript(PAYPHONE_JS_URL);
-  })();
+  })().catch((err) => {
+    loadPromise = null;
+    throw err;
+  });
   return loadPromise;
 }
-function PayphoneModal({ config, successUrl, onClose }) {
-  const [loading, setLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
+function PayphoneWidgetRenderer({
+  config,
+  responseUrl,
+  containerId,
+  onReady,
+  onError
+}) {
   const initialized = react.useRef(false);
   react.useEffect(() => {
     if (initialized.current) return;
     initialized.current = true;
     loadPayphoneSdk().then(() => {
-      setLoading(false);
       requestAnimationFrame(() => {
         if (typeof window.PPaymentButtonBox === "undefined") {
-          setError("Payphone SDK failed to initialize");
+          onError?.(new Error("Payphone SDK failed to initialize"));
           return;
         }
         new window.PPaymentButtonBox({
@@ -2309,19 +2320,30 @@ function PayphoneModal({ config, successUrl, onClose }) {
           currency: config.currency,
           storeId: config.storeId,
           reference: config.reference,
-          responseUrl: successUrl
-        }).render("pp-button-azirid");
+          responseUrl
+        }).render(containerId);
+        onReady?.();
       });
-    }).catch(() => {
-      setLoading(false);
-      setError("Failed to load Payphone payment widget");
+    }).catch((err) => {
+      onError?.(new Error(err instanceof Error ? err.message : "Failed to load Payphone SDK"));
     });
-  }, [config, successUrl]);
+  }, [config, responseUrl, containerId, onReady, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: containerId });
+}
+function PayphoneModal({ config, successUrl, onClose }) {
+  const [error, setError] = react.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyle, children: "Payphone" }),
-    loading && /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "Loading payment widget..." }),
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...messageStyle, color: "#ef4444" }, children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { id: "pp-button-azirid", style: { minHeight: "80px" } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PayphoneWidgetRenderer,
+      {
+        config,
+        responseUrl: successUrl,
+        containerId: "pp-button-azirid",
+        onError: (err) => setError(err.message)
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("p", { style: warningStyle, children: "Do not close this window until the payment is complete." }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: cancelStyle, onClick: onClose, children: "Cancel" })
   ] }) });
@@ -2887,14 +2909,274 @@ function CheckoutButton({
   );
 }
 CheckoutButton.displayName = "CheckoutButton";
+function usePayphoneConfirm(options) {
+  const client = useAccessClient();
+  return reactQuery.useMutation({
+    mutationFn: (params) => client.post(client.paths.payphoneConfirm, params),
+    onSuccess: options?.onSuccess,
+    onError: options?.onError
+  });
+}
 var PROVIDER_LABELS2 = {
+  STRIPE: "Credit/Debit Card",
+  PAYPAL: "PayPal",
+  PAYPHONE: "Payphone",
+  NUVEI: "Nuvei",
+  MANUAL_TRANSFER: "Bank Transfer"
+};
+var PROVIDER_ICONS2 = {
+  STRIPE: "\u{1F4B3}",
+  PAYPAL: "\u{1F17F}\uFE0F",
+  PAYPHONE: "\u{1F4F1}",
+  NUVEI: "\u{1F4B3}",
+  MANUAL_TRANSFER: "\u{1F3E6}"
+};
+var PP_CONTAINER_ID = "pp-paybtn-azirid";
+function usePayButton({
+  intentId,
+  planId,
+  onSuccess,
+  onError
+}) {
+  const [status, setStatus] = react.useState("idle");
+  const [selectedProvider, setSelectedProvider] = react.useState(null);
+  const [checkoutData, setCheckoutData] = react.useState(null);
+  const [payphoneConfig, setPayphoneConfig] = react.useState(null);
+  const [currentError, setCurrentError] = react.useState(null);
+  const payphoneConfirmTriggered = react.useRef(false);
+  const responseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
+  const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
+  const callbackId = params.get("id");
+  const callbackClientTxId = params.get("clientTransactionId");
+  const isPayphoneCallback = !!(callbackId && callbackClientTxId);
+  const {
+    data: providerList,
+    isLoading: providersLoading
+  } = usePaymentProviders();
+  const providers = providerList ?? [];
+  react.useEffect(() => {
+    if (isPayphoneCallback) return;
+    if (providersLoading) {
+      setStatus("loading_providers");
+    } else if (providers.length > 0 && status === "loading_providers") {
+      setStatus("ready");
+    }
+  }, [providersLoading, providers.length, status, isPayphoneCallback]);
+  const { checkout: doCheckout, isPending } = useCheckout({
+    redirectOnSuccess: false,
+    onSuccess: (data) => {
+      setCheckoutData(data);
+      if (data.provider === "PAYPHONE" && data.widgetConfig) {
+        setPayphoneConfig(data.widgetConfig);
+        setStatus("processing");
+        return;
+      }
+      if (data.provider === "MANUAL_TRANSFER") {
+        setStatus("success");
+        onSuccess?.(data);
+        return;
+      }
+      if (data.url) {
+        setStatus("redirecting");
+        window.location.href = data.url;
+        return;
+      }
+      setStatus("success");
+      onSuccess?.(data);
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  const checkout = react.useCallback(
+    (provider) => {
+      setSelectedProvider(provider);
+      setStatus("processing");
+      setCurrentError(null);
+      doCheckout({
+        intentId,
+        planId,
+        provider,
+        successUrl: responseUrl,
+        cancelUrl: responseUrl
+      });
+    },
+    [doCheckout, intentId, planId, responseUrl]
+  );
+  const { mutate: confirmPayphone } = usePayphoneConfirm({
+    onSuccess: (data) => {
+      const isConfirmed = data.status === "confirmed" || data.status === "already_confirmed";
+      setStatus(isConfirmed ? "success" : "error");
+      const response = {
+        provider: "PAYPHONE",
+        ...checkoutData ?? {}
+      };
+      if (isConfirmed) {
+        onSuccess?.(response);
+      } else {
+        onError?.(new Error("Payment was cancelled"));
+      }
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  react.useEffect(() => {
+    if (!isPayphoneCallback || payphoneConfirmTriggered.current) return;
+    payphoneConfirmTriggered.current = true;
+    setSelectedProvider("PAYPHONE");
+    setStatus("processing");
+    confirmPayphone({ id: Number(callbackId), clientTransactionId: callbackClientTxId });
+  }, [isPayphoneCallback, callbackId, callbackClientTxId, confirmPayphone]);
+  const handleSdkError = react.useCallback(
+    (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    },
+    [onError]
+  );
+  const ProviderSelector = react.useMemo(() => {
+    return function ProviderSelectorInner() {
+      if (providers.length === 0 || isPayphoneCallback) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #e5e7eb",
+            borderRadius: "8px",
+            backgroundColor: selectedProvider === p.provider ? "#f3f4f6" : "#fff",
+            cursor: isPending ? "not-allowed" : "pointer",
+            fontSize: "14px",
+            fontWeight: 500,
+            color: "#111827",
+            fontFamily: "inherit"
+          },
+          onClick: () => checkout(p.provider),
+          disabled: isPending,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS2[p.provider] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: PROVIDER_LABELS2[p.provider] })
+          ]
+        },
+        p.provider
+      )) });
+    };
+  }, [providers, selectedProvider, isPending, checkout, isPayphoneCallback]);
+  const TransferDetails = react.useMemo(() => {
+    return function TransferDetailsInner() {
+      if (!checkoutData || checkoutData.provider !== "MANUAL_TRANSFER") return null;
+      const bankDetails = checkoutData.bankDetails;
+      const plan = checkoutData.plan;
+      const intent = checkoutData.intent;
+      const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "16px",
+              backgroundColor: "#f9fafb",
+              borderRadius: "8px",
+              marginBottom: "20px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
+              plan?.name && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
+              intent?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
+            ]
+          }
+        ),
+        bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#111827",
+                marginBottom: "8px"
+              },
+              children: "Bank Details"
+            }
+          ),
+          Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                padding: "6px 0",
+                borderBottom: "1px solid #f3f4f6",
+                fontSize: "13px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
+              ]
+            },
+            key
+          ))
+        ] }),
+        checkoutData.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              backgroundColor: "#eff6ff",
+              borderRadius: "6px",
+              fontSize: "13px",
+              color: "#1e40af",
+              lineHeight: 1.5
+            },
+            children: checkoutData.transferInstructions
+          }
+        )
+      ] });
+    };
+  }, [checkoutData]);
+  const PayphoneWidget = react.useMemo(() => {
+    return function PayphoneWidgetInner() {
+      if (!payphoneConfig || isPayphoneCallback) return null;
+      return PayphoneWidgetRenderer({
+        config: payphoneConfig,
+        responseUrl,
+        containerId: PP_CONTAINER_ID,
+        onError: handleSdkError
+      });
+    };
+  }, [payphoneConfig, responseUrl, isPayphoneCallback, handleSdkError]);
+  return {
+    providers,
+    checkout,
+    ProviderSelector,
+    TransferDetails,
+    PayphoneWidget,
+    status,
+    selectedProvider,
+    checkoutData,
+    isPending,
+    error: currentError
+  };
+}
+var PROVIDER_LABELS3 = {
   STRIPE: { en: "Credit/Debit Card", es: "Tarjeta de cr\xE9dito/d\xE9bito" },
   PAYPAL: { en: "PayPal", es: "PayPal" },
   PAYPHONE: { en: "Payphone", es: "Payphone" },
   NUVEI: { en: "Nuvei", es: "Nuvei" },
   MANUAL_TRANSFER: { en: "Bank Transfer", es: "Transferencia bancaria" }
 };
-var PROVIDER_ICONS2 = {
+var PROVIDER_ICONS3 = {
   STRIPE: "\u{1F4B3}",
   PAYPAL: "\u{1F17F}\uFE0F",
   PAYPHONE: "\u{1F4F1}",
@@ -2967,7 +3249,7 @@ function ProviderModal({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: modalStyles.title, children: labels?.selectPaymentMethod ?? "Select payment method" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => {
-      const label = PROVIDER_LABELS2[p.provider];
+      const label = PROVIDER_LABELS3[p.provider];
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -2976,7 +3258,7 @@ function ProviderModal({
           onClick: () => onSelect(p.provider),
           disabled: isPending,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS2[p.provider] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS3[p.provider] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: label?.en ?? p.provider })
           ]
         },
@@ -3087,20 +3369,23 @@ function PayButton({
   const billing = messages?.billing;
   const [showProviderModal, setShowProviderModal] = react.useState(false);
   const [showTransferModal, setShowTransferModal] = react.useState(false);
-  const [transferData, setTransferData] = react.useState(null);
-  const [payphoneData, setPayphoneData] = react.useState(null);
-  const { data: providers, isLoading: providersLoading } = usePaymentProviders();
-  const { checkout, isPending } = useCheckout({
-    redirectOnSuccess: true,
+  const {
+    providers,
+    checkout,
+    checkoutData,
+    PayphoneWidget,
+    isPending,
+    status
+  } = usePayButton({
+    intentId,
+    planId,
     onSuccess: (data) => {
       if (data.provider === "MANUAL_TRANSFER") {
-        setTransferData(data);
         setShowTransferModal(true);
         setShowProviderModal(false);
         return;
       }
-      if (data.provider === "PAYPHONE" && data.widgetConfig) {
-        setPayphoneData(data);
+      if (data.provider === "PAYPHONE") {
         setShowProviderModal(false);
         return;
       }
@@ -3118,15 +3403,9 @@ function PayButton({
   };
   const doCheckout = (provider) => {
     onProviderSelect?.(provider);
-    checkout({
-      planId,
-      intentId,
-      provider,
-      successUrl,
-      cancelUrl
-    });
+    checkout(provider);
   };
-  const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
+  const isDisabled = disabled || isPending || status === "loading_providers" || !planId && !intentId;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -3160,39 +3439,29 @@ function PayButton({
         labels: billing
       }
     ),
-    showTransferModal && transferData && /* @__PURE__ */ jsxRuntime.jsx(
+    showTransferModal && checkoutData && checkoutData.provider === "MANUAL_TRANSFER" && /* @__PURE__ */ jsxRuntime.jsx(
       TransferModal2,
       {
-        data: transferData,
+        data: checkoutData,
         onClose: () => {
           setShowTransferModal(false);
-          onSuccess?.(transferData);
-          setTransferData(null);
+          onSuccess?.(checkoutData);
         },
         labels: billing
       }
     ),
-    payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
+    status === "processing" && checkoutData?.provider === "PAYPHONE" && checkoutData.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
       PayphoneModal,
       {
-        config: payphoneData.widgetConfig,
+        config: checkoutData.widgetConfig,
         successUrl,
         onClose: () => {
-          onSuccess?.(payphoneData);
-          setPayphoneData(null);
+          onSuccess?.(checkoutData);
         }
       }
     )
   ] });
 }
-function usePayphoneConfirm(options) {
-  const client = useAccessClient();
-  return reactQuery.useMutation({
-    mutationFn: (params) => client.post(client.paths.payphoneConfirm, params),
-    onSuccess: options?.onSuccess,
-    onError: options?.onError
-  });
-}
 function PayphoneCallback({ onSuccess, onError, className, style }) {
   const { mutate, isPending, isSuccess, isError, error, data } = usePayphoneConfirm({
     onSuccess,
@@ -3698,6 +3967,230 @@ function useTransferProofs() {
     queryFn: () => client.get(client.paths.transferProofs)
   });
 }
+var CONTAINER_ID = "pp-checkout-azirid";
+function usePayphoneCheckout({
+  intentId,
+  onSuccess,
+  onError
+}) {
+  const [status, setStatus] = react.useState("idle");
+  const [widgetConfig, setWidgetConfig] = react.useState(null);
+  const [currentError, setCurrentError] = react.useState(null);
+  const checkoutTriggered = react.useRef(false);
+  const confirmTriggered = react.useRef(false);
+  const responseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
+  const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
+  const callbackId = params.get("id");
+  const callbackClientTxId = params.get("clientTransactionId");
+  const isCallback = !!(callbackId && callbackClientTxId);
+  const { checkout } = useCheckout({
+    redirectOnSuccess: false,
+    onSuccess: (data) => {
+      if (data.provider === "PAYPHONE" && data.widgetConfig) {
+        setWidgetConfig(data.widgetConfig);
+        setStatus("ready");
+      }
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  react.useEffect(() => {
+    if (isCallback || checkoutTriggered.current) return;
+    checkoutTriggered.current = true;
+    setStatus("loading");
+    checkout({
+      intentId,
+      provider: "PAYPHONE",
+      successUrl: responseUrl,
+      cancelUrl: responseUrl
+    });
+  }, [checkout, intentId, responseUrl, isCallback]);
+  const { mutate: confirm } = usePayphoneConfirm({
+    onSuccess: (data) => {
+      setStatus(data.status === "confirmed" || data.status === "already_confirmed" ? "confirmed" : "cancelled");
+      onSuccess?.(data);
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  react.useEffect(() => {
+    if (!isCallback || confirmTriggered.current) return;
+    confirmTriggered.current = true;
+    setStatus("confirming");
+    confirm({ id: Number(callbackId), clientTransactionId: callbackClientTxId });
+  }, [isCallback, callbackId, callbackClientTxId, confirm]);
+  const handleSdkError = react.useCallback(
+    (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    },
+    [onError]
+  );
+  const PayphoneWidget = react.useMemo(() => {
+    return function PayphoneWidgetInner() {
+      if (!widgetConfig || isCallback) return null;
+      return PayphoneWidgetRenderer({
+        config: widgetConfig,
+        responseUrl,
+        containerId: CONTAINER_ID,
+        onError: handleSdkError
+      });
+    };
+  }, [widgetConfig, responseUrl, isCallback, handleSdkError]);
+  return { PayphoneWidget, status, intentId, error: currentError };
+}
+function useTransferPayment({
+  intentId,
+  onSuccess,
+  onProofSubmitted,
+  onError
+}) {
+  const [status, setStatus] = react.useState("idle");
+  const [checkoutData, setCheckoutData] = react.useState(null);
+  const [currentError, setCurrentError] = react.useState(null);
+  const checkoutTriggered = react.useRef(false);
+  const responseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
+  const { checkout } = useCheckout({
+    redirectOnSuccess: false,
+    onSuccess: (data) => {
+      setCheckoutData(data);
+      setStatus("ready");
+      onSuccess?.(data);
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  react.useEffect(() => {
+    if (checkoutTriggered.current) return;
+    checkoutTriggered.current = true;
+    setStatus("loading");
+    checkout({
+      intentId,
+      provider: "MANUAL_TRANSFER",
+      successUrl: responseUrl,
+      cancelUrl: responseUrl
+    });
+  }, [checkout, intentId, responseUrl]);
+  const { submit, isPending: isSubmitting } = useSubmitTransferProof({
+    onSuccess: (proof) => {
+      setStatus("submitted");
+      onProofSubmitted?.(proof);
+    },
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
+  const submitProof = react.useCallback(
+    (data) => {
+      if (!checkoutData?.intent) return;
+      setStatus("submitting");
+      setCurrentError(null);
+      submit({
+        planId: checkoutData.intent.id,
+        fileUrl: data.fileUrl,
+        fileName: data.fileName,
+        fileType: data.fileType,
+        amount: data.amount,
+        currency: data.currency,
+        notes: data.notes
+      });
+    },
+    [submit, checkoutData]
+  );
+  const TransferDetails = react.useMemo(() => {
+    return function TransferDetailsInner() {
+      if (!checkoutData) return null;
+      const bankDetails = checkoutData.bankDetails;
+      const plan = checkoutData.plan;
+      const intent = checkoutData.intent;
+      const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "16px",
+              backgroundColor: "#f9fafb",
+              borderRadius: "8px",
+              marginBottom: "20px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
+              plan?.name && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
+              intent?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
+            ]
+          }
+        ),
+        bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#111827",
+                marginBottom: "8px"
+              },
+              children: "Bank Details"
+            }
+          ),
+          Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                padding: "6px 0",
+                borderBottom: "1px solid #f3f4f6",
+                fontSize: "13px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
+              ]
+            },
+            key
+          ))
+        ] }),
+        checkoutData.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              backgroundColor: "#eff6ff",
+              borderRadius: "6px",
+              fontSize: "13px",
+              color: "#1e40af",
+              lineHeight: 1.5
+            },
+            children: checkoutData.transferInstructions
+          }
+        )
+      ] });
+    };
+  }, [checkoutData]);
+  return {
+    TransferDetails,
+    submitProof,
+    status,
+    checkoutData,
+    isSubmitting,
+    error: currentError
+  };
+}
 function useTenants() {
   const client = useAccessClient();
   return reactQuery.useQuery({
@@ -3790,7 +4283,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.9.4";
+var SDK_VERSION = "0.9.7";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;
@@ -3802,6 +4295,7 @@ exports.LoginForm = LoginForm;
 exports.PATHS = PATHS;
 exports.PayButton = PayButton;
 exports.PayphoneCallback = PayphoneCallback;
+exports.PayphoneWidgetRenderer = PayphoneWidgetRenderer;
 exports.PricingTable = PricingTable;
 exports.ReferralCard = ReferralCard;
 exports.ReferralStats = ReferralStats;
@@ -3846,7 +4340,9 @@ exports.useMessages = useMessages;
 exports.usePasskeys = usePasskeys;
 exports.usePasswordReset = usePasswordReset;
 exports.usePasswordToggle = usePasswordToggle;
+exports.usePayButton = usePayButton;
 exports.usePaymentProviders = usePaymentProviders;
+exports.usePayphoneCheckout = usePayphoneCheckout;
 exports.usePayphoneConfirm = usePayphoneConfirm;
 exports.usePlans = usePlans;
 exports.useReferral = useReferral;
@@ -3860,6 +4356,7 @@ exports.useSubscription = useSubscription;
 exports.useSwitchTenant = useSwitchTenant;
 exports.useTenantMembers = useTenantMembers;
 exports.useTenants = useTenants;
+exports.useTransferPayment = useTransferPayment;
 exports.useTransferProofs = useTransferProofs;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map