@usethrottle/checkout-react 1.4.1 → 2.0.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, RefObject } from 'react';
+import { CSSProperties, RefObject, ReactNode } from 'react';
 import { CartSessionCart, AddLineItemInput, UpdateLineItemInput, SelectShippingInput, CheckoutHandoffInput, CheckoutHandoff, SelectedShipping } from '@usethrottle/cart';
 
 /**
@@ -84,7 +84,12 @@ type ThrottleParentMessage = ThrottleParentCommand & ThrottleParentEnvelope;
  */
 interface RecurringIntent {
     plan: string;
-    interval: 'weekly' | 'biweekly' | 'monthly' | 'quarterly' | 'yearly';
+    /** A named interval. Or send intervalUnit + intervalCount for any cadence from 1 hour to 1 year. */
+    interval?: 'weekly' | 'biweekly' | 'monthly' | 'quarterly' | 'yearly' | 'custom';
+    intervalUnit?: 'hour' | 'day' | 'week' | 'month';
+    intervalCount?: number;
+    /** Makes the subscription an installment plan of exactly this many payments (2–60). Not combinable with trialDays. */
+    totalPayments?: number;
     amount?: number;
     trialDays?: number;
     planName?: string;
@@ -361,4 +366,215 @@ interface UseThrottleCheckoutResult {
  */
 declare function useThrottleCheckout(options: UseThrottleCheckoutOptions): UseThrottleCheckoutResult;
 
-export { CheckoutEmbed, type CheckoutEmbedExtraProps, type CheckoutTotals, PaymentEmbed, type RecurringIntent, CheckoutEmbed as ThrottleCheckout, type ThrottleCheckoutStatus, type ThrottleCompletedLineItem, type ThrottleEmbedProps, type ThrottleEnvelope, type ThrottleEvent, type ThrottleMessage, type ThrottleParentCommand, type ThrottleParentEnvelope, type ThrottleParentMessage, type UseCartSessionOptions, type UseCartSessionResult, type UseThrottleCheckoutOptions, type UseThrottleCheckoutResult, useCartSession, useThrottleCheckout, useThrottleEvents };
+/**
+ * Subset of the Secure Fields instance this module needs — real or mocked.
+ *
+ * Declared structurally rather than as `Pick<SecureFields, …>`: any reference
+ * to the SDK's own type from an exported declaration makes tsup emit
+ * `import { SecureFields } from '@gr4vy/secure-fields'` into
+ * `dist/index.d.ts`, and that package's `exports` map carries no `types`
+ * condition — so a consumer on `moduleResolution: bundler` gets TS7016 under
+ * `skipLibCheck: false`, or silently degrades the member to `any` under
+ * `skipLibCheck: true` (the Next default). The `paths` override in this
+ * package's tsconfig repairs our own compile only; it does not ship.
+ *
+ * Members use method syntax deliberately: TypeScript checks method parameters
+ * bivariantly, so the real class's narrower `CombinedEvents` event parameter
+ * stays assignable to the `string` declared here.
+ */
+interface ThreeDSecureInstance {
+    addThreeDSecure(element: string | HTMLElement, options?: {
+        challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
+    }): void;
+    addEventListener(event: string, callback: (...args: any[]) => void): void;
+    removeEventListener?(event: string, callback: (...args: any[]) => void): void;
+}
+interface ResolveChallengeArgs {
+    /** The `SecureFields` instance already constructed for this session. */
+    instance: ThreeDSecureInstance;
+    /** Mount point for Gr4vy's own 3DS challenge iframe. */
+    element: HTMLElement | string;
+    challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
+}
+
+/**
+ * Lifecycle status for the headless Secure Fields state machine.
+ * - `idle`        — provider mounted, fields not yet registered
+ * - `mounting`     — Secure Fields instance constructed, fields registering
+ * - `ready`        — all required fields registered, submit() may be called
+ * - `vaulting`     — submit() called, waiting on CARD_VAULT_SUCCESS/FAILURE
+ * - `authorizing`  — card vaulted, awaiting the merchant's complete() call
+ * - `challenging`  — complete() returned `requires_action`; Gr4vy's own 3DS
+ *                    iframe (addThreeDSecure) is mounted and running
+ * - `complete`     — order created
+ * - `error`        — vault, challenge, or completion failed (see `error`)
+ */
+type SecureCardStatus = 'idle' | 'mounting' | 'ready' | 'vaulting' | 'authorizing' | 'challenging' | 'complete' | 'error';
+/** The Task 2 `POST /checkout-sessions/:id/card-session` response shape. */
+interface SecureCardSession {
+    sessionId: string;
+    /**
+     * The payment provider instance this session belongs to, straight from
+     * `POST /checkout-sessions/:id/card-session`.
+     *
+     * Either name works. `providerId` is the documented one; `gr4vyId` is the
+     * original and is still accepted, because the package shipped with it and
+     * dropping it would break consumers already passing the response through.
+     */
+    providerId?: string;
+    /** @deprecated Use `providerId`. Still honoured. */
+    gr4vyId?: string;
+    environment: 'sandbox' | 'production';
+}
+interface SecureCardError {
+    code: string;
+    message: string;
+}
+type SecureCardFieldKind = 'number' | 'expiry' | 'cvv' | 'postalCode';
+/**
+ * Everything this package uses off a `SecureFields` instance, declared
+ * structurally instead of re-exporting the SDK's own class type.
+ *
+ * `@gr4vy/secure-fields`'s `exports` map has no `types` condition, so naming
+ * its type in an exported declaration makes tsup emit
+ * `import { SecureFields } from '@gr4vy/secure-fields'` into
+ * `dist/index.d.ts` — which is a hard TS7016 for any consumer on
+ * `moduleResolution: bundler` with `skipLibCheck: false`, and a silent
+ * degradation of `instance` to `any` with `skipLibCheck: true` (the Next
+ * default). That hits every installer of this package, not only Secure Fields
+ * users. The `paths` override in this package's tsconfig repairs our own
+ * compile; it is monorepo-only and does not ship. Same approach as
+ * `ThreeDSecureInstance` in `threeDSecure.ts`.
+ *
+ * Members use method syntax deliberately: TypeScript checks method parameters
+ * bivariantly, so the real class's narrower option and event types stay
+ * assignable to the looser ones declared here.
+ */
+interface SecureFieldsInstance {
+    /** Gr4vy's hidden controller iframe, removed when the provider unmounts. */
+    controller?: HTMLIFrameElement;
+    addCardNumberField(element: string | HTMLElement, options?: Record<string, unknown>): unknown;
+    addExpiryDateField(element: string | HTMLElement, options?: Record<string, unknown>): unknown;
+    addSecurityCodeField(element: string | HTMLElement, options?: Record<string, unknown>): unknown;
+    addField(element: string | HTMLElement, options: Record<string, unknown>): unknown;
+    addThreeDSecure(element: string | HTMLElement, options?: {
+        challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
+    }): void;
+    addEventListener(event: string, callback: (...args: any[]) => void): void;
+    removeEventListener?(event: string, callback: (...args: any[]) => void): void;
+    submit(): void;
+}
+interface SecureCardContextValue {
+    /**
+     * The underlying Secure Fields instance — Task 5's field primitives register
+     * against it.
+     *
+     * `null` until the provider's mount effect has constructed it. It cannot be
+     * built during render: `new SecureFields()` mutates the document (see the
+     * effect in `SecureCardProvider`), and React does not promise a render-phase
+     * factory runs exactly once. Consumers that reach for it directly must
+     * null-check; the field primitives already wait for it.
+     */
+    instance: SecureFieldsInstance | null;
+    registerField: (kind: SecureCardFieldKind, element: HTMLElement, options?: Record<string, unknown>) => void;
+    /**
+     * Mount point for Gr4vy's own 3DS challenge iframe (`addThreeDSecure`).
+     * Register this once, alongside the card fields; it is only actually
+     * mounted if `complete()` gets `requires_action`.
+     */
+    registerThreeDSecure: (element: HTMLElement | string, options?: {
+        challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
+    }) => void;
+    /**
+     * Abandons an in-progress challenge (e.g. the buyer closed the challenge
+     * UI). Only meaningful while `status === 'challenging'`; settles
+     * `complete()`'s promise with `error.code === 'three_ds_abandoned'`, kept
+     * distinct from a processor decline code.
+     */
+    cancelChallenge: () => void;
+    status: SecureCardStatus;
+    error: SecureCardError | null;
+    /** True once all required fields are registered and submit() may be called. */
+    ready: boolean;
+    /** vault() then complete(). */
+    pay: () => Promise<unknown>;
+    vault: () => Promise<void>;
+    complete: () => Promise<unknown>;
+}
+interface SecureCardProviderProps {
+    session: SecureCardSession;
+    /**
+     * Throttle's own checkout session id — the `:id` already used to mint
+     * `session` via `POST /checkout-sessions/:id/card-session`. NOT the same
+     * value as `session.sessionId`: that field is Gr4vy's own checkout session
+     * id (required to construct the `SecureFields` instance — see
+     * `packages/platform-api/src/routes/card-session.ts`, which returns
+     * `{ sessionId: checkoutSessionId, ... }` from `adapter.createCardSession()`,
+     * a Gr4vy-minted id). The public `POST /checkout-sessions/:id/complete`
+     * route looks `:id` up directly against Throttle's own `checkoutSessions`
+     * table (`checkout-sessions.ts`), so `defaultComplete` needs this id, not
+     * `session.sessionId`, to call the right URL.
+     */
+    checkoutSessionId: string;
+    children: ReactNode;
+    /** Injected for tests / custom completion flows; defaults to a real POST /complete call. */
+    completeFn?: (args: {
+        sessionId: string;
+        gr4vySessionId: string;
+    }) => Promise<any>;
+    /** Injected for tests / custom 3DS UI; defaults to mounting Gr4vy's own 3DS iframe via addThreeDSecure. */
+    resolveChallengeFn?: (args: ResolveChallengeArgs) => Promise<void>;
+    /**
+     * Bounds how long `complete()` waits on an unfinished challenge before
+     * settling to a terminal `error` (code `three_ds_timeout`) on its own — the
+     * only other exits are Gr4vy's own `THREE_DS_FINISH` and an explicit
+     * `cancelChallenge()` call, neither of which is guaranteed to ever fire if
+     * the buyer just abandons the tab. Not sourced from Gr4vy documentation
+     * (no challenge-duration limit is published in the SDK); 5 minutes is a
+     * conservative, overridable default.
+     */
+    challengeTimeoutMs?: number;
+    /**
+     * Base URL of the Throttle API (e.g. `https://api.usethrottle.dev`).
+     * Required — not optional-with-a-same-origin-default. Secure Fields is the
+     * headless surface for merchants who mount the card form on THEIR OWN
+     * origin, which by definition is not same-origin with the Throttle API, so
+     * `defaultComplete`'s `fetch()` can never resolve a relative path (it 404s
+     * against the merchant's own domain at payment time instead). Making this
+     * required turns that into a compile error instead of a silent runtime
+     * failure. Joined onto the request path regardless of a trailing slash.
+     */
+    apiBaseUrl: string;
+    onSuccess?: (result: SecureCardCompleteResult) => void;
+}
+/**
+ * The real `POST /checkout-sessions/:id/complete` success body for the
+ * Secure Fields flow (`checkout-session-service.ts` `complete()`,
+ * proxy-mode-embedded return, ~line 2338 and its idempotent-retry twin at
+ * ~line 1849). There is no `order` key.
+ */
+interface SecureCardCompleteResult {
+    orderId: string;
+    orderNumber: string;
+    paymentId: string;
+    /** Minor units (cents). */
+    total: number;
+    currency: string;
+    status: string;
+    paymentStatus: string;
+}
+declare function SecureCardProvider({ session, checkoutSessionId, children, completeFn, resolveChallengeFn, challengeTimeoutMs, apiBaseUrl, onSuccess, }: SecureCardProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSecureCard(): SecureCardContextValue;
+
+interface SecureCardFieldProps {
+    className?: string;
+    style?: CSSProperties;
+    /** Gr4vy field options (styles, autoFocus, maskInput, pattern…) passed through unchanged. */
+    options?: Record<string, unknown>;
+}
+declare function CardNumberField({ className, style, options }: SecureCardFieldProps): react_jsx_runtime.JSX.Element;
+declare function ExpiryField({ className, style, options }: SecureCardFieldProps): react_jsx_runtime.JSX.Element;
+declare function SecurityCodeField({ className, style, options }: SecureCardFieldProps): react_jsx_runtime.JSX.Element;
+declare function PostalCodeField({ className, style, options }: SecureCardFieldProps): react_jsx_runtime.JSX.Element;
+
+export { CardNumberField, CheckoutEmbed, type CheckoutEmbedExtraProps, type CheckoutTotals, ExpiryField, PaymentEmbed, PostalCodeField, type RecurringIntent, type ResolveChallengeArgs, type SecureCardCompleteResult, type SecureCardContextValue, type SecureCardError, type SecureCardFieldKind, type SecureCardFieldProps, SecureCardProvider, type SecureCardProviderProps, type SecureCardSession, type SecureCardStatus, type SecureFieldsInstance, SecurityCodeField, type ThreeDSecureInstance, CheckoutEmbed as ThrottleCheckout, type ThrottleCheckoutStatus, type ThrottleCompletedLineItem, type ThrottleEmbedProps, type ThrottleEnvelope, type ThrottleEvent, type ThrottleMessage, type ThrottleParentCommand, type ThrottleParentEnvelope, type ThrottleParentMessage, type UseCartSessionOptions, type UseCartSessionResult, type UseThrottleCheckoutOptions, type UseThrottleCheckoutResult, useCartSession, useSecureCard, useThrottleCheckout, useThrottleEvents };

package/dist/index.js

@@ -638,11 +638,336 @@ function useThrottleCheckout(options) {
     reset
   };
 }
+
+// src/useSecureCard.tsx
+import {
+  createContext,
+  useCallback as useCallback5,
+  useContext,
+  useEffect as useEffect5,
+  useRef as useRef4,
+  useState as useState6
+} from "react";
+import { SecureFields as SecureFields2 } from "@gr4vy/secure-fields";
+
+// src/threeDSecure.ts
+import { SecureFields } from "@gr4vy/secure-fields";
+function resolveChallenge({ instance, element, challengeWindowSize }) {
+  return new Promise((resolve) => {
+    const handleFinish = () => {
+      instance.removeEventListener?.(SecureFields.Events.THREE_DS_FINISH, handleFinish);
+      resolve();
+    };
+    instance.addEventListener(SecureFields.Events.THREE_DS_FINISH, handleFinish);
+    instance.addThreeDSecure(element, challengeWindowSize ? { challengeWindowSize } : void 0);
+  });
+}
+
+// src/useSecureCard.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SecureCardContext = 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] = useState6("idle");
+  const [error, setError] = useState6(null);
+  const [mountedCount, setMountedCount] = useState6(0);
+  const vaultWaiter = useRef4(null);
+  const threeDSElement = useRef4(null);
+  const threeDSOptions = useRef4(void 0);
+  const challengeWaiter = useRef4(null);
+  const { environment, sessionId } = session;
+  const providerInstanceId = session.providerId ?? session.gr4vyId ?? "";
+  const [instance, setInstance] = useState6(null);
+  const [threeDSMount, setThreeDSMount] = useState6(null);
+  useEffect5(() => {
+    const created = new SecureFields2({ 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]);
+  useEffect5(() => {
+    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(SecureFields2.Events.CARD_VAULT_SUCCESS, handleSuccess);
+    instance.addEventListener(SecureFields2.Events.CARD_VAULT_FAILURE, handleFailure);
+    instance.addEventListener(SecureFields2.Events.THREE_DS_START, handleThreeDSStart);
+    instance.addEventListener(SecureFields2.Events.THREE_DS_FINISH, handleThreeDSFinish);
+    return () => {
+      instance.removeEventListener?.(SecureFields2.Events.CARD_VAULT_SUCCESS, handleSuccess);
+      instance.removeEventListener?.(SecureFields2.Events.CARD_VAULT_FAILURE, handleFailure);
+      instance.removeEventListener?.(SecureFields2.Events.THREE_DS_START, handleThreeDSStart);
+      instance.removeEventListener?.(SecureFields2.Events.THREE_DS_FINISH, handleThreeDSFinish);
+    };
+  }, [instance]);
+  const registerField = useCallback5(
+    (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]
+  );
+  useEffect5(() => {
+    if (mountedCount >= FIELDS_REQUIRED_TO_BE_READY) setStatus("ready");
+  }, [mountedCount]);
+  const registerThreeDSecure = useCallback5(
+    (element, options) => {
+      threeDSElement.current = element;
+      threeDSOptions.current = options;
+      setThreeDSMount(element);
+    },
+    []
+  );
+  useEffect5(() => {
+    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 = useCallback5(() => {
+    challengeWaiter.current?.reject({
+      code: "three_ds_abandoned",
+      message: "The 3-D Secure challenge was abandoned."
+    });
+  }, []);
+  const vault = useCallback5(() => {
+    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 = useCallback5(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 = useCallback5(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__ */ jsx3(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 = useContext(SecureCardContext);
+  if (!ctx) throw new Error("useSecureCard must be used inside <SecureCardProvider>");
+  return ctx;
+}
+
+// src/SecureCardFields.tsx
+import { useContext as useContext2, useEffect as useEffect6, useRef as useRef5 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function useField(kind, options) {
+  const ctx = useContext2(SecureCardContext);
+  const hostRef = useRef5(null);
+  const instance = ctx?.instance ?? null;
+  useEffect6(() => {
+    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__ */ jsx4("div", { ref: useField("number", options), className, style });
+}
+function ExpiryField({ className, style, options }) {
+  return /* @__PURE__ */ jsx4("div", { ref: useField("expiry", options), className, style });
+}
+function SecurityCodeField({ className, style, options }) {
+  return /* @__PURE__ */ jsx4("div", { ref: useField("cvv", options), className, style });
+}
+function PostalCodeField({ className, style, options }) {
+  return /* @__PURE__ */ jsx4("div", { ref: useField("postalCode", options), className, style });
+}
 export {
+  CardNumberField,
   CheckoutEmbed,
+  ExpiryField,
   PaymentEmbed,
+  PostalCodeField,
+  SecureCardProvider,
+  SecurityCodeField,
   CheckoutEmbed as ThrottleCheckout,
   useCartSession,
+  useSecureCard,
   useThrottleCheckout,
   useThrottleEvents
 };