@sikka/aps 0.0.2 → 0.0.3

package/dist/react/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/react/index.ts
@@ -345,7 +355,7 @@ function usePayment() {
 }
 
 // src/react/TokenizationForm.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function detectCardBrand(cardNumber) {
   const number = cardNumber.replace(/\D/g, "");
@@ -1056,7 +1066,7 @@ var TokenizationForm = ({
         style: getFormStyle(),
         className: className.form,
         children: [
-          fieldOrder.map((fieldName) => renderField(fieldName)),
+          fieldOrder.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.default.Fragment, { children: renderField(fieldName) }, fieldName)),
           renderSecurityNotice(),
           beforeSubmit,
           renderSubmitButton(),

package/dist/react/index.mjs

@@ -312,7 +312,7 @@ function usePayment() {
 }
 
 // src/react/TokenizationForm.tsx
-import { useState as useState3 } from "react";
+import React2, { useState as useState3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function detectCardBrand(cardNumber) {
   const number = cardNumber.replace(/\D/g, "");
@@ -1023,7 +1023,7 @@ var TokenizationForm = ({
         style: getFormStyle(),
         className: className.form,
         children: [
-          fieldOrder.map((fieldName) => renderField(fieldName)),
+          fieldOrder.map((fieldName) => /* @__PURE__ */ jsx2(React2.Fragment, { children: renderField(fieldName) }, fieldName)),
           renderSecurityNotice(),
           beforeSubmit,
           renderSubmitButton(),

package/package.json

@@ -1,75 +1,75 @@
-{
-  "name": "@sikka/aps",
-  "version": "0.0.2",
-  "description": "A Stripe-like developer-friendly SDK for Amazon Payment Services integration. Supports payment links, hosted checkout, tokenization, webhooks, and payment management.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./react": {
-      "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.mjs",
-      "require": "./dist/react/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "pnpm build:main && pnpm build:react",
-    "build:main": "tsup src/index.ts --format cjs,esm --dts --out-dir dist",
-    "build:react": "tsup src/react/index.ts --format cjs,esm --dts --out-dir dist/react --external react",
-    "dev": "tsup src/index.ts src/react/index.ts --format cjs,esm --dts --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
-  },
-  "keywords": [
-    "amazon-payment-services",
-    "aps",
-    "payfort",
-    "payment",
-    "checkout",
-    "payment-link",
-    "hosted-checkout",
-    "tokenization",
-    "stripe",
-    "saudi-arabia",
-    "uae",
-    "middle-east",
-    "mada",
-    "knet",
-    "naps",
-    "fawry",
-    "apple-pay",
-    "react"
-  ],
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sikka-software/amazon-payment-services.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sikka-software/amazon-payment-services/issues"
-  },
-  "homepage": "https://github.com/sikka-software/amazon-payment-services#readme",
-  "devDependencies": {
-    "@types/node": "^20.19.35",
-    "@types/react": "^19.0.0",
-    "react": "^19.0.0",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  }
-}
+{
+  "name": "@sikka/aps",
+  "version": "0.0.3",
+  "description": "A Stripe-like developer-friendly SDK for Amazon Payment Services integration. Supports payment links, hosted checkout, tokenization, webhooks, and payment management.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "pnpm build:main && pnpm build:react",
+    "build:main": "tsup src/index.ts --format cjs,esm --dts --out-dir dist",
+    "build:react": "tsup src/react/index.ts --format cjs,esm --dts --out-dir dist/react --external react",
+    "dev": "tsup src/index.ts src/react/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": [
+    "amazon-payment-services",
+    "aps",
+    "payfort",
+    "payment",
+    "checkout",
+    "payment-link",
+    "hosted-checkout",
+    "tokenization",
+    "stripe",
+    "saudi-arabia",
+    "uae",
+    "middle-east",
+    "mada",
+    "knet",
+    "naps",
+    "fawry",
+    "apple-pay",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sikka-software/amazon-payment-services.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sikka-software/amazon-payment-services/issues"
+  },
+  "homepage": "https://github.com/sikka-software/amazon-payment-services#readme",
+  "devDependencies": {
+    "@types/node": "^20.19.35",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/dist/chunk-FLFFXAST.mjs

@@ -1,408 +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,
-  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
-};