@sikka/aps 0.0.1

package/dist/react/index.js

@@ -0,0 +1,1863 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var index_exports = {};
+__export(index_exports, {
+  APSProvider: () => APSProvider,
+  ErrorDisplay: () => ErrorDisplay,
+  HostedCheckoutButton: () => HostedCheckoutButton,
+  PaymentStatus: () => PaymentStatus,
+  TokenizationForm: () => TokenizationForm,
+  useAPS: () => useAPS,
+  useCheckout: () => useCheckout,
+  usePayment: () => usePayment
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/react/APSProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var APSContext = (0, import_react.createContext)(void 0);
+var APSProvider = ({ client, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(APSContext.Provider, { value: { client }, children });
+};
+function useAPSContext() {
+  const context = (0, import_react.useContext)(APSContext);
+  if (context === void 0) {
+    throw new Error(
+      "useAPS must be used within an APSProvider. Make sure to wrap your app with <APSProvider client={aps}>...</APSProvider>"
+    );
+  }
+  return context;
+}
+
+// src/react/useAPS.ts
+function useAPS() {
+  const { client } = useAPSContext();
+  return client;
+}
+
+// src/react/useCheckout.ts
+var import_react2 = require("react");
+function useCheckout() {
+  const aps = useAPS();
+  const [state, setState] = (0, import_react2.useState)({
+    checkout: null,
+    isLoading: false,
+    error: null
+  });
+  const isMountedRef = (0, import_react2.useRef)(true);
+  const createCheckout = (0, import_react2.useCallback)(async (options) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const checkout = await aps.hostedCheckout.create(options);
+      if (isMountedRef.current) {
+        setState({
+          checkout,
+          isLoading: false,
+          error: null
+        });
+      }
+      return checkout;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const redirectToCheckout = (0, import_react2.useCallback)(() => {
+    const { checkout } = state;
+    if (!checkout?.redirectForm) {
+      throw new Error(
+        "No checkout session available. Call createCheckout() first."
+      );
+    }
+    const { url, method, params } = checkout.redirectForm;
+    const form = document.createElement("form");
+    form.method = method;
+    form.action = url;
+    Object.entries(params).forEach(([key, value]) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      input.value = value;
+      form.appendChild(input);
+    });
+    document.body.appendChild(form);
+    form.submit();
+  }, [state]);
+  const reset = (0, import_react2.useCallback)(() => {
+    setState({
+      checkout: null,
+      isLoading: false,
+      error: null
+    });
+  }, []);
+  return {
+    ...state,
+    createCheckout,
+    redirectToCheckout,
+    reset
+  };
+}
+
+// src/react/usePayment.ts
+var import_react3 = require("react");
+function usePayment() {
+  const aps = useAPS();
+  const [state, setState] = (0, import_react3.useState)({
+    payment: null,
+    status: null,
+    isLoading: false,
+    error: null
+  });
+  const isMountedRef = (0, import_react3.useRef)(true);
+  const createPaymentLink = (0, import_react3.useCallback)(async (options) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const payment = await aps.paymentLinks.create(options);
+      if (isMountedRef.current) {
+        setState({
+          payment,
+          status: "pending",
+          isLoading: false,
+          error: null
+        });
+      }
+      return payment;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const createCustomPayment = (0, import_react3.useCallback)(async (options) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const payment = await aps.customPaymentPage.charge(options);
+      if (isMountedRef.current) {
+        setState({
+          payment,
+          status: payment.status,
+          isLoading: false,
+          error: null
+        });
+      }
+      return payment;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const checkStatus = (0, import_react3.useCallback)(async (options) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const result = await aps.payments.query(options);
+      const status = result.status;
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          status,
+          isLoading: false,
+          error: null
+        }));
+      }
+      return status;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const confirmPayment = (0, import_react3.useCallback)(async (options) => {
+    const {
+      transactionId,
+      pollInterval = 2e3,
+      maxAttempts = 30
+    } = options;
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      let attempts = 0;
+      let finalStatus = "pending";
+      while (attempts < maxAttempts) {
+        const status = await checkStatus({ transactionId });
+        finalStatus = status;
+        if (["captured", "failed", "voided", "refunded", "cancelled"].includes(status)) {
+          break;
+        }
+        await new Promise((resolve) => setTimeout(resolve, pollInterval));
+        attempts++;
+      }
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          status: finalStatus,
+          isLoading: false,
+          error: null
+        }));
+      }
+      return finalStatus;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [checkStatus]);
+  const capture = (0, import_react3.useCallback)(async (transactionId, amount) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      await aps.payments.capture({ transactionId, amount });
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          status: "captured",
+          isLoading: false,
+          error: null
+        }));
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const refund = (0, import_react3.useCallback)(async (transactionId, amount, reason) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      await aps.payments.refund({ transactionId, amount, reason });
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          status: "refunded",
+          isLoading: false,
+          error: null
+        }));
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const voidPayment = (0, import_react3.useCallback)(async (transactionId, reason) => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      await aps.payments.void({ transactionId, reason });
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          status: "voided",
+          isLoading: false,
+          error: null
+        }));
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error
+        }));
+      }
+      throw error;
+    }
+  }, [aps]);
+  const reset = (0, import_react3.useCallback)(() => {
+    setState({
+      payment: null,
+      status: null,
+      isLoading: false,
+      error: null
+    });
+  }, []);
+  return {
+    ...state,
+    createPaymentLink,
+    createCustomPayment,
+    confirmPayment,
+    checkStatus,
+    capture,
+    refund,
+    void: voidPayment,
+    reset
+  };
+}
+
+// src/react/TokenizationForm.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function detectCardBrand(cardNumber) {
+  const number = cardNumber.replace(/\D/g, "");
+  if (/^4/.test(number)) return "visa";
+  if (/^5[1-5]/.test(number)) return "mastercard";
+  if (/^3[47]/.test(number)) return "amex";
+  if (/^6(?:011|5)/.test(number)) return "discover";
+  if (/^(?:2131|1800|35)/.test(number)) return "jcb";
+  if (/^9792/.test(number)) return "troy";
+  if (/^50/.test(number) || /^4571/.test(number)) return "mada";
+  return "unknown";
+}
+var DefaultIcons = {
+  visa: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#1A1F71", rx: "4", width: "48", height: "48" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        fill: "#fff",
+        d: "M19.5 30h-3l1.9-11.5h3L19.5 30zm11.4 0h-2.7l-1.7-8.2c-.2-.9-.4-1.7-.5-2.6-.1 0-.2.1-.3.2-.6.8-1.3 1.6-1.9 2.4L22.5 30h-3l3.1-11.5h2.8l.4 2.1c.7-1 1.5-2 2.3-2.9.9-1.2 2-1.7 3.4-1.7.5 0 1 0 1.5.1l-2.1 13.9zm6.6-11.3c-.8-.3-2.6-.7-4.6-.7-5.1 0-8.7 2.7-8.7 6.5 0 2.9 2.6 4.5 4.6 5.5 2 .9 2.7 1.6 2.7 2.4 0 1.3-1.6 1.9-3 1.9-2 0-3.1-.3-4.8-1l-.7-.3-.7 4.3c1.2.5 3.4 1 5.7 1 5.4 0 8.9-2.7 8.9-6.8 0-2.3-1.4-4-4.4-5.5-1.8-.9-2.9-1.6-2.9-2.5 0-.8.9-1.7 2.8-1.7 1.6 0 2.8.3 3.7.7l.4.2.7-4.2z"
+      }
+    )
+  ] }),
+  mastercard: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#000", rx: "4", width: "48", height: "48" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { fill: "#EB001B", cx: "18", cy: "24", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { fill: "#F79E1B", cx: "30", cy: "24", r: "10", opacity: "0.8" })
+  ] }),
+  amex: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#006FCF", rx: "4", width: "48", height: "48" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        fill: "#fff",
+        d: "M10 18h28v12H10V18zm2 2v8h24v-8H12z"
+      }
+    )
+  ] }),
+  mada: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#006C35", rx: "4", width: "48", height: "48" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        fill: "#fff",
+        d: "M12 20h24v8H12v-8zm2 2v4h20v-4H14z"
+      }
+    )
+  ] }),
+  unknown: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#666", rx: "4", width: "48", height: "48" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "#999", x: "10", y: "18", width: "28", height: "12", rx: "2" })
+  ] })
+};
+var defaultStyles = {
+  container: {
+    maxWidth: "480px",
+    margin: "0 auto"
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px"
+  },
+  inputGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  label: {
+    fontSize: "14px",
+    fontWeight: "500",
+    color: "#374151"
+  },
+  input: {
+    padding: "12px 16px",
+    fontSize: "16px",
+    border: "1px solid #D1D5DB",
+    borderRadius: "8px",
+    outline: "none",
+    transition: "border-color 0.2s"
+  },
+  inputError: {
+    borderColor: "#EF4444"
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "12px"
+  },
+  button: {
+    padding: "14px 24px",
+    fontSize: "16px",
+    fontWeight: "600",
+    color: "#fff",
+    backgroundColor: "#7C3AED",
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "background-color 0.2s"
+  },
+  buttonDisabled: {
+    backgroundColor: "#A78BFA",
+    cursor: "not-allowed"
+  },
+  securityNotice: {
+    padding: "12px",
+    backgroundColor: "#D1FAE5",
+    borderRadius: "8px",
+    fontSize: "13px",
+    color: "#065F46"
+  }
+};
+var TokenizationForm = ({
+  actionUrl,
+  formParams,
+  customerEmail = "",
+  onSuccess: _onSuccess,
+  // Success is handled via returnUrl redirect
+  onError,
+  styles = {},
+  icons = {},
+  labels = {},
+  placeholders = {},
+  disableFormatting = false,
+  showCardIcons = true,
+  showSecurityNotice = true,
+  className = {}
+}) => {
+  const [cardNumber, setCardNumber] = (0, import_react4.useState)("");
+  const [expiryDate, setExpiryDate] = (0, import_react4.useState)("");
+  const [cvv, setCvv] = (0, import_react4.useState)("");
+  const [cardHolderName, setCardHolderName] = (0, import_react4.useState)("");
+  const [email, setEmail] = (0, import_react4.useState)(customerEmail);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [cardBrand, setCardBrand] = (0, import_react4.useState)("unknown");
+  const mergedStyles = {
+    ...defaultStyles,
+    ...styles
+  };
+  const mergedIcons = {
+    ...DefaultIcons,
+    ...icons
+  };
+  const mergedLabels = {
+    cardNumber: "Card Number",
+    cardHolder: "Card Holder Name",
+    customerEmail: "Customer Email",
+    expiryDate: "Expiry Date",
+    cvv: "CVV",
+    submitButton: "Secure Payment",
+    processing: "Processing...",
+    ...labels
+  };
+  const mergedPlaceholders = {
+    cardNumber: "1234 5678 9012 3456",
+    cardHolder: "John Doe",
+    customerEmail: "customer@example.com",
+    expiryDate: "MM/YY",
+    cvv: "123",
+    ...placeholders
+  };
+  const formatCardNumber = (value) => {
+    if (disableFormatting) return value;
+    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+    const matches = v.match(/\d{4,16}/g);
+    const match = matches && matches[0] || "";
+    const parts = [];
+    for (let i = 0, len = match.length; i < len; i += 4) {
+      parts.push(match.substring(i, i + 4));
+    }
+    if (parts.length) {
+      return parts.join(" ");
+    }
+    return value;
+  };
+  const formatExpiryDate = (value) => {
+    if (disableFormatting) return value;
+    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+    if (v.length >= 2) {
+      return v.substring(0, 2) + "/" + v.substring(2, 4);
+    }
+    return v;
+  };
+  const validateForm = () => {
+    const newErrors = {};
+    if (!cardNumber || cardNumber.replace(/\s/g, "").length < 13) {
+      newErrors.cardNumber = "Invalid card number";
+    }
+    if (!expiryDate || expiryDate.length !== 5) {
+      newErrors.expiryDate = "Invalid expiry date";
+    }
+    if (!cvv || cvv.length < 3) {
+      newErrors.cvv = "Invalid CVV";
+    }
+    if (!cardHolderName || cardHolderName.length < 2) {
+      newErrors.cardHolder = "Card holder name is required";
+    }
+    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = "Invalid email address";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!validateForm()) {
+      onError?.("Please fill in all required fields correctly");
+      return;
+    }
+    setLoading(true);
+    const form = document.createElement("form");
+    form.method = "POST";
+    form.action = actionUrl;
+    form.style.display = "none";
+    Object.entries(formParams).forEach(([key, value]) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = key;
+      input.value = value;
+      form.appendChild(input);
+    });
+    const addHiddenInput = (name, value) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = name;
+      input.value = value;
+      form.appendChild(input);
+    };
+    const cleanCardNumber = cardNumber.replace(/\s/g, "");
+    const cleanExpiryDate = expiryDate.replace("/", "");
+    addHiddenInput("card_number", cleanCardNumber);
+    addHiddenInput("expiry_date", cleanExpiryDate);
+    addHiddenInput("card_security_code", cvv);
+    addHiddenInput("card_holder_name", cardHolderName);
+    document.body.appendChild(form);
+    form.submit();
+    setLoading(false);
+  };
+  const handleCardNumberChange = (e) => {
+    const formatted = formatCardNumber(e.target.value);
+    setCardNumber(formatted);
+    setCardBrand(detectCardBrand(formatted));
+    if (errors.cardNumber) {
+      setErrors({ ...errors, cardNumber: "" });
+    }
+  };
+  const handleExpiryDateChange = (e) => {
+    const formatted = formatExpiryDate(e.target.value);
+    setExpiryDate(formatted);
+    if (errors.expiryDate) {
+      setErrors({ ...errors, expiryDate: "" });
+    }
+  };
+  const handleCvvChange = (e) => {
+    const value = e.target.value.replace(/\D/g, "").substring(0, 4);
+    setCvv(value);
+    if (errors.cvv) {
+      setErrors({ ...errors, cvv: "" });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: mergedStyles.container, className: className.container || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, style: mergedStyles.form, className: className.form || "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardNumber }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "text",
+            value: cardNumber,
+            onChange: handleCardNumberChange,
+            placeholder: mergedPlaceholders.cardNumber,
+            maxLength: 19,
+            required: true,
+            style: {
+              ...mergedStyles.input,
+              ...errors.cardNumber ? mergedStyles.inputError : {},
+              paddingRight: showCardIcons ? "60px" : "16px"
+            },
+            className: className.input || ""
+          }
+        ),
+        showCardIcons && cardBrand !== "unknown" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: "12px",
+              top: "50%",
+              transform: "translateY(-50%)"
+            },
+            children: mergedIcons[cardBrand]
+          }
+        )
+      ] }),
+      errors.cardNumber && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardNumber })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardHolder }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "text",
+          value: cardHolderName,
+          onChange: (e) => {
+            setCardHolderName(e.target.value);
+            if (errors.cardHolder) {
+              setErrors({ ...errors, cardHolder: "" });
+            }
+          },
+          placeholder: mergedPlaceholders.cardHolder,
+          required: true,
+          style: {
+            ...mergedStyles.input,
+            ...errors.cardHolder ? mergedStyles.inputError : {}
+          },
+          className: className.input || ""
+        }
+      ),
+      errors.cardHolder && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardHolder })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.customerEmail }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "email",
+          value: email,
+          onChange: (e) => {
+            setEmail(e.target.value);
+            if (errors.email) {
+              setErrors({ ...errors, email: "" });
+            }
+          },
+          placeholder: mergedPlaceholders.customerEmail,
+          style: {
+            ...mergedStyles.input,
+            ...errors.email ? mergedStyles.inputError : {}
+          },
+          className: className.input || ""
+        }
+      ),
+      errors.email && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.email }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: "#6B7280" }, children: "Used to associate the saved card with the customer" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.expiryDate }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "text",
+            value: expiryDate,
+            onChange: handleExpiryDateChange,
+            placeholder: mergedPlaceholders.expiryDate,
+            maxLength: 5,
+            required: true,
+            style: {
+              ...mergedStyles.input,
+              ...errors.expiryDate ? mergedStyles.inputError : {}
+            },
+            className: className.input || ""
+          }
+        ),
+        errors.expiryDate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.expiryDate })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cvv }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "text",
+            value: cvv,
+            onChange: handleCvvChange,
+            placeholder: mergedPlaceholders.cvv,
+            maxLength: 4,
+            required: true,
+            style: {
+              ...mergedStyles.input,
+              ...errors.cvv ? mergedStyles.inputError : {}
+            },
+            className: className.input || ""
+          }
+        ),
+        errors.cvv && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cvv })
+      ] })
+    ] }),
+    showSecurityNotice && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: mergedStyles.securityNotice, children: "\u{1F512} Your card details are securely processed by Amazon Payment Services. We never store your card information." }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: loading,
+        style: {
+          ...mergedStyles.button,
+          ...loading ? mergedStyles.buttonDisabled : {}
+        },
+        className: className.button || "",
+        children: loading ? mergedLabels.processing : mergedLabels.submitButton
+      }
+    )
+  ] }) });
+};
+
+// src/constants.ts
+var ResponseCodes = {
+  // Success Codes
+  /** Transaction successful */
+  SUCCESS: "00000",
+  /** Payment link created successfully */
+  PAYMENT_LINK_SUCCESS: "48000",
+  /** Recurring payment successful */
+  RECURRING_SUCCESS: "14000",
+  // Authentication & Security
+  /** 3D Secure authentication failed */
+  AUTHENTICATION_FAILED: "10030",
+  /** 3D Secure not enrolled */
+  NOT_ENROLLED_3DS: "10031",
+  /** Signature mismatch */
+  SIGNATURE_MISMATCH: "00008",
+  /** Invalid access code */
+  INVALID_ACCESS_CODE: "00009",
+  /** Invalid merchant identifier */
+  INVALID_MERCHANT_ID: "00010",
+  // Card Errors
+  /** Card expired */
+  CARD_EXPIRED: "10035",
+  /** Invalid card number */
+  INVALID_CARD_NUMBER: "10036",
+  /** Invalid CVV */
+  INVALID_CVV: "10037",
+  /** Card not supported */
+  CARD_NOT_SUPPORTED: "10038",
+  /** Lost card */
+  LOST_CARD: "10039",
+  /** Stolen card */
+  STOLEN_CARD: "10040",
+  /** Restricted card */
+  RESTRICTED_CARD: "10041",
+  /** Card blocked */
+  CARD_BLOCKED: "10042",
+  /** Invalid expiry date */
+  INVALID_EXPIRY: "10043",
+  // Transaction Errors
+  /** Transaction declined */
+  DECLINED: "14001",
+  /** Insufficient funds */
+  INSUFFICIENT_FUNDS: "14002",
+  /** Transaction limit exceeded */
+  LIMIT_EXCEEDED: "14003",
+  /** Invalid transaction */
+  INVALID_TRANSACTION: "14004",
+  /** Duplicate transaction */
+  DUPLICATE_TRANSACTION: "14005",
+  /** Transaction not allowed */
+  TRANSACTION_NOT_ALLOWED: "14006",
+  /** Transaction expired */
+  TRANSACTION_EXPIRED: "14007",
+  /** Transaction already captured */
+  ALREADY_CAPTURED: "14008",
+  /** Transaction already voided */
+  ALREADY_VOIDED: "14009",
+  /** Transaction already refunded */
+  ALREADY_REFUNDED: "14010",
+  // Amount Errors
+  /** Invalid amount */
+  INVALID_AMOUNT: "15001",
+  /** Amount too small */
+  AMOUNT_TOO_SMALL: "15002",
+  /** Amount too large */
+  AMOUNT_TOO_LARGE: "15003",
+  /** Currency not supported */
+  CURRENCY_NOT_SUPPORTED: "15004",
+  // Parameter Errors
+  /** Missing parameter */
+  MISSING_PARAMETER: "00001",
+  /** Invalid parameter format */
+  INVALID_PARAMETER: "00002",
+  /** Invalid command */
+  INVALID_COMMAND: "00003",
+  /** Invalid language */
+  INVALID_LANGUAGE: "00004",
+  /** Invalid currency */
+  INVALID_CURRENCY: "00005",
+  /** Invalid return URL */
+  INVALID_RETURN_URL: "00006",
+  /** Invalid customer email */
+  INVALID_EMAIL: "00007",
+  /** Parameter value not allowed */
+  PARAMETER_VALUE_NOT_ALLOWED: "00033",
+  // Tokenization Errors
+  /** Token not found */
+  TOKEN_NOT_FOUND: "16001",
+  /** Token expired */
+  TOKEN_EXPIRED: "16002",
+  /** Token already used */
+  TOKEN_ALREADY_USED: "16003",
+  /** Invalid token */
+  INVALID_TOKEN: "16004",
+  // System Errors
+  /** System error */
+  SYSTEM_ERROR: "90001",
+  /** Service unavailable */
+  SERVICE_UNAVAILABLE: "90002",
+  /** Timeout */
+  TIMEOUT: "90003",
+  /** Database error */
+  DATABASE_ERROR: "90004",
+  /** Internal error */
+  INTERNAL_ERROR: "90005"
+};
+var ErrorCategories = {
+  /** Success - no error */
+  SUCCESS: "success",
+  /** Card-related errors (expired, invalid, blocked) */
+  CARD_ERROR: "card_error",
+  /** Authentication errors (3DS, signature) */
+  AUTHENTICATION_ERROR: "authentication_error",
+  /** Transaction errors (declined, insufficient funds) */
+  TRANSACTION_ERROR: "transaction_error",
+  /** Amount/currency errors */
+  AMOUNT_ERROR: "amount_error",
+  /** Parameter validation errors */
+  VALIDATION_ERROR: "validation_error",
+  /** Tokenization errors */
+  TOKEN_ERROR: "token_error",
+  /** System/technical errors */
+  SYSTEM_ERROR: "system_error",
+  /** Errors that can be retried */
+  RETRYABLE: "retryable",
+  /** Errors that should not be retried */
+  NON_RETRYABLE: "non_retryable"
+};
+var ERROR_CODE_TO_CATEGORY = {
+  [ResponseCodes.SUCCESS]: ErrorCategories.SUCCESS,
+  [ResponseCodes.PAYMENT_LINK_SUCCESS]: ErrorCategories.SUCCESS,
+  [ResponseCodes.RECURRING_SUCCESS]: ErrorCategories.SUCCESS,
+  // Card errors
+  [ResponseCodes.CARD_EXPIRED]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.INVALID_CARD_NUMBER]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.INVALID_CVV]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.CARD_NOT_SUPPORTED]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.LOST_CARD]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.STOLEN_CARD]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.RESTRICTED_CARD]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.CARD_BLOCKED]: ErrorCategories.CARD_ERROR,
+  [ResponseCodes.INVALID_EXPIRY]: ErrorCategories.CARD_ERROR,
+  // Authentication errors
+  [ResponseCodes.AUTHENTICATION_FAILED]: ErrorCategories.AUTHENTICATION_ERROR,
+  [ResponseCodes.NOT_ENROLLED_3DS]: ErrorCategories.AUTHENTICATION_ERROR,
+  [ResponseCodes.SIGNATURE_MISMATCH]: ErrorCategories.AUTHENTICATION_ERROR,
+  [ResponseCodes.INVALID_ACCESS_CODE]: ErrorCategories.AUTHENTICATION_ERROR,
+  [ResponseCodes.INVALID_MERCHANT_ID]: ErrorCategories.AUTHENTICATION_ERROR,
+  // Transaction errors
+  [ResponseCodes.DECLINED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.INSUFFICIENT_FUNDS]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.LIMIT_EXCEEDED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.INVALID_TRANSACTION]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.DUPLICATE_TRANSACTION]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.TRANSACTION_NOT_ALLOWED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.TRANSACTION_EXPIRED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.ALREADY_CAPTURED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.ALREADY_VOIDED]: ErrorCategories.TRANSACTION_ERROR,
+  [ResponseCodes.ALREADY_REFUNDED]: ErrorCategories.TRANSACTION_ERROR,
+  // Amount errors
+  [ResponseCodes.INVALID_AMOUNT]: ErrorCategories.AMOUNT_ERROR,
+  [ResponseCodes.AMOUNT_TOO_SMALL]: ErrorCategories.AMOUNT_ERROR,
+  [ResponseCodes.AMOUNT_TOO_LARGE]: ErrorCategories.AMOUNT_ERROR,
+  [ResponseCodes.CURRENCY_NOT_SUPPORTED]: ErrorCategories.AMOUNT_ERROR,
+  // Validation errors
+  [ResponseCodes.MISSING_PARAMETER]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_PARAMETER]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_COMMAND]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_LANGUAGE]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_CURRENCY]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_RETURN_URL]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.INVALID_EMAIL]: ErrorCategories.VALIDATION_ERROR,
+  [ResponseCodes.PARAMETER_VALUE_NOT_ALLOWED]: ErrorCategories.VALIDATION_ERROR,
+  // Token errors
+  [ResponseCodes.TOKEN_NOT_FOUND]: ErrorCategories.TOKEN_ERROR,
+  [ResponseCodes.TOKEN_EXPIRED]: ErrorCategories.TOKEN_ERROR,
+  [ResponseCodes.TOKEN_ALREADY_USED]: ErrorCategories.TOKEN_ERROR,
+  [ResponseCodes.INVALID_TOKEN]: ErrorCategories.TOKEN_ERROR,
+  // System errors
+  [ResponseCodes.SYSTEM_ERROR]: ErrorCategories.SYSTEM_ERROR,
+  [ResponseCodes.SERVICE_UNAVAILABLE]: ErrorCategories.SYSTEM_ERROR,
+  [ResponseCodes.TIMEOUT]: ErrorCategories.SYSTEM_ERROR,
+  [ResponseCodes.DATABASE_ERROR]: ErrorCategories.SYSTEM_ERROR,
+  [ResponseCodes.INTERNAL_ERROR]: ErrorCategories.SYSTEM_ERROR
+};
+var RETRYABLE_CODES = [
+  ResponseCodes.TIMEOUT,
+  ResponseCodes.SERVICE_UNAVAILABLE,
+  ResponseCodes.SYSTEM_ERROR,
+  ResponseCodes.INTERNAL_ERROR,
+  ResponseCodes.DATABASE_ERROR
+];
+function categorizeError(code) {
+  return ERROR_CODE_TO_CATEGORY[code] || ErrorCategories.SYSTEM_ERROR;
+}
+function isRetryableError(code) {
+  return RETRYABLE_CODES.includes(code);
+}
+
+// src/errors.ts
+var ERROR_DETAILS_MAP = {
+  // Success codes
+  [ResponseCodes.SUCCESS]: {
+    message: "Transaction completed successfully.",
+    action: "No action needed. Proceed with order fulfillment.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html"
+  },
+  [ResponseCodes.PAYMENT_LINK_SUCCESS]: {
+    message: "Payment link created successfully.",
+    action: "Share the payment link with your customer via email, SMS, or any channel.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html"
+  },
+  [ResponseCodes.RECURRING_SUCCESS]: {
+    message: "Recurring payment processed successfully.",
+    action: "Payment has been charged. Update subscription status in your system.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html"
+  },
+  // Authentication & Security
+  [ResponseCodes.AUTHENTICATION_FAILED]: {
+    message: "3D Secure authentication failed. The customer could not verify their identity.",
+    action: "Ask the customer to check their 3D Secure password or use a different card. Some banks require SMS verification - ensure customer has network coverage.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#_3d_secure",
+    httpStatus: 402
+  },
+  [ResponseCodes.NOT_ENROLLED_3DS]: {
+    message: "Card is not enrolled in 3D Secure.",
+    action: "The card does not support 3D Secure. You can proceed without 3DS or ask customer to use a different card.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#_3d_secure"
+  },
+  [ResponseCodes.SIGNATURE_MISMATCH]: {
+    message: "Request signature is invalid.",
+    action: "Check that your request_secret is correct and that parameters are being signed in the correct order. Use the SDK's built-in signing methods.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#signature_calculation",
+    httpStatus: 401
+  },
+  [ResponseCodes.INVALID_ACCESS_CODE]: {
+    message: "Invalid access code.",
+    action: "Verify your APS_ACCESS_CODE environment variable matches the value in your APS dashboard under Integration Settings.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#credentials",
+    httpStatus: 401
+  },
+  [ResponseCodes.INVALID_MERCHANT_ID]: {
+    message: "Invalid merchant identifier.",
+    action: "Verify your APS_MERCHANT_ID environment variable matches your APS dashboard. Ensure you're using the correct environment (sandbox vs production).",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#credentials",
+    httpStatus: 401
+  },
+  // Card Errors
+  [ResponseCodes.CARD_EXPIRED]: {
+    message: "The card has expired.",
+    action: "Ask the customer to check the expiry date on their card and enter it correctly, or use a different card.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.INVALID_CARD_NUMBER]: {
+    message: "The card number is invalid.",
+    action: "Ask the customer to check their card number and try again. Ensure no spaces or dashes are included.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.INVALID_CVV]: {
+    message: "The CVV code is invalid.",
+    action: "Ask the customer to check the CVV on the back of their card (3 digits for Visa/MC, 4 for Amex) and enter it correctly.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.CARD_NOT_SUPPORTED]: {
+    message: "This card type is not supported.",
+    action: "The customer is using a card type not accepted by your merchant account. Ask them to use Visa, Mastercard, or MADA.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#payment_methods",
+    httpStatus: 402
+  },
+  [ResponseCodes.LOST_CARD]: {
+    message: "The card has been reported lost.",
+    action: "Do not retry. Ask the customer to use a different card and contact their bank.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.STOLEN_CARD]: {
+    message: "The card has been reported stolen.",
+    action: "Do not retry. Ask the customer to use a different card and contact their bank immediately.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.RESTRICTED_CARD]: {
+    message: "The card has restrictions that prevent this transaction.",
+    action: "The card may be restricted for online or international use. Ask the customer to contact their bank or use a different card.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.CARD_BLOCKED]: {
+    message: "The card has been blocked by the issuing bank.",
+    action: "Ask the customer to contact their bank to unblock the card or use a different card.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.INVALID_EXPIRY]: {
+    message: "The expiry date is invalid.",
+    action: "Ask the customer to check the expiry date format (MM/YY) and ensure the card has not expired.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#card_errors",
+    httpStatus: 402
+  },
+  // Transaction Errors
+  [ResponseCodes.DECLINED]: {
+    message: "The transaction was declined by the issuing bank.",
+    action: "Ask the customer to contact their bank or use a different card. The bank does not provide specific reasons for declines.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#declined_transactions",
+    httpStatus: 402
+  },
+  [ResponseCodes.INSUFFICIENT_FUNDS]: {
+    message: "The card has insufficient funds.",
+    action: "Ask the customer to use a different card or payment method, or reduce the transaction amount.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#transaction_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.LIMIT_EXCEEDED]: {
+    message: "The transaction amount exceeds the card limit.",
+    action: "The transaction may exceed the customer's daily limit or card limit. Ask them to contact their bank or use a different card.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#transaction_errors",
+    httpStatus: 402
+  },
+  [ResponseCodes.INVALID_TRANSACTION]: {
+    message: "The transaction is invalid.",
+    action: "Check that all required parameters are provided correctly. Ensure the amount is valid and currency is supported.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#transaction_errors",
+    httpStatus: 400
+  },
+  [ResponseCodes.DUPLICATE_TRANSACTION]: {
+    message: "A duplicate transaction was detected.",
+    action: "This transaction appears to be a duplicate. Use a unique merchant_reference for each transaction.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#idempotency",
+    httpStatus: 409
+  },
+  [ResponseCodes.TRANSACTION_NOT_ALLOWED]: {
+    message: "This transaction type is not allowed for this merchant.",
+    action: "Your merchant account may not be configured for this transaction type. Contact APS support to enable the required service.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#merchant_setup",
+    httpStatus: 403
+  },
+  [ResponseCodes.TRANSACTION_EXPIRED]: {
+    message: "The transaction has expired.",
+    action: "The authorization window has expired. Create a new transaction.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#transaction_lifecycle",
+    httpStatus: 410
+  },
+  [ResponseCodes.ALREADY_CAPTURED]: {
+    message: "The transaction has already been captured.",
+    action: "This transaction was already captured. Check your records or query the transaction status.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#capture",
+    httpStatus: 409
+  },
+  [ResponseCodes.ALREADY_VOIDED]: {
+    message: "The transaction has already been voided.",
+    action: "This transaction was already voided. No further action can be taken on it.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#void",
+    httpStatus: 409
+  },
+  [ResponseCodes.ALREADY_REFUNDED]: {
+    message: "The transaction has already been refunded.",
+    action: "This transaction was already refunded. Check the refund status for details.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#refund",
+    httpStatus: 409
+  },
+  // Amount Errors
+  [ResponseCodes.INVALID_AMOUNT]: {
+    message: "The transaction amount is invalid.",
+    action: "Ensure the amount is a positive number in the smallest currency unit (e.g., cents, fils). Amount should not contain decimals.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#amount_format",
+    httpStatus: 400
+  },
+  [ResponseCodes.AMOUNT_TOO_SMALL]: {
+    message: "The transaction amount is below the minimum allowed.",
+    action: "The amount is below the minimum transaction limit. Increase the amount or contact APS for limit adjustments.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#amount_limits",
+    httpStatus: 400
+  },
+  [ResponseCodes.AMOUNT_TOO_LARGE]: {
+    message: "The transaction amount exceeds the maximum allowed.",
+    action: "The amount exceeds your merchant transaction limit. Contact APS support to increase your limit.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#amount_limits",
+    httpStatus: 400
+  },
+  [ResponseCodes.CURRENCY_NOT_SUPPORTED]: {
+    message: "The currency is not supported.",
+    action: "Use a supported currency (SAR, AED, USD, EUR, etc.). Check APS documentation for the full list.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#currencies",
+    httpStatus: 400
+  },
+  // Parameter Errors
+  [ResponseCodes.MISSING_PARAMETER]: {
+    message: "A required parameter is missing.",
+    action: "Check that all required parameters are provided. Common missing fields: merchant_reference, amount, currency, customer_email.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#required_parameters",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_PARAMETER]: {
+    message: "A parameter has an invalid format or value.",
+    action: "Check parameter formats: emails must be valid, amounts must be numeric, dates must be in correct format.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#parameter_formats",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_COMMAND]: {
+    message: "The command is invalid or not recognized.",
+    action: "Use a valid command: PURCHASE, AUTHORIZATION, CAPTURE, REFUND, VOID, TOKENIZATION, etc.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#commands",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_LANGUAGE]: {
+    message: "The language code is invalid.",
+    action: 'Use "en" for English or "ar" for Arabic.',
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#language_codes",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_CURRENCY]: {
+    message: "The currency code is invalid.",
+    action: "Use a valid 3-letter ISO currency code (SAR, AED, USD, EUR, etc.).",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#currencies",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_RETURN_URL]: {
+    message: "The return URL is invalid.",
+    action: "Ensure the return_url is a valid HTTPS URL and properly URL-encoded if needed.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#return_url",
+    httpStatus: 400
+  },
+  [ResponseCodes.INVALID_EMAIL]: {
+    message: "The customer email is invalid.",
+    action: "Ensure the customer_email is a valid email format (e.g., customer@example.com).",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#customer_email",
+    httpStatus: 400
+  },
+  [ResponseCodes.PARAMETER_VALUE_NOT_ALLOWED]: {
+    message: "A parameter value is not allowed for your merchant account.",
+    action: "This error often occurs when trying to use tokenization (remember_me) but your merchant account does not have tokenization enabled. Contact APS support to enable tokenization, or set tokenize: false. Other causes: using a payment method not enabled for your account, or an invalid parameter value.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#merchant_setup",
+    httpStatus: 400
+  },
+  // Tokenization Errors
+  [ResponseCodes.TOKEN_NOT_FOUND]: {
+    message: "The card token was not found.",
+    action: "The token may have been deleted or never created. Ask the customer to re-enter their card details.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#tokenization",
+    httpStatus: 404
+  },
+  [ResponseCodes.TOKEN_EXPIRED]: {
+    message: "The card token has expired.",
+    action: "Tokens expire after a period of inactivity. Ask the customer to re-enter their card details.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#token_expiry",
+    httpStatus: 410
+  },
+  [ResponseCodes.TOKEN_ALREADY_USED]: {
+    message: "The token has already been used.",
+    action: "Each token can only be used once for security. Create a new token for this transaction.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#token_usage",
+    httpStatus: 409
+  },
+  [ResponseCodes.INVALID_TOKEN]: {
+    message: "The token is invalid.",
+    action: "Check that the token was properly generated and is being passed correctly.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#tokenization",
+    httpStatus: 400
+  },
+  // System Errors
+  [ResponseCodes.SYSTEM_ERROR]: {
+    message: "A system error occurred.",
+    action: "This is a temporary issue on APS side. Wait a moment and retry the transaction.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#system_errors",
+    httpStatus: 500
+  },
+  [ResponseCodes.SERVICE_UNAVAILABLE]: {
+    message: "The service is temporarily unavailable.",
+    action: "APS is experiencing high load or maintenance. Wait a moment and retry.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#system_errors",
+    httpStatus: 503
+  },
+  [ResponseCodes.TIMEOUT]: {
+    message: "The request timed out.",
+    action: "The request took too long to complete. Check your network connection and retry.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#timeouts",
+    httpStatus: 504
+  },
+  [ResponseCodes.DATABASE_ERROR]: {
+    message: "A database error occurred.",
+    action: "Temporary database issue. Wait a moment and retry the transaction.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#system_errors",
+    httpStatus: 500
+  },
+  [ResponseCodes.INTERNAL_ERROR]: {
+    message: "An internal error occurred.",
+    action: "Unexpected error on APS side. Contact APS support if this persists.",
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#support",
+    httpStatus: 500
+  }
+};
+function getErrorDetails(code) {
+  const details = ERROR_DETAILS_MAP[code];
+  const category = categorizeError(code);
+  const retryable = isRetryableError(code);
+  if (details) {
+    return {
+      code,
+      message: details.message,
+      action: details.action,
+      category,
+      retryable,
+      documentation: details.documentation,
+      httpStatus: details.httpStatus
+    };
+  }
+  return {
+    code,
+    message: `An unknown error occurred (code: ${code}).`,
+    action: "Contact APS support with this error code for assistance.",
+    category: ErrorCategories.SYSTEM_ERROR,
+    retryable: false,
+    documentation: "https://paymentservices.amazon.com/docs/EN/index.html#support",
+    httpStatus: 500
+  };
+}
+function isRetryableError2(code) {
+  return isRetryableError(code);
+}
+
+// src/react/ErrorDisplay.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultStyles2 = {
+  container: {
+    padding: "16px",
+    borderRadius: "8px",
+    border: "1px solid #EF4444",
+    backgroundColor: "#FEF2F2",
+    color: "#991B1B"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "12px"
+  },
+  title: {
+    fontWeight: "600",
+    fontSize: "16px",
+    color: "#DC2626"
+  },
+  code: {
+    fontSize: "12px",
+    padding: "2px 8px",
+    backgroundColor: "#FEE2E2",
+    borderRadius: "4px",
+    fontFamily: "monospace"
+  },
+  message: {
+    fontSize: "14px",
+    marginBottom: "8px",
+    lineHeight: "1.5"
+  },
+  action: {
+    fontSize: "13px",
+    color: "#7F1D1D",
+    marginBottom: "12px",
+    padding: "8px",
+    backgroundColor: "#FEE2E2",
+    borderRadius: "4px"
+  },
+  actions: {
+    display: "flex",
+    gap: "8px",
+    marginTop: "12px"
+  },
+  button: {
+    padding: "8px 16px",
+    borderRadius: "6px",
+    fontSize: "14px",
+    fontWeight: "500",
+    cursor: "pointer",
+    border: "none",
+    transition: "opacity 0.2s"
+  },
+  buttonRetry: {
+    backgroundColor: "#DC2626",
+    color: "#fff"
+  },
+  buttonDismiss: {
+    backgroundColor: "transparent",
+    color: "#7F1D1D",
+    border: "1px solid #EF4444"
+  },
+  documentation: {
+    fontSize: "12px",
+    marginTop: "12px",
+    color: "#991B1B"
+  }
+};
+var ErrorDisplay = ({
+  error,
+  onRetry,
+  onDismiss,
+  title: customTitle,
+  showDocumentation = true,
+  styles: customStyles = {},
+  className = ""
+}) => {
+  const styles = {
+    container: { ...defaultStyles2.container, ...customStyles.container },
+    header: { ...defaultStyles2.header, ...customStyles.header },
+    title: { ...defaultStyles2.title, ...customStyles.title },
+    code: { ...defaultStyles2.code, ...customStyles.code },
+    message: { ...defaultStyles2.message, ...customStyles.message },
+    action: { ...defaultStyles2.action, ...customStyles.action },
+    actions: { ...defaultStyles2.actions, ...customStyles.actions },
+    button: { ...defaultStyles2.button, ...customStyles.button },
+    buttonRetry: { ...defaultStyles2.buttonRetry, ...customStyles.buttonRetry },
+    buttonDismiss: { ...defaultStyles2.buttonDismiss, ...customStyles.buttonDismiss },
+    documentation: { ...defaultStyles2.documentation, ...customStyles.documentation }
+  };
+  let errorCode;
+  let errorMessage;
+  let errorDetails = null;
+  let canRetry = false;
+  if (typeof error === "string") {
+    errorMessage = error;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+    if ("code" in error) {
+      errorCode = error.code;
+      errorDetails = getErrorDetails(errorCode);
+      canRetry = isRetryableError2(errorCode);
+    }
+  } else {
+    errorMessage = "An unknown error occurred";
+  }
+  const title = customTitle || errorDetails?.category.toUpperCase() || "Error";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.container, className, role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          style: { flexShrink: 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+              fill: "#DC2626"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles.title, children: title }),
+      errorCode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles.code, children: errorCode })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.message, children: errorDetails?.message || errorMessage }),
+    errorDetails?.action && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.action, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Suggested action:" }),
+      " ",
+      errorDetails.action
+    ] }),
+    (onRetry || onDismiss) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.actions, children: [
+      onRetry && canRetry && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: onRetry,
+          style: { ...styles.button, ...styles.buttonRetry },
+          type: "button",
+          children: "Try Again"
+        }
+      ),
+      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: onDismiss,
+          style: { ...styles.button, ...styles.buttonDismiss },
+          type: "button",
+          children: "Dismiss"
+        }
+      )
+    ] }),
+    showDocumentation && errorDetails?.documentation && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.documentation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "a",
+      {
+        href: errorDetails.documentation,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { color: "#991B1B", textDecoration: "underline" },
+        children: "Learn more about this error \u2192"
+      }
+    ) })
+  ] });
+};
+
+// src/react/PaymentStatus.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function getStatusConfig(status) {
+  switch (status.toLowerCase()) {
+    case "captured":
+    case "success":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Successful",
+        color: "#059669",
+        bgColor: "#D1FAE5",
+        borderColor: "#10B981"
+      };
+    case "authorized":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Authorized",
+        color: "#0891B2",
+        bgColor: "#CFFAFE",
+        borderColor: "#06B6D4"
+      };
+    case "pending":
+    case "3ds":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Pending",
+        color: "#D97706",
+        bgColor: "#FEF3C7",
+        borderColor: "#F59E0B"
+      };
+    case "failed":
+    case "declined":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Failed",
+        color: "#DC2626",
+        bgColor: "#FEE2E2",
+        borderColor: "#EF4444"
+      };
+    case "voided":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M6 18L18 6M6 6l12 12",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Voided",
+        color: "#6B7280",
+        bgColor: "#F3F4F6",
+        borderColor: "#9CA3AF"
+      };
+    case "refunded":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Refunded",
+        color: "#7C3AED",
+        bgColor: "#EDE9FE",
+        borderColor: "#8B5CF6"
+      };
+    case "cancelled":
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M6 18L18 6M6 6l12 12",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Payment Cancelled",
+        color: "#6B7280",
+        bgColor: "#F3F4F6",
+        borderColor: "#9CA3AF"
+      };
+    default:
+      return {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        title: "Unknown Status",
+        color: "#6B7280",
+        bgColor: "#F3F4F6",
+        borderColor: "#9CA3AF"
+      };
+  }
+}
+function formatAmount(amount, currency) {
+  const majorUnits = amount / 100;
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  });
+  return formatter.format(majorUnits);
+}
+function getSizeStyles(size) {
+  switch (size) {
+    case "small":
+      return { padding: "12px", iconSize: 20, fontSize: "14px" };
+    case "large":
+      return { padding: "24px", iconSize: 32, fontSize: "18px" };
+    default:
+      return { padding: "16px", iconSize: 24, fontSize: "16px" };
+  }
+}
+var PaymentStatus = ({
+  status,
+  amount,
+  currency = "USD",
+  transactionId,
+  paymentMethod,
+  title: customTitle,
+  showAmount = true,
+  showTransactionId = true,
+  styles: customStyles = {},
+  className = "",
+  size = "medium"
+}) => {
+  const config = getStatusConfig(status);
+  const sizeStyles = getSizeStyles(size);
+  const displayTitle = customTitle || config.title;
+  const styles = {
+    container: {
+      padding: sizeStyles.padding,
+      borderRadius: "8px",
+      border: `1px solid ${config.borderColor}`,
+      backgroundColor: config.bgColor,
+      color: config.color,
+      ...customStyles.container
+    },
+    icon: {
+      flexShrink: 0,
+      ...customStyles.icon
+    },
+    content: {
+      flex: 1,
+      ...customStyles.content
+    },
+    title: {
+      fontWeight: "600",
+      fontSize: sizeStyles.fontSize,
+      marginBottom: "4px",
+      ...customStyles.title
+    },
+    amount: {
+      fontSize: "24px",
+      fontWeight: "700",
+      marginTop: "8px",
+      ...customStyles.amount
+    },
+    details: {
+      marginTop: "12px",
+      paddingTop: "12px",
+      borderTop: `1px solid ${config.borderColor}`,
+      ...customStyles.details
+    },
+    detail: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "4px",
+      ...customStyles.detail
+    },
+    detailLabel: {
+      fontSize: "14px",
+      opacity: 0.8,
+      ...customStyles.detailLabel
+    },
+    detailValue: {
+      fontSize: "14px",
+      fontWeight: "500",
+      fontFamily: "monospace",
+      ...customStyles.detailValue
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.container, className, role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...styles.icon, width: sizeStyles.iconSize, height: sizeStyles.iconSize }, children: config.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.title, children: displayTitle }),
+      showAmount && amount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.amount, children: formatAmount(amount, currency) }),
+      (showTransactionId || paymentMethod) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.details, children: [
+        showTransactionId && transactionId && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.detail, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailLabel, children: "Transaction ID:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailValue, children: transactionId })
+        ] }),
+        paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.detail, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailLabel, children: "Payment Method:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailValue, children: paymentMethod.toUpperCase() })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.detail, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailLabel, children: "Status:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.detailValue, children: status.toUpperCase() })
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/react/HostedCheckoutButton.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultStyles3 = {
+  button: {
+    padding: "14px 28px",
+    fontSize: "16px",
+    fontWeight: "600",
+    color: "#fff",
+    backgroundColor: "#7C3AED",
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    minWidth: "200px"
+  },
+  buttonDisabled: {
+    backgroundColor: "#A78BFA",
+    cursor: "not-allowed",
+    opacity: 0.7
+  },
+  buttonLoading: {
+    cursor: "wait",
+    opacity: 0.8
+  },
+  errorContainer: {
+    marginTop: "16px"
+  }
+};
+var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: { animation: "spin 1s linear infinite" },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+    ` }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeDasharray: "31.42",
+          strokeDashoffset: "10",
+          opacity: "0.25"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M12 2a10 10 0 0 1 10 10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+var HostedCheckoutButton = ({
+  order,
+  returnUrl,
+  allowedPaymentMethods,
+  hideShipping = false,
+  children,
+  onCheckoutCreated,
+  onError,
+  styles: customStyles = {},
+  className = "",
+  disabled = false,
+  showError = true,
+  loadingComponent
+}) => {
+  const { createCheckout, redirectToCheckout, isLoading, error, reset } = useCheckout();
+  const [isRedirecting, setIsRedirecting] = (0, import_react5.useState)(false);
+  const styles = {
+    button: { ...defaultStyles3.button, ...customStyles.button },
+    buttonDisabled: { ...defaultStyles3.buttonDisabled, ...customStyles.buttonDisabled },
+    buttonLoading: { ...defaultStyles3.buttonLoading, ...customStyles.buttonLoading },
+    errorContainer: { ...defaultStyles3.errorContainer, ...customStyles.errorContainer }
+  };
+  const handleClick = async () => {
+    if (isLoading || isRedirecting) return;
+    reset();
+    try {
+      const options = {
+        order,
+        successUrl: returnUrl,
+        failureUrl: returnUrl,
+        cancelUrl: returnUrl,
+        allowedPaymentMethods,
+        hideShipping
+      };
+      const checkout = await createCheckout(options);
+      onCheckoutCreated?.(checkout);
+      setIsRedirecting(true);
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      redirectToCheckout();
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      onError?.(error2);
+    } finally {
+      setIsRedirecting(false);
+    }
+  };
+  const isDisabled = disabled || isLoading || isRedirecting;
+  const buttonStyle = {
+    ...styles.button,
+    ...isDisabled ? styles.buttonDisabled : {},
+    ...isLoading || isRedirecting ? styles.buttonLoading : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        onClick: handleClick,
+        disabled: isDisabled,
+        style: buttonStyle,
+        className,
+        type: "button",
+        children: isLoading || isRedirecting ? loadingComponent || /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingSpinner, {}),
+          isRedirecting ? "Redirecting..." : "Processing..."
+        ] }) : children
+      }
+    ),
+    showError && error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.errorContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ErrorDisplay,
+      {
+        error,
+        onDismiss: reset,
+        onRetry: handleClick
+      }
+    ) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  APSProvider,
+  ErrorDisplay,
+  HostedCheckoutButton,
+  PaymentStatus,
+  TokenizationForm,
+  useAPS,
+  useCheckout,
+  usePayment
+});