@sikka/aps 0.0.2 → 0.0.4

package/dist/chunk-TGVOU6OE.mjs

@@ -1,409 +0,0 @@
-// src/react/TokenizationForm.tsx
-import { useState } from "react";
-import { jsx, jsxs } from "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__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
-    /* @__PURE__ */ jsx("rect", { fill: "#1A1F71", rx: "4", width: "48", height: "48" }),
-    /* @__PURE__ */ 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__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
-    /* @__PURE__ */ jsx("rect", { fill: "#000", rx: "4", width: "48", height: "48" }),
-    /* @__PURE__ */ jsx("circle", { fill: "#EB001B", cx: "18", cy: "24", r: "10" }),
-    /* @__PURE__ */ jsx("circle", { fill: "#F79E1B", cx: "30", cy: "24", r: "10", opacity: "0.8" })
-  ] }),
-  amex: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
-    /* @__PURE__ */ jsx("rect", { fill: "#006FCF", rx: "4", width: "48", height: "48" }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "#fff",
-        d: "M10 18h28v12H10V18zm2 2v8h24v-8H12z"
-      }
-    )
-  ] }),
-  mada: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
-    /* @__PURE__ */ jsx("rect", { fill: "#006C35", rx: "4", width: "48", height: "48" }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "#fff",
-        d: "M12 20h24v8H12v-8zm2 2v4h20v-4H14z"
-      }
-    )
-  ] }),
-  unknown: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", className: "w-8 h-8", children: [
-    /* @__PURE__ */ jsx("rect", { fill: "#666", rx: "4", width: "48", height: "48" }),
-    /* @__PURE__ */ 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] = useState("");
-  const [expiryDate, setExpiryDate] = useState("");
-  const [cvv, setCvv] = useState("");
-  const [cardHolderName, setCardHolderName] = useState("");
-  const [email, setEmail] = useState(customerEmail);
-  const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState({});
-  const [cardBrand, setCardBrand] = 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__ */ jsx("div", { style: mergedStyles.container, className: className.container || "", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: mergedStyles.form, className: className.form || "", children: [
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardNumber }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ 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__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              right: "12px",
-              top: "50%",
-              transform: "translateY(-50%)"
-            },
-            children: mergedIcons[cardBrand]
-          }
-        )
-      ] }),
-      errors.cardNumber && /* @__PURE__ */ jsx("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardNumber })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cardHolder }),
-      /* @__PURE__ */ 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__ */ jsx("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cardHolder })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-      /* @__PURE__ */ jsx("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.customerEmail }),
-      /* @__PURE__ */ 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__ */ jsx("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.email }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6B7280" }, children: "Used to associate the saved card with the customer" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: mergedStyles.row, children: [
-      /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-        /* @__PURE__ */ jsx("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.expiryDate }),
-        /* @__PURE__ */ 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__ */ jsx("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.expiryDate })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: mergedStyles.inputGroup, className: className.inputGroup || "", children: [
-        /* @__PURE__ */ jsx("label", { style: mergedStyles.label, className: className.label || "", children: mergedLabels.cvv }),
-        /* @__PURE__ */ 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__ */ jsx("span", { style: { color: "#EF4444", fontSize: "12px" }, children: errors.cvv })
-      ] })
-    ] }),
-    showSecurityNotice && /* @__PURE__ */ 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__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        disabled: loading,
-        style: {
-          ...mergedStyles.button,
-          ...loading ? mergedStyles.buttonDisabled : {}
-        },
-        className: className.button || "",
-        children: loading ? mergedLabels.processing : mergedLabels.submitButton
-      }
-    )
-  ] }) });
-};
-
-export {
-  TokenizationForm
-};