@usethrottle/checkout-react 1.4.1 → 2.0.0

package/dist/index.cjs

@@ -20,10 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  CardNumberField: () => CardNumberField,
   CheckoutEmbed: () => CheckoutEmbed,
+  ExpiryField: () => ExpiryField,
   PaymentEmbed: () => PaymentEmbed,
+  PostalCodeField: () => PostalCodeField,
+  SecureCardProvider: () => SecureCardProvider,
+  SecurityCodeField: () => SecurityCodeField,
   ThrottleCheckout: () => CheckoutEmbed,
   useCartSession: () => useCartSession,
+  useSecureCard: () => useSecureCard,
   useThrottleCheckout: () => useThrottleCheckout,
   useThrottleEvents: () => useThrottleEvents
 });
@@ -663,12 +669,330 @@ function useThrottleCheckout(options) {
     reset
   };
 }
+
+// src/useSecureCard.tsx
+var import_react7 = require("react");
+var import_secure_fields2 = require("@gr4vy/secure-fields");
+
+// src/threeDSecure.ts
+var import_secure_fields = require("@gr4vy/secure-fields");
+function resolveChallenge({ instance, element, challengeWindowSize }) {
+  return new Promise((resolve) => {
+    const handleFinish = () => {
+      instance.removeEventListener?.(import_secure_fields.SecureFields.Events.THREE_DS_FINISH, handleFinish);
+      resolve();
+    };
+    instance.addEventListener(import_secure_fields.SecureFields.Events.THREE_DS_FINISH, handleFinish);
+    instance.addThreeDSecure(element, challengeWindowSize ? { challengeWindowSize } : void 0);
+  });
+}
+
+// src/useSecureCard.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SecureCardContext = (0, import_react7.createContext)(null);
+var FIELDS_REQUIRED_TO_BE_READY = 3;
+var DEFAULT_CHALLENGE_TIMEOUT_MS = 5 * 60 * 1e3;
+function SecureCardProvider({
+  session,
+  checkoutSessionId,
+  children,
+  completeFn,
+  resolveChallengeFn,
+  challengeTimeoutMs = DEFAULT_CHALLENGE_TIMEOUT_MS,
+  apiBaseUrl,
+  onSuccess
+}) {
+  const [status, setStatus] = (0, import_react7.useState)("idle");
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [mountedCount, setMountedCount] = (0, import_react7.useState)(0);
+  const vaultWaiter = (0, import_react7.useRef)(null);
+  const threeDSElement = (0, import_react7.useRef)(null);
+  const threeDSOptions = (0, import_react7.useRef)(void 0);
+  const challengeWaiter = (0, import_react7.useRef)(null);
+  const { environment, sessionId } = session;
+  const providerInstanceId = session.providerId ?? session.gr4vyId ?? "";
+  const [instance, setInstance] = (0, import_react7.useState)(null);
+  const [threeDSMount, setThreeDSMount] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    const created = new import_secure_fields2.SecureFields({ gr4vyId: providerInstanceId, environment, sessionId });
+    setInstance(created);
+    setMountedCount(0);
+    setStatus((current) => current === "idle" || current === "ready" ? "mounting" : current);
+    return () => {
+      created.controller?.remove();
+      setInstance(null);
+    };
+  }, [providerInstanceId, environment, sessionId]);
+  (0, import_react7.useEffect)(() => {
+    if (!instance) return;
+    const handleSuccess = () => {
+      vaultWaiter.current?.resolve();
+    };
+    const handleFailure = (data) => {
+      vaultWaiter.current?.reject({
+        code: data?.code ?? "card_vault_failed",
+        message: data?.message ?? "The card could not be saved."
+      });
+    };
+    const handleThreeDSStart = () => setStatus("challenging");
+    const handleThreeDSFinish = () => {
+      if (!challengeWaiter.current) return;
+      setStatus((current) => current === "challenging" ? "vaulting" : current);
+    };
+    instance.addEventListener(import_secure_fields2.SecureFields.Events.CARD_VAULT_SUCCESS, handleSuccess);
+    instance.addEventListener(import_secure_fields2.SecureFields.Events.CARD_VAULT_FAILURE, handleFailure);
+    instance.addEventListener(import_secure_fields2.SecureFields.Events.THREE_DS_START, handleThreeDSStart);
+    instance.addEventListener(import_secure_fields2.SecureFields.Events.THREE_DS_FINISH, handleThreeDSFinish);
+    return () => {
+      instance.removeEventListener?.(import_secure_fields2.SecureFields.Events.CARD_VAULT_SUCCESS, handleSuccess);
+      instance.removeEventListener?.(import_secure_fields2.SecureFields.Events.CARD_VAULT_FAILURE, handleFailure);
+      instance.removeEventListener?.(import_secure_fields2.SecureFields.Events.THREE_DS_START, handleThreeDSStart);
+      instance.removeEventListener?.(import_secure_fields2.SecureFields.Events.THREE_DS_FINISH, handleThreeDSFinish);
+    };
+  }, [instance]);
+  const registerField = (0, import_react7.useCallback)(
+    (kind, element, options = {}) => {
+      if (!instance) return;
+      if (kind === "number") instance.addCardNumberField(element, options);
+      else if (kind === "expiry") instance.addExpiryDateField(element, options);
+      else if (kind === "cvv") instance.addSecurityCodeField(element, options);
+      else instance.addField(element, { type: "postalCode", ...options });
+      setMountedCount((n) => n + 1);
+    },
+    [instance]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (mountedCount >= FIELDS_REQUIRED_TO_BE_READY) setStatus("ready");
+  }, [mountedCount]);
+  const registerThreeDSecure = (0, import_react7.useCallback)(
+    (element, options) => {
+      threeDSElement.current = element;
+      threeDSOptions.current = options;
+      setThreeDSMount(element);
+    },
+    []
+  );
+  (0, import_react7.useEffect)(() => {
+    if (!instance || !threeDSMount) return;
+    try {
+      instance.addThreeDSecure(
+        threeDSMount,
+        threeDSOptions.current?.challengeWindowSize ? { challengeWindowSize: threeDSOptions.current.challengeWindowSize } : void 0
+      );
+    } catch (err) {
+      setError({
+        code: "three_ds_arm_failed",
+        message: err?.message ?? "Could not arm 3-D Secure."
+      });
+    }
+  }, [instance, threeDSMount]);
+  const cancelChallenge = (0, import_react7.useCallback)(() => {
+    challengeWaiter.current?.reject({
+      code: "three_ds_abandoned",
+      message: "The 3-D Secure challenge was abandoned."
+    });
+  }, []);
+  const vault = (0, import_react7.useCallback)(() => {
+    if (!instance) {
+      return Promise.reject({
+        code: "not_ready",
+        message: "The card fields are not ready yet."
+      });
+    }
+    if (vaultWaiter.current) {
+      return Promise.reject({
+        code: "vault_in_progress",
+        message: "A card vault is already in progress."
+      });
+    }
+    setError(null);
+    setStatus("vaulting");
+    return new Promise((resolve, reject) => {
+      vaultWaiter.current = {
+        resolve: () => {
+          vaultWaiter.current = null;
+          resolve();
+        },
+        reject: (e) => {
+          vaultWaiter.current = null;
+          setError(e);
+          setStatus("error");
+          reject(e);
+        }
+      };
+      instance.submit();
+    });
+  }, [instance]);
+  const complete = (0, import_react7.useCallback)(async () => {
+    setStatus("authorizing");
+    const doComplete = completeFn ?? ((args) => defaultComplete({ ...args, apiBaseUrl }));
+    const doResolveChallenge = resolveChallengeFn ?? resolveChallenge;
+    try {
+      let res = await doComplete({ sessionId: checkoutSessionId, gr4vySessionId: session.sessionId });
+      if (res?.status === "requires_action") {
+        if (!threeDSElement.current) {
+          throw Object.assign(new Error("No 3-D Secure mount element registered (call registerThreeDSecure)."), {
+            code: "three_ds_element_missing"
+          });
+        }
+        if (!instance) {
+          throw Object.assign(new Error("The card fields are not ready yet."), { code: "not_ready" });
+        }
+        setStatus("challenging");
+        await new Promise((resolve, reject) => {
+          const timeoutId = setTimeout(() => {
+            challengeWaiter.current?.reject({
+              code: "three_ds_timeout",
+              message: "The 3-D Secure challenge timed out."
+            });
+          }, challengeTimeoutMs);
+          challengeWaiter.current = {
+            resolve: () => {
+              clearTimeout(timeoutId);
+              challengeWaiter.current = null;
+              resolve();
+            },
+            reject: (e) => {
+              clearTimeout(timeoutId);
+              challengeWaiter.current = null;
+              reject(Object.assign(new Error(e.message), { code: e.code }));
+            }
+          };
+          doResolveChallenge({
+            instance,
+            element: threeDSElement.current,
+            ...threeDSOptions.current ?? {}
+          }).then(
+            () => challengeWaiter.current?.resolve(),
+            // `resolveChallenge` calls `instance.addThreeDSecure()` synchronously
+            // inside its Promise executor, so an SDK throw rejects here; a
+            // merchant-supplied `resolveChallengeFn` can reject too. Without this
+            // arm the only exit was `challengeTimeoutMs` — five minutes stuck at
+            // `status: 'challenging'`, plus an unhandled rejection. Same
+            // code-passthrough convention as `complete()`'s catch: keep a `code`
+            // the resolver supplied, otherwise report `three_ds_failed`.
+            (err) => challengeWaiter.current?.reject({
+              code: err?.code ?? "three_ds_failed",
+              message: err?.message ?? "The 3-D Secure challenge could not be completed."
+            })
+          );
+        });
+        setStatus("authorizing");
+        res = await doComplete({ sessionId: checkoutSessionId, gr4vySessionId: session.sessionId });
+        if (res?.status === "requires_action") {
+          throw Object.assign(new Error("The payment still requires authentication after the 3-D Secure challenge."), {
+            code: "three_ds_unresolved"
+          });
+        }
+      }
+      setStatus("complete");
+      onSuccess?.(res);
+      return res;
+    } catch (err) {
+      setError({
+        code: err?.code ?? "complete_failed",
+        message: err?.message ?? "Payment could not be completed."
+      });
+      setStatus("error");
+      throw err;
+    }
+  }, [completeFn, resolveChallengeFn, challengeTimeoutMs, apiBaseUrl, instance, checkoutSessionId, session.sessionId, onSuccess]);
+  const pay = (0, import_react7.useCallback)(async () => {
+    await vault();
+    return complete();
+  }, [vault, complete]);
+  const value = {
+    instance,
+    registerField,
+    registerThreeDSecure,
+    cancelChallenge,
+    status,
+    error,
+    // "The fields are mounted and nothing is in flight" — NOT `status ===
+    // 'ready'`. Deriving it from the status alone made a decline terminal: the
+    // only thing that ever sets `ready` is the mount-count effect, which does
+    // not re-run after `setStatus('error')`, so `ready` stayed false and the
+    // merchant's pay button stayed disabled. A declined buyer could not try
+    // another card without reloading the page — and a decline is the single
+    // most common failure at a checkout.
+    ready: mountedCount >= FIELDS_REQUIRED_TO_BE_READY && status !== "vaulting" && status !== "authorizing" && status !== "challenging" && status !== "complete",
+    pay,
+    vault,
+    complete
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SecureCardContext.Provider, { value, children });
+}
+async function defaultComplete({
+  sessionId,
+  gr4vySessionId,
+  apiBaseUrl
+}) {
+  const res = await fetch(joinApiUrl(apiBaseUrl, `/api/v1/checkout-sessions/${sessionId}/complete`), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paymentMethod: "embedded", processorCheckoutSessionId: gr4vySessionId })
+  });
+  const body = await res.json();
+  if (!res.ok) {
+    throw Object.assign(new Error(body?.error?.message ?? "Payment could not be completed."), {
+      code: body?.error?.code ?? "payment_failed"
+    });
+  }
+  return body?.data ?? body;
+}
+function joinApiUrl(base, path) {
+  return `${base.replace(/\/+$/, "")}${path}`;
+}
+function useSecureCard() {
+  const ctx = (0, import_react7.useContext)(SecureCardContext);
+  if (!ctx) throw new Error("useSecureCard must be used inside <SecureCardProvider>");
+  return ctx;
+}
+
+// src/SecureCardFields.tsx
+var import_react8 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function useField(kind, options) {
+  const ctx = (0, import_react8.useContext)(SecureCardContext);
+  const hostRef = (0, import_react8.useRef)(null);
+  const instance = ctx?.instance ?? null;
+  (0, import_react8.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host || !ctx || !instance) return;
+    const target = document.createElement("div");
+    target.style.height = "100%";
+    host.appendChild(target);
+    ctx.registerField(kind, target, options ?? {});
+    return () => {
+      while (host.firstChild) host.removeChild(host.firstChild);
+    };
+  }, [instance]);
+  return hostRef;
+}
+function CardNumberField({ className, style, options }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: useField("number", options), className, style });
+}
+function ExpiryField({ className, style, options }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: useField("expiry", options), className, style });
+}
+function SecurityCodeField({ className, style, options }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: useField("cvv", options), className, style });
+}
+function PostalCodeField({ className, style, options }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: useField("postalCode", options), className, style });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CardNumberField,
   CheckoutEmbed,
+  ExpiryField,
   PaymentEmbed,
+  PostalCodeField,
+  SecureCardProvider,
+  SecurityCodeField,
   ThrottleCheckout,
   useCartSession,
+  useSecureCard,
   useThrottleCheckout,
   useThrottleEvents
 });