azirid-react 0.9.8 → 0.10.0

package/README.md

@@ -713,7 +713,9 @@ function CheckoutPage({ intentId }: { intentId: string }) {
 
 The hook handles both phases automatically:
 1. **Widget phase**: Calls checkout API, loads Payphone SDK, widget renders via `<PayphoneWidget />`.
-2. **Confirmation phase**: After Payphone redirects back (same page), detects URL params and confirms the payment.
+2. **Confirmation phase**: After Payphone redirects back to your configured **Response URL** (set in Payphone Developer dashboard), detects `?id=X&clientTransactionId=Y` params and confirms the payment.
+
+> **Important:** The redirect URL after payment is configured in the **Payphone Developer dashboard** (not passed via code). Make sure your Response URL points to the page where `usePayphoneCheckout` or `<PayphoneCallback>` is rendered.
 
 ### `usePayButton`
 
@@ -924,7 +926,7 @@ import { InvoiceList } from 'azirid-react'
 
 #### `PayphoneCallback`
 
-Page component for handling Payphone payment callbacks. Reads `id` and `clientTransactionId` from URL query params automatically.
+Page component for handling Payphone payment callbacks. Reads `id` and `clientTransactionId` from URL query params automatically. Deploy this page at the **Response URL** configured in your Payphone Developer dashboard.
 
 ```tsx
 // app/payphone/callback/page.tsx

package/dist/index.cjs

@@ -165,6 +165,31 @@ function createAccessClient(config, appContext) {
   let refreshToken = ssGet(storageKeyRt);
   let csrfToken = ssGet(storageKeyCsrf);
   let refreshPromise = null;
+  let channel = null;
+  try {
+    if (typeof BroadcastChannel !== "undefined") {
+      channel = new BroadcastChannel("azirid-auth");
+      channel.onmessage = (event) => {
+        if (event.data?.type === "token-refreshed") {
+          accessToken = event.data.accessToken;
+          if (event.data.refreshToken) setRefreshToken(event.data.refreshToken);
+          if (event.data.csrfToken) setCsrfToken(event.data.csrfToken);
+        }
+      };
+    }
+  } catch {
+  }
+  function broadcastTokens() {
+    try {
+      channel?.postMessage({
+        type: "token-refreshed",
+        accessToken,
+        refreshToken,
+        csrfToken
+      });
+    } catch {
+    }
+  }
   function setAccessToken(token) {
     accessToken = token;
   }
@@ -226,6 +251,7 @@ function createAccessClient(config, appContext) {
     const xc = json.xc ?? json.csrfToken;
     if (rt) setRefreshToken(rt);
     if (xc) setCsrfToken(xc);
+    broadcastTokens();
   }
   function refreshTokens(opts) {
     if (opts?.tenantId) {
@@ -775,6 +801,27 @@ function AziridProviderInner({
   }, [client, props.autoBootstrap, updateAccessToken, saveSessionTokens]);
   const silentRefresh = react.useCallback(async () => {
     if (!client.getAccessToken()) return;
+    if (typeof navigator !== "undefined" && "locks" in navigator) {
+      let acquired = false;
+      try {
+        await navigator.locks.request(
+          "azirid-token-refresh",
+          { ifAvailable: true },
+          async (lock) => {
+            if (!lock) return;
+            acquired = true;
+            await client.refreshSession();
+            updateAccessToken(client.getAccessToken());
+          }
+        );
+      } catch (err) {
+        if (acquired && isAuthError(err)) {
+          clearSession();
+          props.onSessionExpired?.();
+        }
+      }
+      return;
+    }
     try {
       await client.refreshSession();
       updateAccessToken(client.getAccessToken());
@@ -785,6 +832,27 @@ function AziridProviderInner({
       }
     }
   }, [client, updateAccessToken, clearSession, props]);
+  react.useEffect(() => {
+    let channel = null;
+    try {
+      if (typeof BroadcastChannel !== "undefined") {
+        channel = new BroadcastChannel("azirid-auth");
+        channel.onmessage = (event) => {
+          if (event.data?.type === "token-refreshed" && event.data.accessToken) {
+            client.setAccessToken(event.data.accessToken);
+            updateAccessToken(event.data.accessToken);
+          }
+        };
+      }
+    } catch {
+    }
+    return () => {
+      try {
+        channel?.close();
+      } catch {
+      }
+    };
+  }, [client, updateAccessToken]);
   react.useEffect(() => {
     const intervalMs = props.refreshInterval ?? 5e4;
     if (intervalMs <= 0) return;
@@ -2297,7 +2365,6 @@ function loadPayphoneSdk() {
 }
 function PayphoneWidgetRenderer({
   config,
-  responseUrl,
   containerId,
   onReady,
   onError
@@ -2319,18 +2386,17 @@ function PayphoneWidgetRenderer({
           amountWithoutTax: config.amountWithoutTax,
           currency: config.currency,
           storeId: config.storeId,
-          reference: config.reference,
-          responseUrl
+          reference: config.reference
         }).render(containerId);
         onReady?.();
       });
     }).catch((err) => {
       onError?.(new Error(err instanceof Error ? err.message : "Failed to load Payphone SDK"));
     });
-  }, [config, responseUrl, containerId, onReady, onError]);
+  }, [config, containerId, onReady, onError]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { id: containerId });
 }
-function PayphoneModal({ config, successUrl, onClose }) {
+function PayphoneModal({ config, 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" }),
@@ -2339,7 +2405,6 @@ function PayphoneModal({ config, successUrl, onClose }) {
       PayphoneWidgetRenderer,
       {
         config,
-        responseUrl: successUrl,
         containerId: "pp-button-azirid",
         onError: (err) => setError(err.message)
       }
@@ -2864,7 +2929,6 @@ function PricingTable({
       PayphoneModal,
       {
         config: payphoneData.widgetConfig,
-        successUrl,
         onClose: () => setPayphoneData(null)
       }
     )
@@ -2944,7 +3008,6 @@ function usePayButton({
   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");
@@ -2995,15 +3058,16 @@ function usePayButton({
       setSelectedProvider(provider);
       setStatus("processing");
       setCurrentError(null);
+      const currentUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
       doCheckout({
         intentId,
         planId,
         provider,
-        successUrl: responseUrl,
-        cancelUrl: responseUrl
+        successUrl: currentUrl,
+        cancelUrl: currentUrl
       });
     },
-    [doCheckout, intentId, planId, responseUrl]
+    [doCheckout, intentId, planId]
   );
   const { mutate: confirmPayphone } = usePayphoneConfirm({
     onSuccess: (data) => {
@@ -3150,12 +3214,11 @@ function usePayButton({
       if (!payphoneConfig || isPayphoneCallback) return null;
       return PayphoneWidgetRenderer({
         config: payphoneConfig,
-        responseUrl,
         containerId: PP_CONTAINER_ID,
         onError: handleSdkError
       });
     };
-  }, [payphoneConfig, responseUrl, isPayphoneCallback, handleSdkError]);
+  }, [payphoneConfig, isPayphoneCallback, handleSdkError]);
   return {
     providers,
     checkout,
@@ -3454,7 +3517,6 @@ function PayButton({
       PayphoneModal,
       {
         config: checkoutData.widgetConfig,
-        successUrl,
         onClose: () => {
           onSuccess?.(checkoutData);
         }
@@ -3978,7 +4040,6 @@ function usePayphoneCheckout({
   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");
@@ -4004,10 +4065,10 @@ function usePayphoneCheckout({
     checkout({
       intentId,
       provider: "PAYPHONE",
-      successUrl: responseUrl,
-      cancelUrl: responseUrl
+      successUrl: window.location.href,
+      cancelUrl: window.location.href
     });
-  }, [checkout, intentId, responseUrl, isCallback]);
+  }, [checkout, intentId, isCallback]);
   const { mutate: confirm } = usePayphoneConfirm({
     onSuccess: (data) => {
       setStatus(data.status === "confirmed" || data.status === "already_confirmed" ? "confirmed" : "cancelled");
@@ -4038,12 +4099,11 @@ function usePayphoneCheckout({
       if (!widgetConfig || isCallback) return null;
       return PayphoneWidgetRenderer({
         config: widgetConfig,
-        responseUrl,
         containerId: CONTAINER_ID,
         onError: handleSdkError
       });
     };
-  }, [widgetConfig, responseUrl, isCallback, handleSdkError]);
+  }, [widgetConfig, isCallback, handleSdkError]);
   return { PayphoneWidget, status, intentId, error: currentError };
 }
 function useTransferPayment({
@@ -4283,7 +4343,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.9.8";
+var SDK_VERSION = "0.10.0";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;