azirid-react 0.9.3 → 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.
@@ -689,7 +737,6 @@ Drop-in pricing grid with checkout flow integrated.
 
 ```tsx
 import { PricingTable } from 'azirid-react'
-
 ;<PricingTable
   successUrl={`${window.location.origin}/billing?success=true`}
   cancelUrl={`${window.location.origin}/billing`}
@@ -712,7 +759,6 @@ Flexible payment button with provider selection modal. Supports both plans and p
 
 ```tsx
 import { PayButton } from 'azirid-react'
-
 ;<PayButton
   planId="plan_123"
   successUrl="/billing?success=true"
@@ -725,14 +771,15 @@ import { PayButton } from 'azirid-react'
 
 | Prop         | Type              | Default | Description                                   |
 | ------------ | ----------------- | ------- | --------------------------------------------- |
-| `planId`     | `string`          | —       | Plan to purchase (use `planId` or `intentId`) |
-| `intentId`   | `string`          | —       | Payment intent ID (alternative to `planId`)   |
-| `successUrl` | `string`          | —       | **Required.** Redirect URL after success      |
-| `cancelUrl`  | `string`          | —       | **Required.** Redirect URL on cancel          |
-| `onSuccess`  | `(data) => void`  | —       | Called on successful checkout                 |
-| `onError`    | `(error) => void` | —       | Called on error                               |
-| `children`   | `ReactNode`       | —       | Button label                                  |
-| `disabled`   | `boolean`         | —       | Disable the button                            |
+| `planId`     | `string`          | —       | Plan to purchase (use `planId` or `intentId`)       |
+| `intentId`   | `string`          | —       | Payment intent ID (alternative to `planId`)         |
+| `successUrl` | `string`          | —       | **Required.** Redirect URL after success            |
+| `cancelUrl`  | `string`          | —       | **Required.** Redirect URL on cancel                |
+| `onSuccess`        | `(data) => void`              | —       | Called on successful checkout. For `MANUAL_TRANSFER` and `PAYPHONE`, deferred until the user closes the modal |
+| `onError`          | `(error) => void`             | —       | Called on error                               |
+| `onProviderSelect` | `(provider: string) => void`  | —       | Called when a provider is selected            |
+| `children`         | `ReactNode`                   | —       | Button label                                  |
+| `disabled`         | `boolean`                     | —       | Disable the button                            |
 
 #### `CheckoutButton`
 
@@ -740,7 +787,6 @@ Simple checkout button for a specific plan.
 
 ```tsx
 import { CheckoutButton } from 'azirid-react'
-
 ;<CheckoutButton planId="plan_123" successUrl="/billing?success=true" cancelUrl="/billing">
   Subscribe
 </CheckoutButton>
@@ -752,7 +798,6 @@ Color-coded badge showing the current subscription status.
 
 ```tsx
 import { SubscriptionBadge } from 'azirid-react'
-
 ;<SubscriptionBadge />
 // Renders: "Pro · Active" (green), "Free · Trialing" (blue), etc.
 ```
@@ -765,7 +810,6 @@ Table of invoices with status badges and download links.
 
 ```tsx
 import { InvoiceList } from 'azirid-react'
-
 ;<InvoiceList />
 ```
 
@@ -934,7 +978,6 @@ Card displaying the referral link with copy button and stats.
 
 ```tsx
 import { ReferralCard } from 'azirid-react'
-
 ;<ReferralCard
   title="Refer a Friend"
   description="Share your link and earn rewards for each signup."
@@ -953,7 +996,6 @@ Table showing referral history with status and reward badges.
 
 ```tsx
 import { ReferralStats } from 'azirid-react'
-
 ;<ReferralStats />
 ```
 
@@ -1424,7 +1466,6 @@ Tailwind class merge utility (powered by `clsx` + `tailwind-merge`).
 
 ```tsx
 import { cn } from 'azirid-react'
-
 ;<div className={cn('bg-white p-4', isActive && 'bg-blue-500')} />
 ```
 
@@ -1571,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

@@ -679,10 +679,7 @@ function AziridProviderInner({
     () => resolveMessages(props.locale ?? "es", props.messages),
     [props.locale, props.messages]
   );
-  const brandingValue = react.useMemo(
-    () => ({ branding, messages }),
-    [branding, messages]
-  );
+  const brandingValue = react.useMemo(() => ({ branding, messages }), [branding, messages]);
   const isProxyMode = !props.apiUrl;
   const syncUrl = react.useMemo(() => {
     if (props.sessionSyncUrl === false) return null;
@@ -807,13 +804,7 @@ function AziridProviderInner({
     (data) => data.at ?? data.accessToken,
     []
   );
-  const {
-    loginMutation,
-    signupMutation,
-    logoutMutation,
-    refreshFn,
-    switchTenantFn
-  } = useAuthMutations({
+  const { loginMutation, signupMutation, logoutMutation, refreshFn, switchTenantFn } = useAuthMutations({
     client,
     props,
     setUser,
@@ -1874,10 +1865,7 @@ function useReferral() {
     }
     return false;
   }, [query.data?.referralUrl]);
-  return react.useMemo(
-    () => ({ ...query, copyToClipboard }),
-    [query, copyToClipboard]
-  );
+  return react.useMemo(() => ({ ...query, copyToClipboard }), [query, copyToClipboard]);
 }
 var styles = {
   card: {
@@ -2268,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;
@@ -2287,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);
   });
 }
@@ -2296,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 }) {
@@ -2664,16 +2660,12 @@ var intervalLabels2 = {
   YEARLY: "/yr",
   ONE_TIME: ""
 };
-function TransferModal({
-  data,
-  onClose
-}) {
+function TransferModal({ data, onClose }) {
   const bankDetails = data.bankDetails;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Manual Transfer" }),
     /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles5.modalSubtitle, children: [
-      "Transfer the amount below to subscribe to",
-      " ",
+      "Transfer the amount below to subscribe to ",
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: data.plan?.name })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2736,9 +2728,7 @@ function PricingTable({
   const { data: plans, isLoading: plansLoading } = usePlans();
   const { data: subscription } = useSubscription();
   const { data: providers } = usePaymentProviders();
-  const [transferData, setTransferData] = react.useState(
-    null
-  );
+  const [transferData, setTransferData] = react.useState(null);
   const [payphoneData, setPayphoneData] = react.useState(null);
   const [pendingPlan, setPendingPlan] = react.useState(null);
   const [showProviderModal, setShowProviderModal] = react.useState(false);
@@ -2758,8 +2748,7 @@ function PricingTable({
     checkout({ planId, provider, successUrl, cancelUrl });
   };
   const handleSelect = (plan) => {
-    if (subscription?.planId === plan.id && subscription.status === "ACTIVE")
-      return;
+    if (subscription?.planId === plan.id && subscription.status === "ACTIVE") return;
     if (onPlanSelect) {
       onPlanSelect(plan);
       return;
@@ -2831,26 +2820,19 @@ function PricingTable({
   }
   const sortedPlans = plans ? [...plans].sort((a, b) => a.sortOrder - b.sortOrder) : [];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className,
-        style: { ...styles5.grid(columns), ...style },
-        children: sortedPlans.map((plan) => {
-          const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            PricingCard,
-            {
-              plan,
-              isCurrentPlan,
-              isCheckoutPending: checkoutPending,
-              onSelect: handleSelect
-            },
-            plan.id
-          );
-        })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles5.grid(columns), ...style }, children: sortedPlans.map((plan) => {
+      const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PricingCard,
+        {
+          plan,
+          isCurrentPlan,
+          isCheckoutPending: checkoutPending,
+          onSelect: handleSelect
+        },
+        plan.id
+      );
+    }) }),
     showProviderModal && pendingPlan && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
       ProviderSelectModal,
       {
@@ -2863,13 +2845,7 @@ function PricingTable({
         }
       }
     ),
-    transferData && /* @__PURE__ */ jsxRuntime.jsx(
-      TransferModal,
-      {
-        data: transferData,
-        onClose: () => setTransferData(null)
-      }
-    ),
+    transferData && /* @__PURE__ */ jsxRuntime.jsx(TransferModal, { data: transferData, onClose: () => setTransferData(null) }),
     payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
       PayphoneModal,
       {
@@ -3018,11 +2994,7 @@ function ProviderModal({
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: labels?.cancel ?? "Cancel" })
   ] }) });
 }
-function TransferModal2({
-  data,
-  onClose,
-  labels
-}) {
+function TransferModal2({ data, onClose, labels }) {
   const bankDetails = data.bankDetails;
   const plan = data.plan;
   const intent = data.intent;
@@ -3133,9 +3105,12 @@ function PayButton({
         setTransferData(data);
         setShowTransferModal(true);
         setShowProviderModal(false);
-      } else if (data.provider === "PAYPHONE" && data.widgetConfig) {
+        return;
+      }
+      if (data.provider === "PAYPHONE" && data.widgetConfig) {
         setPayphoneData(data);
         setShowProviderModal(false);
+        return;
       }
       onSuccess?.(data);
     },
@@ -3180,7 +3155,7 @@ function PayButton({
         },
         onClick: handleClick,
         disabled: isDisabled,
-        children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
+        children: isPending ? billing?.processing ?? "Processing..." : children ?? billing?.pay ?? "Pay"
       }
     ),
     showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3199,6 +3174,7 @@ function PayButton({
         data: transferData,
         onClose: () => {
           setShowTransferModal(false);
+          onSuccess?.(transferData);
           setTransferData(null);
         },
         labels: billing
@@ -3209,7 +3185,10 @@ function PayButton({
       {
         config: payphoneData.widgetConfig,
         successUrl,
-        onClose: () => setPayphoneData(null)
+        onClose: () => {
+          onSuccess?.(payphoneData);
+          setPayphoneData(null);
+        }
       }
     )
   ] });
@@ -3222,12 +3201,7 @@ function usePayphoneConfirm(options) {
     onError: options?.onError
   });
 }
-function PayphoneCallback({
-  onSuccess,
-  onError,
-  className,
-  style
-}) {
+function PayphoneCallback({ onSuccess, onError, className, style }) {
   const { mutate, isPending, isSuccess, isError, error, data } = usePayphoneConfirm({
     onSuccess,
     onError
@@ -3271,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" },
@@ -3732,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({
@@ -3824,7 +3912,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.9.3";
+var SDK_VERSION = "0.9.5";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;
@@ -3836,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;
@@ -3881,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;