@nozle-js/react 0.7.1 → 0.9.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { EmbeddedCheckoutProvider, EmbeddedCheckout, Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
@@ -25,21 +25,29 @@ var BillingContext = createContext(null);
 function BillingProvider({
   publishableKey,
   createCheckout,
-  baseUrl = "https://api.nozle.app",
+  verifyCheckout,
+  getCheckoutStatus,
+  baseUrl = "https://api.nozle.app/engine",
   children
 }) {
   if (!publishableKey.startsWith("pk_")) {
-    throw new Error("BillingProvider publishableKey must be a publishable key (pk_)");
+    throw new Error(
+      "BillingProvider publishableKey must be a publishable key (pk_)"
+    );
   }
   const client = useMemo(
     () => createClient(publishableKey, baseUrl),
     [publishableKey, baseUrl]
   );
   const contextValue = useMemo(
-    () => ({ client, createCheckout }),
-    [client, createCheckout]
+    () => ({ client, createCheckout, verifyCheckout, getCheckoutStatus }),
+    [client, createCheckout, verifyCheckout, getCheckoutStatus]
+  );
+  return React.createElement(
+    BillingContext.Provider,
+    { value: contextValue },
+    children
   );
-  return React.createElement(BillingContext.Provider, { value: contextValue }, children);
 }
 function useOptionalBillingContext() {
   return useContext(BillingContext);
@@ -110,7 +118,11 @@ function useCheckout() {
           navigateToCheckout(result.url);
           return null;
         }
-        if ("type" in result && (result.type === "completed" || result.type === "scheduled")) {
+        if ("type" in result && result.type === "hosted") {
+          navigateToCheckout(result.payment_url);
+          return null;
+        }
+        if ("type" in result && ["completed", "scheduled", "razorpay", "processing"].includes(result.type)) {
           return null;
         }
         throw new Error("Checkout response did not include a supported result type");
@@ -126,20 +138,151 @@ function useCheckout() {
   );
   return { fetchClientSecret, checkout, isLoading, error };
 }
+
+// src/components/billing/razorpay-checkout.ts
+var loadingScript;
 function loadRazorpayScript() {
-  return new Promise((resolve, reject) => {
-    if (document.getElementById("razorpay-js")) {
-      resolve();
-      return;
+  if (typeof window === "undefined")
+    return Promise.reject(new Error("Razorpay checkout requires a browser"));
+  if (window.Razorpay) return Promise.resolve();
+  if (loadingScript) return loadingScript;
+  loadingScript = new Promise((resolve, reject) => {
+    const existing = document.querySelector(
+      'script[src="https://checkout.razorpay.com/v1/checkout.js"]'
+    );
+    const script = existing || document.createElement("script");
+    const finish = (error) => {
+      clearTimeout(timer);
+      script.removeEventListener("load", onLoad);
+      script.removeEventListener("error", onError);
+      if (error) {
+        script.remove();
+        reject(error);
+      } else {
+        resolve();
+      }
+    };
+    const onLoad = () => finish(
+      window.Razorpay ? void 0 : new Error("Razorpay checkout did not initialize")
+    );
+    const onError = () => finish(new Error("Failed to load Razorpay checkout"));
+    const timer = setTimeout(
+      () => finish(new Error("Razorpay checkout timed out while loading")),
+      15e3
+    );
+    script.addEventListener("load", onLoad);
+    script.addEventListener("error", onError);
+    if (!existing) {
+      script.id = "razorpay-js";
+      script.src = "https://checkout.razorpay.com/v1/checkout.js";
+      document.body.appendChild(script);
     }
-    const script = document.createElement("script");
-    script.id = "razorpay-js";
-    script.src = "https://checkout.razorpay.com/v1/checkout.js";
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load Razorpay.js"));
-    document.body.appendChild(script);
+  }).catch((error) => {
+    loadingScript = void 0;
+    throw error;
+  });
+  return loadingScript;
+}
+function checkStatus(status, id) {
+  if (status.checkout_id !== id || status.provider !== "razorpay")
+    throw new Error("Checkout status did not match this checkout");
+  if (["failed", "expired", "needs_review"].includes(status.status))
+    throw new Error(`Checkout ${status.status.replaceAll("_", " ")}`);
+}
+async function waitForCheckout(id, actions, initial, phase = "confirm") {
+  let status = initial;
+  if (!status && !actions.getCheckoutStatus)
+    throw new Error("BillingProvider getCheckoutStatus callback is required");
+  for (let attempt = 0; attempt < 30; attempt++) {
+    status = status || await actions.getCheckoutStatus(id);
+    checkStatus(status, id);
+    if (status.status === "succeeded" && status.fulfillment_status === "succeeded" || phase === "prepare" && status.status === "awaiting_payment")
+      return status;
+    actions.onProcessing?.(status);
+    if (!actions.getCheckoutStatus) return status;
+    if (attempt < 29) {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      status = void 0;
+    }
+  }
+  return status;
+}
+async function openRazorpayCheckout(result, actions) {
+  if (!result.checkout_id || !result.key_id || !result.order_id)
+    throw new Error(
+      "Razorpay checkout requires server-issued checkout_id, key_id and order_id"
+    );
+  if (!actions.verifyCheckout)
+    throw new Error(
+      "BillingProvider verifyCheckout callback is required for Razorpay checkout"
+    );
+  await loadRazorpayScript();
+  await new Promise((resolve, reject) => {
+    let finishing = false;
+    const checkout = new window.Razorpay({
+      key: result.key_id,
+      order_id: result.order_id,
+      amount: result.amount_cents,
+      currency: result.currency,
+      ...result.recurring && {
+        customer_id: result.customer_id,
+        recurring: "1"
+      },
+      handler: (response) => {
+        if (finishing) return;
+        finishing = true;
+        void (async () => {
+          const verified = await actions.verifyCheckout(
+            result.checkout_id,
+            response
+          );
+          const status = await waitForCheckout(
+            result.checkout_id,
+            actions,
+            verified
+          );
+          if (status.status === "succeeded" && status.fulfillment_status === "succeeded")
+            actions.onSuccess?.(response.razorpay_payment_id);
+          else actions.onProcessing?.(status);
+          resolve();
+        })().catch(reject);
+      },
+      modal: {
+        ondismiss: () => {
+          if (!finishing) {
+            finishing = true;
+            actions.onDismiss?.();
+            resolve();
+          }
+        }
+      }
+    });
+    checkout.on("payment.failed", () => {
+      if (finishing) return;
+      finishing = true;
+      checkout.close();
+      reject(new Error("Payment failed. You can retry checkout."));
+    });
+    checkout.open();
   });
 }
+async function resumeCheckout(result, actions) {
+  const status = await waitForCheckout(
+    result.checkout_id,
+    actions,
+    void 0,
+    "prepare"
+  );
+  if (status.status === "awaiting_payment") return status.checkout;
+  if (status.status === "succeeded" && status.fulfillment_status === "succeeded")
+    return {
+      type: "completed",
+      status: "succeeded",
+      invoice_id: status.invoice_id || void 0
+    };
+  actions.onProcessing?.(status);
+  return void 0;
+}
 async function handleCheckoutResult(result, options) {
   if ("type" in result && result.type === "scheduled") {
     options.onScheduled?.(result);
@@ -150,14 +293,16 @@ async function handleCheckoutResult(result, options) {
     return;
   }
   if ("type" in result && result.type === "razorpay") {
-    if (!options.razorpayKeyId) throw new Error("razorpayKeyId is required for Razorpay checkout");
-    await loadRazorpayScript();
-    const checkout = new window.Razorpay({
-      key: options.razorpayKeyId,
-      order_id: result.orderId,
-      handler: (response) => options.onSuccess?.(response.razorpay_payment_id)
-    });
-    checkout.open();
+    await openRazorpayCheckout(result, options);
+    return;
+  }
+  if ("type" in result && result.type === "processing") {
+    const next = await resumeCheckout(result, options);
+    if (next) await handleCheckoutResult(next, options);
+    return;
+  }
+  if ("type" in result && result.type === "hosted") {
+    window.location.assign(result.payment_url);
     return;
   }
   if ("url" in result && result.url) {
@@ -170,7 +315,10 @@ async function handleCheckoutResult(result, options) {
       options.onStripeClientSecret(clientSecret);
       return;
     }
-    if (clientSecret) throw new Error("onStripeClientSecret is required for embedded Stripe checkout");
+    if (clientSecret)
+      throw new Error(
+        "onStripeClientSecret is required for embedded Stripe checkout"
+      );
     throw new Error("Stripe checkout did not include a URL or client secret");
   }
   throw new Error("Unknown checkout response format");
@@ -183,30 +331,58 @@ function CheckoutButton({
   style,
   onError,
   razorpayKeyId,
+  registerMandate,
+  onProcessing,
+  onDismiss,
   onStripeClientSecret,
   onSuccess,
   onComplete,
   onScheduled
 }) {
-  const { createCheckout } = useBillingContext();
+  const { createCheckout, verifyCheckout, getCheckoutStatus } = useBillingContext();
+  const attempt = useRef(void 0);
+  const inFlight = useRef(false);
+  const [processing, setProcessing] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   async function handleClick() {
+    if (inFlight.current) return;
+    inFlight.current = true;
     setLoading(true);
+    setProcessing(false);
     setError(null);
     try {
       if (!createCheckout) {
-        throw new Error("BillingProvider createCheckout callback is required for checkout");
+        throw new Error(
+          "BillingProvider createCheckout callback is required for checkout"
+        );
       }
+      if (attempt.current?.plan !== planCode)
+        attempt.current = { plan: planCode, key: crypto.randomUUID() };
       const result = await createCheckout({
+        idempotencyKey: attempt.current.key,
+        ...registerMandate !== void 0 && { registerMandate },
         planCode,
         returnUrl: returnUrl ?? window.location.href
       });
       await handleCheckoutResult(result, {
         razorpayKeyId,
+        verifyCheckout,
+        getCheckoutStatus,
+        onProcessing: (status) => {
+          setProcessing(true);
+          onProcessing?.(status);
+        },
+        onDismiss,
         onStripeClientSecret,
-        onSuccess,
-        onComplete,
+        onSuccess: (id) => {
+          setProcessing(false);
+          onSuccess?.(id);
+        },
+        onComplete: (completed) => {
+          setProcessing(false);
+          onComplete?.(completed);
+        },
         onScheduled
       });
     } catch (cause) {
@@ -214,6 +390,7 @@ function CheckoutButton({
       setError(checkoutError);
       onError?.(checkoutError);
     } finally {
+      inFlight.current = false;
       setLoading(false);
     }
   }
@@ -240,6 +417,7 @@ function CheckoutButton({
         children: loading ? "Loading..." : label
       }
     ),
+    processing && /* @__PURE__ */ jsx("span", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
     error && /* @__PURE__ */ jsx("span", { role: "alert", children: error.message })
   ] });
 }
@@ -512,6 +690,7 @@ function PricingTable({
   const [currentPlan, setCurrentPlan] = useState(currentPlanCode ?? null);
   const [isAnnual, setIsAnnual] = useState(false);
   const [loading, setLoading] = useState(!propPlans);
+  const [processing, setProcessing] = useState(false);
   const [checkoutError, setCheckoutError] = useState(null);
   useEffect(() => {
     if (propPlans) {
@@ -554,7 +733,14 @@ function PricingTable({
         returnUrl: returnUrl ?? window.location.href
       });
       onCheckoutResult?.(result);
-      await handleCheckoutResult(result, { onStripeClientSecret });
+      await handleCheckoutResult(result, {
+        onStripeClientSecret,
+        verifyCheckout: billing?.verifyCheckout,
+        getCheckoutStatus: billing?.getCheckoutStatus,
+        onProcessing: () => setProcessing(true),
+        onSuccess: () => setProcessing(false),
+        onComplete: () => setProcessing(false)
+      });
     } catch (cause) {
       const error = cause instanceof Error ? cause : new Error("Checkout failed");
       setCheckoutError(error.message);
@@ -570,6 +756,7 @@ function PricingTable({
     background: C.bg
   }, children: [
     showToggle && hasAnnual && /* @__PURE__ */ jsx(Toggle, { isAnnual, onChange: setIsAnnual }),
+    processing && /* @__PURE__ */ jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
     checkoutError && /* @__PURE__ */ jsx("p", { role: "alert", children: checkoutError }),
     /* @__PURE__ */ jsx("div", { style: {
       display: "grid",
@@ -923,7 +1110,16 @@ function CheckoutInner({
         }
       }
     ),
-    error !== null && /* @__PURE__ */ jsx("p", { style: { color: "var(--nozle-destructive, #dc2626)", margin: "0.5rem 0 0" }, children: error.message }),
+    error !== null && /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          color: "var(--nozle-destructive, #dc2626)",
+          margin: "0.5rem 0 0"
+        },
+        children: error.message
+      }
+    ),
     children ?? /* @__PURE__ */ jsx(
       "button",
       {
@@ -948,7 +1144,7 @@ function CheckoutInner({
     )
   ] }) });
 }
-function Checkout({
+function StripeCheckout({
   clientSecret,
   publishableKey,
   stripeAccount,
@@ -972,7 +1168,14 @@ function Checkout({
     [clientSecret, onComplete]
   );
   if (clientSecret.startsWith("cs_")) {
-    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(EmbeddedCheckoutProvider, { stripe: stripePromise, options: embeddedOptions, children: /* @__PURE__ */ jsx(EmbeddedCheckout, {}) }) });
+    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
+      EmbeddedCheckoutProvider,
+      {
+        stripe: stripePromise,
+        options: embeddedOptions,
+        children: /* @__PURE__ */ jsx(EmbeddedCheckout, {})
+      }
+    ) });
   }
   const options = { clientSecret, appearance };
   return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options, children: /* @__PURE__ */ jsx(
@@ -989,6 +1192,65 @@ function Checkout({
     }
   ) }, clientSecret);
 }
+function ProviderCheckout(props) {
+  const billing = useOptionalBillingContext();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [processing, setProcessing] = useState(false);
+  const pay = async () => {
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await handleCheckoutResult(props.checkout, {
+        verifyCheckout: billing?.verifyCheckout,
+        getCheckoutStatus: billing?.getCheckoutStatus,
+        onSuccess: (id) => {
+          setProcessing(false);
+          props.onSuccess?.(id);
+          props.onComplete?.();
+        },
+        onComplete: () => {
+          setProcessing(false);
+          props.onComplete?.();
+        },
+        onProcessing: (status) => {
+          setProcessing(true);
+          props.onProcessing?.(status);
+        }
+      });
+    } catch (cause) {
+      const failure = cause instanceof Error ? cause : new Error("Checkout failed");
+      setError(failure);
+      props.onError?.(failure);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CheckoutContext.Provider,
+    {
+      value: { confirmPayment: pay, isProcessing: busy, error },
+      children: /* @__PURE__ */ jsxs("div", { className: props.className, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            "aria-busy": busy,
+            onClick: () => void pay(),
+            children: busy ? "Processing\u2026" : props.submitLabel || "Pay now"
+          }
+        ),
+        processing && /* @__PURE__ */ jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error.message })
+      ] })
+    }
+  );
+}
+function Checkout(props) {
+  return "checkout" in props ? /* @__PURE__ */ jsx(ProviderCheckout, { ...props }) : /* @__PURE__ */ jsx(StripeCheckout, { ...props });
+}
 function UpgradeModal({
   isOpen,
   planCode,
@@ -1002,7 +1264,8 @@ function UpgradeModal({
   onCancel,
   onError
 }) {
-  const { createCheckout } = useBillingContext();
+  const { createCheckout, verifyCheckout, getCheckoutStatus } = useBillingContext();
+  const [processing, setProcessing] = useState(false);
   const [error, setError] = useState(null);
   const [confirming, setConfirming] = useState(false);
   async function handleConfirm() {
@@ -1017,11 +1280,21 @@ function UpgradeModal({
         returnUrl: returnUrl ?? window.location.href
       });
       await handleCheckoutResult(result, {
+        verifyCheckout,
+        getCheckoutStatus,
+        onSuccess: () => {
+          setProcessing(false);
+          onCompleted?.();
+        },
+        onProcessing: () => setProcessing(true),
         onStripeClientSecret: (clientSecret) => {
           onStripeClientSecret?.(clientSecret);
           onCheckoutStarted?.();
         },
-        onComplete: () => onCompleted?.(),
+        onComplete: () => {
+          setProcessing(false);
+          onCompleted?.();
+        },
         onScheduled: () => onScheduled?.()
       });
       onConfirm?.();
@@ -1064,6 +1337,7 @@ function UpgradeModal({
           },
           children: [
             /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 1rem" }, children: "Confirm plan change" }),
+            processing && /* @__PURE__ */ jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
             error && /* @__PURE__ */ jsx("p", { role: "alert", style: { color: "oklch(0.6 0.2 25)" }, children: error }),
             preview && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
               /* @__PURE__ */ jsxs(