azirid-react 0.9.4 → 0.9.5

package/README.md

@@ -667,6 +667,54 @@ const { data: proofs } = useTransferProofs()
 // [{ id, status: 'PENDING_REVIEW' | 'APPROVED' | 'REJECTED', ... }]
 ```
 
+### `usePayphoneCheckout`
+
+Hook that returns a **renderable widget component** and **payment status**. Pass an `intentId` and get full control over where the widget renders and how to react to the payment result.
+
+```tsx
+import { usePayphoneCheckout } from 'azirid-react'
+
+function CheckoutPage({ intentId }: { intentId: string }) {
+  const { PayphoneWidget, status, error } = usePayphoneCheckout({
+    intentId,
+    onSuccess: (data) => {
+      // data: { status: 'confirmed' | 'cancelled' | 'already_confirmed', intentId: string }
+      console.log('Payment result:', data.status)
+    },
+    onError: (err) => console.error(err),
+  })
+
+  return (
+    <div>
+      <h1>Pay</h1>
+      <PayphoneWidget />
+      {status === 'loading' && <p>Preparing checkout...</p>}
+      {status === 'confirming' && <p>Confirming payment...</p>}
+      {status === 'confirmed' && <p>Payment confirmed!</p>}
+      {status === 'cancelled' && <p>Payment was cancelled</p>}
+      {status === 'error' && <p>Error: {error?.message}</p>}
+    </div>
+  )
+}
+```
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `intentId` | `string` | **Required.** Payment intent ID |
+| `onSuccess` | `(data) => void` | Called after payment confirmation |
+| `onError` | `(error) => void` | Called on any error |
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `PayphoneWidget` | `() => ReactElement \| null` | Component to render the Payphone widget |
+| `status` | `PayphoneCheckoutStatus` | `'idle' \| 'loading' \| 'ready' \| 'confirming' \| 'confirmed' \| 'cancelled' \| 'error'` |
+| `intentId` | `string` | The intent ID passed in |
+| `error` | `Error \| null` | Error details if status is `'error'` |
+
+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.
+
 ### `usePayphoneConfirm`
 
 Confirm a Payphone payment callback. Used on the Payphone return URL page.
@@ -1564,6 +1612,7 @@ import type {
 | `UsePasswordResetOptions` / `UsePasswordResetReturn`   | Options and return type for `usePasswordReset()`   |
 | `UseCheckoutOptions` / `CheckoutParams`                | Options and params for `useCheckout()`             |
 | `UsePayphoneConfirmOptions` / `PayphoneConfirmParams`  | Options and params for `usePayphoneConfirm()`      |
+| `PayphoneCheckoutProps`                                | Props for `PayphoneCheckout` component              |
 | `SimpleMutationOptions<T>`                             | Options for hooks created via `createMutationHook` |
 | `MutationHookConfig<TData, TInput>`                    | Configuration for `createMutationHook()`           |
 

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,7 +2289,10 @@ 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 }) {
@@ -3237,6 +3245,41 @@ var subtextStyle = {
   color: "#6b7280",
   margin: 0
 };
+function PayphoneWidgetRenderer({
+  config,
+  responseUrl,
+  containerId,
+  onReady,
+  onError
+}) {
+  const initialized = react.useRef(false);
+  react.useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+    loadPayphoneSdk().then(() => {
+      requestAnimationFrame(() => {
+        if (typeof window.PPaymentButtonBox === "undefined") {
+          onError?.(new Error("Payphone SDK failed to initialize"));
+          return;
+        }
+        new window.PPaymentButtonBox({
+          token: config.token,
+          clientTransactionId: config.clientTransactionId,
+          amount: config.amount,
+          amountWithoutTax: config.amountWithoutTax,
+          currency: config.currency,
+          storeId: config.storeId,
+          reference: config.reference,
+          responseUrl
+        }).render(containerId);
+        onReady?.();
+      });
+    }).catch((err) => {
+      onError?.(new Error(err instanceof Error ? err.message : "Failed to load Payphone SDK"));
+    });
+  }, [config, responseUrl, containerId, onReady, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: containerId });
+}
 var statusConfig = {
   ACTIVE: { bg: "#d1fae5", color: "#065f46", label: "Active" },
   TRIALING: { bg: "#dbeafe", color: "#1e40af", label: "Trial" },
@@ -3698,6 +3741,85 @@ 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 useTenants() {
   const client = useAccessClient();
   return reactQuery.useQuery({
@@ -3790,7 +3912,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.9.4";
+var SDK_VERSION = "0.9.5";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;
@@ -3802,6 +3924,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;
@@ -3847,6 +3970,7 @@ exports.usePasskeys = usePasskeys;
 exports.usePasswordReset = usePasswordReset;
 exports.usePasswordToggle = usePasswordToggle;
 exports.usePaymentProviders = usePaymentProviders;
+exports.usePayphoneCheckout = usePayphoneCheckout;
 exports.usePayphoneConfirm = usePayphoneConfirm;
 exports.usePlans = usePlans;
 exports.useReferral = useReferral;