longhopaysdk 1.0.0

package/dist/payment-sdk.es.js

@@ -0,0 +1,396 @@
+(function(A) {
+  const P = {
+    apiBaseUrl: "",
+    webBaseUrl: "",
+    hostedPath: "/checkout/",
+    routes: {
+      pay: "/pay",
+      checkoutSession: "/checkout/session"
+    },
+    timeoutMs: 3e4
+  }, z = (b) => {
+    const n = Number(b);
+    if (!Number.isFinite(n))
+      throw new Error("Amount must be a valid number");
+    return n;
+  }, C = (b) => typeof b == "string" && b.trim().length > 0, j = (b) => {
+    const n = A.LonghoPaySDKDefaults || {}, e = { ...P, ...n, ...b || {} }, a = (s) => s ? String(s).replace(/\/+$/, "") : "";
+    return {
+      apiBaseUrl: a(e.apiBaseUrl),
+      webBaseUrl: a(e.webBaseUrl),
+      hostedPath: e.hostedPath || P.hostedPath,
+      routes: { ...P.routes, ...e.routes || {} },
+      publicKey: e.publicKey || null,
+      authToken: e.authToken || null,
+      storeCode: e.storeCode || null,
+      timeoutMs: Number(e.timeoutMs) || P.timeoutMs
+    };
+  }, F = (b = {}) => {
+    const n = [], e = { ...b };
+    if (!C(e.tag) && !C(e.productCode) && n.push("tag is required (or provide productCode)"), e.amount === void 0 || e.amount === null)
+      n.push("amount is required");
+    else
+      try {
+        if (e.amount = z(e.amount), e.amount < 100)
+          throw new Error("Amount must be at least 100");
+        if (e.amount > 1e6)
+          throw new Error("Amount must be at most 1,000,000");
+        if (e.amount % 5 !== 0)
+          throw new Error("Amount must be a multiple of 5");
+      } catch (a) {
+        n.push(a.message || "Invalid amount");
+      }
+    if (C(e.phone) || n.push("phone is required"), C(e.name) || n.push("name is required"), n.length) {
+      const a = new Error(n.join("; "));
+      throw a.details = n, a;
+    }
+    return {
+      productCode: e.productCode,
+      tag: e.tag || e.productCode,
+      amount: e.amount,
+      phone: String(e.phone),
+      name: e.name,
+      email: e.email || "",
+      address: e.address || "",
+      currency: e.currency || "USD",
+      trid: e.trid,
+      metadata: e.metadata
+    };
+  };
+  class q {
+    constructor(n = {}) {
+      this.configure(n);
+    }
+    configure(n = {}) {
+      this.config = j(n);
+    }
+    buildHostedPaymentUrl(n) {
+      if (!C(n))
+        throw new Error("productCode is required to build a payment URL");
+      if (!C(this.config.webBaseUrl))
+        throw new Error("webBaseUrl is required to build hosted checkout URLs");
+      const e = this.config.webBaseUrl.replace(/\/+$/, ""), a = this.config.hostedPath || "/";
+      return `${e}${a}${n}`;
+    }
+    async createPayment(n) {
+      const e = F({
+        ...n
+      });
+      if (!C(this.config.apiBaseUrl))
+        throw new Error("apiBaseUrl is required to create a payment");
+      const a = typeof AbortController < "u" ? new AbortController() : null, s = a ? setTimeout(() => a.abort(), this.config.timeoutMs) : null;
+      try {
+        const d = typeof this.config.authToken == "function" ? this.config.authToken() : this.config.authToken ? this.config.authToken : null, c = await fetch(`${this.config.apiBaseUrl}${this.config.routes.pay}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...this.config.publicKey ? { "X-Public-Key": this.config.publicKey } : {},
+            ...d ? { Authorization: `Bearer ${d}` } : {}
+          },
+          body: JSON.stringify(e),
+          ...a ? { signal: a.signal } : {}
+        }), u = await c.json().catch(() => ({}));
+        if (!c.ok || u?.success === !1) {
+          const t = u?.message || "Payment failed.", r = new Error(t);
+          throw r.response = u, r;
+        }
+        return {
+          success: !0,
+          message: u?.message || "Payment created.",
+          data: u?.data || u
+        };
+      } catch (d) {
+        const c = d?.message || "Payment request failed.";
+        return Promise.reject({
+          message: c,
+          cause: d
+        });
+      } finally {
+        s && clearTimeout(s);
+      }
+    }
+    /**
+     * Create a hosted checkout session (Stripe-style) and optionally redirect.
+     * @param {Object} options - { payload, redirect: boolean, onRedirect }
+     */
+    async createCheckoutSession(n = {}) {
+      const { payload: e = {}, redirect: a = !0, onRedirect: s } = n, d = F(e);
+      if (!C(this.config.apiBaseUrl))
+        throw new Error("apiBaseUrl is required to create a checkout session");
+      const c = typeof this.config.authToken == "function" ? this.config.authToken() : this.config.authToken ? this.config.authToken : null, u = await fetch(`${this.config.apiBaseUrl}${this.config.routes.checkoutSession}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.config.publicKey ? { "X-Public-Key": this.config.publicKey } : {},
+          ...c ? { Authorization: `Bearer ${c}` } : {}
+        },
+        body: JSON.stringify(d)
+      }), t = await u.json().catch(() => ({}));
+      if (!u.ok || t?.success === !1) {
+        const o = t?.message || "Unable to create checkout session.", i = new Error(o);
+        throw i.response = t, i;
+      }
+      const r = t?.data?.checkoutUrl || t?.checkoutUrl;
+      return a && r && (typeof s == "function" && s(r), window.location.href = r), {
+        success: !0,
+        message: t?.message || "Checkout session created.",
+        data: t?.data || t,
+        checkoutUrl: r
+      };
+    }
+    mountPayButton(n = {}) {
+      const {
+        selector: e,
+        buttonText: a = "Pay with LonghoPay",
+        payment: s = {},
+        onSuccess: d,
+        onError: c,
+        onFailure: u,
+        reuseTarget: t
+      } = n, r = typeof e == "string" ? document.querySelector(e) : e;
+      if (!r)
+        throw new Error("mountPayButton: target element not found");
+      const o = t ? r : document.createElement("button");
+      t || (o.type = "button", o.textContent = a, o.style.cursor = "pointer", o.style.padding = "10px 16px", o.style.backgroundColor = "#1C6EC6", o.style.color = "#ffffff", o.style.border = "none", o.style.borderRadius = "6px", o.style.fontWeight = "600", r.appendChild(o));
+      const i = (l) => {
+        o.disabled = l, o.style.opacity = l ? "0.65" : "1";
+      }, h = async () => {
+        i(!0), this.renderPaymentForm({
+          product: {
+            productCode: s.productCode,
+            name: s.name,
+            amount: s.amount,
+            tag: s.tag,
+            currency: s.currency
+          },
+          defaults: {
+            phone: s.phone,
+            email: s.email,
+            address: s.address,
+            amount: s.amount
+          },
+          onSuccess: (l) => {
+            typeof d == "function" && d(l);
+          },
+          onError: (l) => {
+            typeof c == "function" && c(l), typeof u == "function" && u(l);
+          }
+        }), i(!1);
+      };
+      return o.addEventListener("click", h), o;
+    }
+    /**
+     * Render a lightweight payment form overlay.
+     * @param {Object} options
+     * @param {Object} options.product - { productCode, storeCode, name, amount, tag }
+     * @param {Object} [options.defaults] - { phone, name, email, address, allowAmountEdit }
+     * @param {Function} [options.onSuccess] - callback(result)
+     * @param {Function} [options.onError] - callback(error)
+     * @param {Function} [options.onClose] - callback()
+     * @param {string} [options.title] - form heading
+     * @param {string} [options.submitText] - button text
+     * @param {Object} [options.fields] - per-field config, e.g. { phone: { label, placeholder, visible } }
+     */
+    renderPaymentForm(n = {}) {
+      const {
+        product: e = {},
+        defaults: a = {},
+        onSuccess: s,
+        onError: d,
+        onClose: c,
+        title: u = "Complete your payment",
+        submitText: t = "Pay now",
+        fields: r = {}
+      } = n, o = (g, m, p = {}) => ({
+        label: r[g]?.label || m,
+        placeholder: r[g]?.placeholder || "",
+        visible: r[g]?.visible !== !1,
+        ...p
+      }), i = {
+        name: o("name", "Your name"),
+        phone: o("phone", "Phone number"),
+        email: o("email", "Email"),
+        address: o("address", "Address"),
+        amount: o("amount", "Amount", { readonly: r.amount?.readonly ?? !a.allowAmountEdit })
+      }, h = document.createElement("div");
+      h.style.cssText = `
+        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+        display: flex; align-items: center; justify-content: center;
+        z-index: 9999; padding: 16px;
+      `;
+      const l = document.createElement("div");
+      l.style.cssText = "width: 100%; max-width: 440px; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); padding: 20px; position: relative; border: 1px solid #e5e7eb; border-top: 4px solid #1C6EC6;";
+      const x = document.createElement("button");
+      x.type = "button", x.textContent = "×", x.setAttribute("aria-label", "Close"), x.style.cssText = "position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; cursor: pointer;";
+      const k = document.createElement("h3");
+      k.textContent = u, k.style.cssText = "margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #0b1f3a;";
+      const S = document.createElement("p");
+      S.textContent = e.name || e.productCode || e.tag || "", S.style.cssText = "margin: 0 0 12px; color: #1C6EC6; font-size: 14px; font-weight: 600;";
+      const w = document.createElement("form");
+      w.style.cssText = "display: flex; flex-direction: column; gap: 10px;";
+      const B = (g, m = "error") => {
+        let p = w.querySelector(".lhp-alert");
+        p || (p = document.createElement("div"), p.className = "lhp-alert", p.style.cssText = "padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid transparent;", w.prepend(p)), p.textContent = g, p.style.background = m === "error" ? "#FDECEA" : "#E8F5E9", p.style.borderColor = m === "error" ? "#F5C6CB" : "#C8E6C9", p.style.color = m === "error" ? "#721C24" : "#1B5E20";
+      }, K = ({ key: g, label: m, placeholder: p, value: L = "", type: N = "text", readonly: M = !1 }) => {
+        const T = document.createElement("label");
+        T.style.cssText = "display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #222;", T.textContent = m;
+        const f = document.createElement("input");
+        return f.name = g, f.type = N, f.value = L, f.placeholder = p || m, f.readOnly = M, f.style.cssText = "padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; outline: none;", f.addEventListener("focus", () => {
+          f.style.borderColor = "#1C6EC6", f.style.boxShadow = "0 0 0 3px rgba(28, 110, 198, 0.15)";
+        }), f.addEventListener("blur", () => {
+          f.style.borderColor = "#d0d5dd", f.style.boxShadow = "none";
+        }), T.appendChild(f), { wrapper: T, input: f };
+      }, y = {}, v = (g, m) => {
+        if (!i[g].visible) return;
+        const { wrapper: p, input: L } = K(m);
+        y[g] = L, w.appendChild(p);
+      };
+      v("name", {
+        key: "name",
+        label: i.name.label,
+        placeholder: i.name.placeholder,
+        value: a.name || ""
+      }), v("phone", {
+        key: "phone",
+        label: i.phone.label,
+        placeholder: i.phone.placeholder,
+        value: a.phone || ""
+      }), v("email", {
+        key: "email",
+        label: i.email.label,
+        placeholder: i.email.placeholder,
+        value: a.email || ""
+      }), v("address", {
+        key: "address",
+        label: i.address.label,
+        placeholder: i.address.placeholder,
+        value: a.address || ""
+      }), v("amount", {
+        key: "amount",
+        label: i.amount.label,
+        placeholder: i.amount.placeholder,
+        value: e.amount ?? a.amount ?? "",
+        type: "number",
+        readonly: i.amount.readonly
+      });
+      const E = document.createElement("button");
+      E.type = "submit", E.textContent = t, E.style.cssText = "margin-top: 6px; padding: 12px; background: #1C6EC6; color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer;";
+      const U = document.createElement("div");
+      U.style.cssText = "display: flex; justify-content: flex-end; gap: 8px; align-items: center;", U.appendChild(E), w.appendChild(U);
+      const $ = () => {
+        h.remove(), typeof c == "function" && c();
+      };
+      return x.addEventListener("click", $), w.addEventListener("submit", async (g) => {
+        g.preventDefault(), E.disabled = !0, E.style.opacity = "0.7", B("Processing payment...", "info");
+        try {
+          const m = {
+            productCode: e.productCode,
+            tag: e.tag || e.productCode,
+            amount: y.amount ? y.amount.value : e.amount,
+            currency: e.currency || a.currency,
+            phone: y.phone ? y.phone.value : "",
+            name: y.name ? y.name.value : "",
+            email: y.email ? y.email.value : "",
+            address: y.address ? y.address.value : ""
+          }, p = await this.createPayment(m);
+          B(p.message || "Payment successful", "success"), typeof s == "function" && s(p);
+        } catch (m) {
+          B(m?.message || "Payment failed", "error"), typeof d == "function" && d(m);
+        } finally {
+          E.disabled = !1, E.style.opacity = "1";
+        }
+      }), l.appendChild(x), l.appendChild(k), l.appendChild(S), l.appendChild(w), h.appendChild(l), document.body.appendChild(h), { close: $, overlay: h, form: w, inputs: y };
+    }
+    /**
+     * Render a simple product grid and hook click-to-pay form.
+     * @param {Object} options
+     * @param {string|HTMLElement} options.selector - container
+     * @param {Array} options.products - [{ productCode, name, amount, description, imageUrl, tag }]
+     * @param {Function} [options.renderCard] - (product) => HTMLElement
+     * @param {Object} [options.form] - passed to renderPaymentForm
+     */
+    mountProductGrid(n = {}) {
+      const { selector: e, products: a = [], renderCard: s, form: d = {} } = n, c = typeof e == "string" ? document.querySelector(e) : e;
+      if (!c)
+        throw new Error("mountProductGrid: container not found");
+      const u = (t) => {
+        const r = document.createElement("div");
+        if (r.style.cssText = "border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: box-shadow 0.2s;", r.addEventListener("mouseenter", () => {
+          r.style.boxShadow = "0 8px 24px rgba(0,0,0,0.08)";
+        }), r.addEventListener("mouseleave", () => {
+          r.style.boxShadow = "none";
+        }), t.imageUrl) {
+          const x = document.createElement("img");
+          x.src = t.imageUrl, x.alt = t.name || t.productCode || "Product", x.style.cssText = "width: 64px; height: 64px; object-fit: cover; border-radius: 10px;", r.appendChild(x);
+        }
+        const o = document.createElement("div");
+        o.style.cssText = "display: flex; flex-direction: column; gap: 4px;";
+        const i = document.createElement("div");
+        i.textContent = t.name || t.productCode || t.tag, i.style.cssText = "font-weight: 700; color: #0b1f3a;";
+        const h = document.createElement("div");
+        h.textContent = t.description || "", h.style.cssText = "font-size: 13px; color: #555;";
+        const l = document.createElement("div");
+        return l.textContent = t.amount != null ? `${t.currency || "USD"} ${t.amount}` : "", l.style.cssText = "font-size: 13px; color: #1C6EC6; font-weight: 700;", o.appendChild(i), h.textContent && o.appendChild(h), l.textContent && o.appendChild(l), r.appendChild(o), r;
+      };
+      return c.innerHTML = "", a.forEach((t) => {
+        const r = typeof s == "function" ? s(t) : u(t);
+        r.addEventListener("click", () => {
+          this.renderPaymentForm({
+            product: t,
+            defaults: { amount: t.amount },
+            ...d
+          });
+        }), c.appendChild(r);
+      }), c;
+    }
+    /**
+     * Plug-and-play binding: attach to any element with data attributes.
+     * Expected data attributes:
+     *  - data-lhp-tag (required)
+     *  - data-lhp-amount (required)
+     *  - data-lhp-name (optional, product name)
+     *  - data-lhp-currency (optional)
+     *  - data-lhp-phone / data-lhp-email (optional defaults)
+     */
+    autoBindPayButtons(n = {}) {
+      const {
+        selector: e = "[data-lhp-pay]",
+        onSuccess: a,
+        onError: s,
+        onFailure: d,
+        defaults: c = {},
+        submitText: u = "Pay with LonghoPay"
+      } = n, t = Array.from(document.querySelectorAll(e));
+      return t.forEach((r) => {
+        const o = r.dataset || {}, i = {
+          tag: o.lhpTag,
+          amount: o.lhpAmount,
+          name: o.lhpName || r.textContent?.trim(),
+          currency: o.lhpCurrency || c.currency
+        };
+        r.addEventListener("click", (h) => {
+          h.preventDefault(), this.renderPaymentForm({
+            product: i,
+            defaults: {
+              ...c,
+              phone: o.lhpPhone || c.phone,
+              email: o.lhpEmail || c.email,
+              amount: i.amount
+            },
+            submitText: u,
+            onSuccess: a,
+            onError: (l) => {
+              typeof s == "function" && s(l), typeof d == "function" && d(l);
+            }
+          });
+        });
+      }), t;
+    }
+  }
+  const D = {
+    version: "0.3.0",
+    init: (b) => new q(b),
+    LonghoPaySDK: q
+  };
+  A.LonghoPaySDK = D;
+})(typeof window < "u" ? window : globalThis);

package/dist/payment-sdk.iife.js

@@ -0,0 +1,5 @@
+(function(){"use strict";(function(A){const P={apiBaseUrl:"",webBaseUrl:"",hostedPath:"/checkout/",routes:{pay:"/pay",checkoutSession:"/checkout/session"},timeoutMs:3e4},z=b=>{const n=Number(b);if(!Number.isFinite(n))throw new Error("Amount must be a valid number");return n},C=b=>typeof b=="string"&&b.trim().length>0,j=b=>{const n=A.LonghoPaySDKDefaults||{},e={...P,...n,...b||{}},a=s=>s?String(s).replace(/\/+$/,""):"";return{apiBaseUrl:a(e.apiBaseUrl),webBaseUrl:a(e.webBaseUrl),hostedPath:e.hostedPath||P.hostedPath,routes:{...P.routes,...e.routes||{}},publicKey:e.publicKey||null,authToken:e.authToken||null,storeCode:e.storeCode||null,timeoutMs:Number(e.timeoutMs)||P.timeoutMs}},F=(b={})=>{const n=[],e={...b};if(!C(e.tag)&&!C(e.productCode)&&n.push("tag is required (or provide productCode)"),e.amount===void 0||e.amount===null)n.push("amount is required");else try{if(e.amount=z(e.amount),e.amount<100)throw new Error("Amount must be at least 100");if(e.amount>1e6)throw new Error("Amount must be at most 1,000,000");if(e.amount%5!==0)throw new Error("Amount must be a multiple of 5")}catch(a){n.push(a.message||"Invalid amount")}if(C(e.phone)||n.push("phone is required"),C(e.name)||n.push("name is required"),n.length){const a=new Error(n.join("; "));throw a.details=n,a}return{productCode:e.productCode,tag:e.tag||e.productCode,amount:e.amount,phone:String(e.phone),name:e.name,email:e.email||"",address:e.address||"",currency:e.currency||"USD",trid:e.trid,metadata:e.metadata}};class q{constructor(n={}){this.configure(n)}configure(n={}){this.config=j(n)}buildHostedPaymentUrl(n){if(!C(n))throw new Error("productCode is required to build a payment URL");if(!C(this.config.webBaseUrl))throw new Error("webBaseUrl is required to build hosted checkout URLs");const e=this.config.webBaseUrl.replace(/\/+$/,""),a=this.config.hostedPath||"/";return`${e}${a}${n}`}async createPayment(n){const e=F({...n});if(!C(this.config.apiBaseUrl))throw new Error("apiBaseUrl is required to create a payment");const a=typeof AbortController<"u"?new AbortController:null,s=a?setTimeout(()=>a.abort(),this.config.timeoutMs):null;try{const d=typeof this.config.authToken=="function"?this.config.authToken():this.config.authToken?this.config.authToken:null,c=await fetch(`${this.config.apiBaseUrl}${this.config.routes.pay}`,{method:"POST",headers:{"Content-Type":"application/json",...this.config.publicKey?{"X-Public-Key":this.config.publicKey}:{},...d?{Authorization:`Bearer ${d}`}:{}},body:JSON.stringify(e),...a?{signal:a.signal}:{}}),u=await c.json().catch(()=>({}));if(!c.ok||u?.success===!1){const t=u?.message||"Payment failed.",r=new Error(t);throw r.response=u,r}return{success:!0,message:u?.message||"Payment created.",data:u?.data||u}}catch(d){const c=d?.message||"Payment request failed.";return Promise.reject({message:c,cause:d})}finally{s&&clearTimeout(s)}}async createCheckoutSession(n={}){const{payload:e={},redirect:a=!0,onRedirect:s}=n,d=F(e);if(!C(this.config.apiBaseUrl))throw new Error("apiBaseUrl is required to create a checkout session");const c=typeof this.config.authToken=="function"?this.config.authToken():this.config.authToken?this.config.authToken:null,u=await fetch(`${this.config.apiBaseUrl}${this.config.routes.checkoutSession}`,{method:"POST",headers:{"Content-Type":"application/json",...this.config.publicKey?{"X-Public-Key":this.config.publicKey}:{},...c?{Authorization:`Bearer ${c}`}:{}},body:JSON.stringify(d)}),t=await u.json().catch(()=>({}));if(!u.ok||t?.success===!1){const o=t?.message||"Unable to create checkout session.",i=new Error(o);throw i.response=t,i}const r=t?.data?.checkoutUrl||t?.checkoutUrl;return a&&r&&(typeof s=="function"&&s(r),window.location.href=r),{success:!0,message:t?.message||"Checkout session created.",data:t?.data||t,checkoutUrl:r}}mountPayButton(n={}){const{selector:e,buttonText:a="Pay with LonghoPay",payment:s={},onSuccess:d,onError:c,onFailure:u,reuseTarget:t}=n,r=typeof e=="string"?document.querySelector(e):e;if(!r)throw new Error("mountPayButton: target element not found");const o=t?r:document.createElement("button");t||(o.type="button",o.textContent=a,o.style.cursor="pointer",o.style.padding="10px 16px",o.style.backgroundColor="#1C6EC6",o.style.color="#ffffff",o.style.border="none",o.style.borderRadius="6px",o.style.fontWeight="600",r.appendChild(o));const i=l=>{o.disabled=l,o.style.opacity=l?"0.65":"1"},h=async()=>{i(!0),this.renderPaymentForm({product:{productCode:s.productCode,name:s.name,amount:s.amount,tag:s.tag,currency:s.currency},defaults:{phone:s.phone,email:s.email,address:s.address,amount:s.amount},onSuccess:l=>{typeof d=="function"&&d(l)},onError:l=>{typeof c=="function"&&c(l),typeof u=="function"&&u(l)}}),i(!1)};return o.addEventListener("click",h),o}renderPaymentForm(n={}){const{product:e={},defaults:a={},onSuccess:s,onError:d,onClose:c,title:u="Complete your payment",submitText:t="Pay now",fields:r={}}=n,o=(g,m,p={})=>({label:r[g]?.label||m,placeholder:r[g]?.placeholder||"",visible:r[g]?.visible!==!1,...p}),i={name:o("name","Your name"),phone:o("phone","Phone number"),email:o("email","Email"),address:o("address","Address"),amount:o("amount","Amount",{readonly:r.amount?.readonly??!a.allowAmountEdit})},h=document.createElement("div");h.style.cssText=`
+        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+        display: flex; align-items: center; justify-content: center;
+        z-index: 9999; padding: 16px;
+      `;const l=document.createElement("div");l.style.cssText="width: 100%; max-width: 440px; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); padding: 20px; position: relative; border: 1px solid #e5e7eb; border-top: 4px solid #1C6EC6;";const x=document.createElement("button");x.type="button",x.textContent="×",x.setAttribute("aria-label","Close"),x.style.cssText="position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; cursor: pointer;";const k=document.createElement("h3");k.textContent=u,k.style.cssText="margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #0b1f3a;";const S=document.createElement("p");S.textContent=e.name||e.productCode||e.tag||"",S.style.cssText="margin: 0 0 12px; color: #1C6EC6; font-size: 14px; font-weight: 600;";const w=document.createElement("form");w.style.cssText="display: flex; flex-direction: column; gap: 10px;";const B=(g,m="error")=>{let p=w.querySelector(".lhp-alert");p||(p=document.createElement("div"),p.className="lhp-alert",p.style.cssText="padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid transparent;",w.prepend(p)),p.textContent=g,p.style.background=m==="error"?"#FDECEA":"#E8F5E9",p.style.borderColor=m==="error"?"#F5C6CB":"#C8E6C9",p.style.color=m==="error"?"#721C24":"#1B5E20"},K=({key:g,label:m,placeholder:p,value:L="",type:N="text",readonly:M=!1})=>{const T=document.createElement("label");T.style.cssText="display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #222;",T.textContent=m;const f=document.createElement("input");return f.name=g,f.type=N,f.value=L,f.placeholder=p||m,f.readOnly=M,f.style.cssText="padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; outline: none;",f.addEventListener("focus",()=>{f.style.borderColor="#1C6EC6",f.style.boxShadow="0 0 0 3px rgba(28, 110, 198, 0.15)"}),f.addEventListener("blur",()=>{f.style.borderColor="#d0d5dd",f.style.boxShadow="none"}),T.appendChild(f),{wrapper:T,input:f}},y={},v=(g,m)=>{if(!i[g].visible)return;const{wrapper:p,input:L}=K(m);y[g]=L,w.appendChild(p)};v("name",{key:"name",label:i.name.label,placeholder:i.name.placeholder,value:a.name||""}),v("phone",{key:"phone",label:i.phone.label,placeholder:i.phone.placeholder,value:a.phone||""}),v("email",{key:"email",label:i.email.label,placeholder:i.email.placeholder,value:a.email||""}),v("address",{key:"address",label:i.address.label,placeholder:i.address.placeholder,value:a.address||""}),v("amount",{key:"amount",label:i.amount.label,placeholder:i.amount.placeholder,value:e.amount??a.amount??"",type:"number",readonly:i.amount.readonly});const E=document.createElement("button");E.type="submit",E.textContent=t,E.style.cssText="margin-top: 6px; padding: 12px; background: #1C6EC6; color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer;";const U=document.createElement("div");U.style.cssText="display: flex; justify-content: flex-end; gap: 8px; align-items: center;",U.appendChild(E),w.appendChild(U);const $=()=>{h.remove(),typeof c=="function"&&c()};return x.addEventListener("click",$),w.addEventListener("submit",async g=>{g.preventDefault(),E.disabled=!0,E.style.opacity="0.7",B("Processing payment...","info");try{const m={productCode:e.productCode,tag:e.tag||e.productCode,amount:y.amount?y.amount.value:e.amount,currency:e.currency||a.currency,phone:y.phone?y.phone.value:"",name:y.name?y.name.value:"",email:y.email?y.email.value:"",address:y.address?y.address.value:""},p=await this.createPayment(m);B(p.message||"Payment successful","success"),typeof s=="function"&&s(p)}catch(m){B(m?.message||"Payment failed","error"),typeof d=="function"&&d(m)}finally{E.disabled=!1,E.style.opacity="1"}}),l.appendChild(x),l.appendChild(k),l.appendChild(S),l.appendChild(w),h.appendChild(l),document.body.appendChild(h),{close:$,overlay:h,form:w,inputs:y}}mountProductGrid(n={}){const{selector:e,products:a=[],renderCard:s,form:d={}}=n,c=typeof e=="string"?document.querySelector(e):e;if(!c)throw new Error("mountProductGrid: container not found");const u=t=>{const r=document.createElement("div");if(r.style.cssText="border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: box-shadow 0.2s;",r.addEventListener("mouseenter",()=>{r.style.boxShadow="0 8px 24px rgba(0,0,0,0.08)"}),r.addEventListener("mouseleave",()=>{r.style.boxShadow="none"}),t.imageUrl){const x=document.createElement("img");x.src=t.imageUrl,x.alt=t.name||t.productCode||"Product",x.style.cssText="width: 64px; height: 64px; object-fit: cover; border-radius: 10px;",r.appendChild(x)}const o=document.createElement("div");o.style.cssText="display: flex; flex-direction: column; gap: 4px;";const i=document.createElement("div");i.textContent=t.name||t.productCode||t.tag,i.style.cssText="font-weight: 700; color: #0b1f3a;";const h=document.createElement("div");h.textContent=t.description||"",h.style.cssText="font-size: 13px; color: #555;";const l=document.createElement("div");return l.textContent=t.amount!=null?`${t.currency||"USD"} ${t.amount}`:"",l.style.cssText="font-size: 13px; color: #1C6EC6; font-weight: 700;",o.appendChild(i),h.textContent&&o.appendChild(h),l.textContent&&o.appendChild(l),r.appendChild(o),r};return c.innerHTML="",a.forEach(t=>{const r=typeof s=="function"?s(t):u(t);r.addEventListener("click",()=>{this.renderPaymentForm({product:t,defaults:{amount:t.amount},...d})}),c.appendChild(r)}),c}autoBindPayButtons(n={}){const{selector:e="[data-lhp-pay]",onSuccess:a,onError:s,onFailure:d,defaults:c={},submitText:u="Pay with LonghoPay"}=n,t=Array.from(document.querySelectorAll(e));return t.forEach(r=>{const o=r.dataset||{},i={tag:o.lhpTag,amount:o.lhpAmount,name:o.lhpName||r.textContent?.trim(),currency:o.lhpCurrency||c.currency};r.addEventListener("click",h=>{h.preventDefault(),this.renderPaymentForm({product:i,defaults:{...c,phone:o.lhpPhone||c.phone,email:o.lhpEmail||c.email,amount:i.amount},submitText:u,onSuccess:a,onError:l=>{typeof s=="function"&&s(l),typeof d=="function"&&d(l)}})})}),t}}const D={version:"0.3.0",init:b=>new q(b),LonghoPaySDK:q};A.LonghoPaySDK=D})(typeof window<"u"?window:globalThis)})();

package/doc/payment-sdk-plugin.md

@@ -0,0 +1,143 @@
+# Payment SDK JavaScript Plugin (LonghoPay-branded defaults)
+
+A tiny browser-friendly helper with LonghoPay-branded defaults so merchants can trigger hosted checkout (Stripe-like) or direct payments from any website without React or bundlers. All defaults are configurable.
+
+Receipts are not built by the SDK; handle receipt creation/formatting in your own code via the API response.
+
+## Quick Start
+
+```html
+<script src="/sdk/payment-sdk.js"></script>
+<script>
+  const sdk = window.LonghoPaySDK.init({
+    apiBaseUrl: 'https://api.example.com',       // required API origin
+    routes: { pay: '/pay' },                     // payment route
+    webBaseUrl: 'https://app.example.com',       // used for hosted URLs
+    publicKey: 'pk_test_xxx',                    // optional header for your store if required
+    authToken: () => localStorage.getItem('t'),  // Bearer token (string or function)
+  });
+
+  sdk
+    .createPayment({
+      tag: 'product-slug',           // required (or use productCode)
+      amount: 1500,                  // required: numeric, 100–1,000,000, multiple of 5
+      phone: '670000000',            // required
+      name: 'Jane Customer',         // required
+      email: 'jane@example.com',     // optional
+      address: 'Yaounde, CM',        // optional
+    })
+    .then((res) => console.log('Payment created', res))
+    .catch((err) => console.error('Payment failed', err));
+</script>
+```
+
+## Mount a Button
+
+```html
+<div id="pay-here"></div>
+<script>
+  const sdk = window.LonghoPaySDK.init({ apiBaseUrl: 'https://api.example.com' });
+
+  sdk.mountPayButton({
+    selector: '#pay-here', // CSS selector or DOM node
+    buttonText: 'Pay with LonghoPay',
+    payment: {
+      productCode: 'ABC123',
+      amount: 1500,
+      phone: '670000000',
+      name: 'Jane Customer',
+    },
+    onSuccess: ({ receipt }) => {
+      console.log('Payment success', receipt);
+    },
+    onError: (err) => {
+      alert(err.message || 'Payment failed');
+    },
+  });
+</script>
+```
+
+## Hosted Checkout URL
+
+```js
+const sdk = window.LonghoPaySDK.init({ webBaseUrl: 'https://app.example.com', hostedPath: '/checkout/' });
+const url = sdk.buildHostedPaymentUrl('ABC123'); // -> https://app.example.com/checkout/ABC123
+```
+
+## Product Grid + Click-to-Pay Form
+
+```html
+<div id="product-grid"></div>
+<script>
+  const products = [
+    { productCode: 'ABC123', tag: 'abc123', name: 'Red Shirt', amount: 1500, description: 'Cotton' },
+    { productCode: 'XYZ789', tag: 'xyz789', name: 'Blue Hoodie', amount: 2500, description: 'Fleece' },
+  ];
+
+  const sdk = window.LonghoPaySDK.init({ apiBaseUrl: 'https://api.example.com' });
+  sdk.mountProductGrid({
+    selector: '#product-grid',
+    products,
+    form: {
+      title: 'Pay securely',
+      submitText: 'Pay with LonghoPay',
+      fields: {
+        amount: { readonly: true }, // keep product price locked
+      },
+      onSuccess: ({ receipt }) => console.log('Paid', receipt),
+    },
+  });
+</script>
+```
+
+## Plug-and-Play (data attributes)
+
+Add buttons with data attributes, then auto-bind:
+
+```html
+<button data-lhp-pay data-lhp-tag="product-slug" data-lhp-amount="1500" data-lhp-name="Red Shirt">
+  Pay with LonghoPay
+</button>
+<script>
+  const sdk = window.LonghoPaySDK.init({ apiBaseUrl: 'https://api.example.com', authToken: 'BEARER_TOKEN' });
+  sdk.autoBindPayButtons(); // opens branded modal with prefilled name/amount, hidden tag
+</script>
+```
+
+## API Reference
+
+- `LonghoPaySDK.init(config)` → `LonghoPaySDK` instance  
+  - `config.apiBaseUrl` (required): Base API origin, e.g., `https://api.example.com`.
+  - `config.webBaseUrl` (optional): Base web origin for hosted payment links.
+  - `config.hostedPath` (optional): Path prefix for hosted checkout links (default `/checkout/`).
+  - `config.routes` (optional): Override API paths (defaults `{ pay: '/pay', checkoutSession: '/checkout/session' }`).
+  - `config.publicKey` (optional): Added as `X-Public-Key` header.
+  - `config.authToken` (optional): String or function returning a Bearer token; adds `Authorization: Bearer <token>` to requests.
+  - `config.timeoutMs` (optional): Request timeout in milliseconds (default `30000`).
+- `sdk.createPayment(payment)` → Promise resolving to `{ success, message, data }`. Throws with `{ message, cause }` on failure. Handle receipt creation yourself from the response payload.
+  - Required: `tag` (or `productCode`), `amount`, `phone`, `name`.
+  - Optional: `productCode`, `email`, `address`, `currency`, `metadata`, `trid`.
+  - Amount rules: must be numeric, min 100, max 1,000,000, and a multiple of 5.
+- `sdk.createCheckoutSession({ payload, redirect, onRedirect })` → Creates hosted session, returns `{ checkoutUrl, ... }` and optionally redirects like Stripe Checkout.
+- `sdk.mountPayButton(options)` → returns the created/enhanced button.
+  - `selector`: CSS selector or DOM element to attach to.
+  - `buttonText`: Text for the button (default: "Pay with LonghoPay").
+  - `payment`: Payload passed to `createPayment`.
+  - `onSuccess(result)`, `onError(error)`, `onFailure(error)`: Callbacks.
+  - `reuseTarget` (boolean): If `true`, the target element is used as the button instead of injecting a new one.
+- `sdk.autoBindPayButtons(options)` → auto-attaches to elements with `data-lhp-pay`/`data-lhp-*` attributes and opens the branded modal.
+- `sdk.buildHostedPaymentUrl(productCode)` → returns a hosted payment link using `webBaseUrl`.
+- `sdk.renderPaymentForm(options)` → renders a modal overlay payment form.
+  - `product`: `{ productCode, name, amount, tag }` (prefills form and amount; tag is hidden but sent).
+  - `defaults`: `{ phone, name, email, address, allowAmountEdit }`.
+  - `fields`: per-field overrides `{ name: { label, placeholder, visible }, amount: { readonly } }`.
+  - `title`, `submitText`, `onSuccess`, `onError`, `onClose`.
+- `sdk.mountProductGrid(options)` → builds a product list where clicking a card opens the payment form.
+  - `selector`: container to render in.
+  - `products`: array `{ productCode, name, amount, description, imageUrl, tag }`.
+  - `renderCard(product)`: custom renderer (defaults to a simple card).
+  - `form`: options forwarded to `renderPaymentForm` for customization.
+
+## Global Defaults
+
+Set `window.LonghoPaySDKDefaults = { apiBaseUrl: '...', webBaseUrl: '...' }` *before* loading the script if you want defaults for every `init()` call.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "longhopaysdk",
+  "version": "1.0.0",
+  "description": "Lightweight browser SDK for LonghoPay checkout sessions and direct payments.",
+  "main": "vite.config.js",
+  "directories": {
+    "doc": "doc"
+  },
+  "scripts": {
+    "build": "vite build",
+    "deploy": "npm run build && npm publish --access public",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "vite": "^7.3.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,653 @@
+/*!
+ * LonghoPay Checkout SDK (browser-friendly)
+ *
+ * Lightweight helper for merchants to trigger hosted checkout flows from any webpage.
+ * Supports:
+ *  - createPayment(payload)          // direct API payment
+ *  - createCheckoutSession(opts)     // Stripe-like hosted checkout creation + redirect
+ *  - mountPayButton(options)         // attach a button
+ *  - renderPaymentForm(options)      // modal, prefilled with product + price
+ *  - mountProductGrid(options)       // product cards → click to open payment form
+ *
+ * Example:
+ *   <script src="/sdk/payment-sdk.js"></script>
+ *   const sdk = window.LonghoPaySDK.init({ apiBaseUrl: 'https://api.example.com', webBaseUrl: 'https://app.example.com' });
+ *   sdk.createCheckoutSession({ tag: 'product-slug', amount: 1000, phone: '670000000', name: 'Jane' });
+ */
+(function (global) {
+  const DEFAULTS = {
+    apiBaseUrl: '',
+    webBaseUrl: '',
+    hostedPath: '/checkout/',
+    routes: {
+      pay: '/pay',
+      checkoutSession: '/checkout/session',
+    },
+    timeoutMs: 30_000,
+  };
+
+  const toNumber = (v) => {
+    const num = Number(v);
+    if (!Number.isFinite(num)) {
+      throw new Error('Amount must be a valid number');
+    }
+    return num;
+  };
+
+  const isNonEmptyString = (v) => typeof v === 'string' && v.trim().length > 0;
+
+  const normalizeConfig = (config) => {
+    const base = global.LonghoPaySDKDefaults || {};
+    const merged = { ...DEFAULTS, ...base, ...(config || {}) };
+
+    const cleanBase = (val) => (val ? String(val).replace(/\/+$/, '') : '');
+
+    return {
+      apiBaseUrl: cleanBase(merged.apiBaseUrl),
+      webBaseUrl: cleanBase(merged.webBaseUrl),
+      hostedPath: merged.hostedPath || DEFAULTS.hostedPath,
+      routes: { ...DEFAULTS.routes, ...(merged.routes || {}) },
+      publicKey: merged.publicKey || null,
+      authToken: merged.authToken || null,
+      storeCode: merged.storeCode || null,
+      timeoutMs: Number(merged.timeoutMs) || DEFAULTS.timeoutMs,
+    };
+  };
+
+  const validatePayment = (input = {}) => {
+    const errors = [];
+    const payload = { ...input };
+
+    if (!isNonEmptyString(payload.tag) && !isNonEmptyString(payload.productCode)) {
+      errors.push('tag is required (or provide productCode)');
+    }
+
+    if (payload.amount === undefined || payload.amount === null) {
+      errors.push('amount is required');
+    } else {
+      try {
+        payload.amount = toNumber(payload.amount);
+        if (payload.amount < 100) {
+          throw new Error('Amount must be at least 100');
+        }
+        if (payload.amount > 1_000_000) {
+          throw new Error('Amount must be at most 1,000,000');
+        }
+        if (payload.amount % 5 !== 0) {
+          throw new Error('Amount must be a multiple of 5');
+        }
+      } catch (e) {
+        errors.push(e.message || 'Invalid amount');
+      }
+    }
+
+    if (!isNonEmptyString(payload.phone)) {
+      errors.push('phone is required');
+    }
+
+    if (!isNonEmptyString(payload.name)) {
+      errors.push('name is required');
+    }
+
+    if (errors.length) {
+      const error = new Error(errors.join('; '));
+      error.details = errors;
+      throw error;
+    }
+
+    return {
+      productCode: payload.productCode,
+      tag: payload.tag || payload.productCode,
+      amount: payload.amount,
+      phone: String(payload.phone),
+      name: payload.name,
+      email: payload.email || '',
+      address: payload.address || '',
+      currency: payload.currency || 'USD',
+      trid: payload.trid,
+      metadata: payload.metadata,
+    };
+  };
+
+  class LonghoPay {
+    constructor(config = {}) {
+      this.configure(config);
+    }
+
+    configure(config = {}) {
+      this.config = normalizeConfig(config);
+    }
+
+    buildHostedPaymentUrl(productCode) {
+      if (!isNonEmptyString(productCode)) {
+        throw new Error('productCode is required to build a payment URL');
+      }
+      if (!isNonEmptyString(this.config.webBaseUrl)) {
+        throw new Error('webBaseUrl is required to build hosted checkout URLs');
+      }
+      const base = this.config.webBaseUrl.replace(/\/+$/, '');
+      const path = this.config.hostedPath || '/';
+      return `${base}${path}${productCode}`;
+    }
+
+    async createPayment(payment) {
+      const payload = validatePayment({
+        ...payment,
+      });
+
+      if (!isNonEmptyString(this.config.apiBaseUrl)) {
+        throw new Error('apiBaseUrl is required to create a payment');
+      }
+
+      const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+      const timeout = controller ? setTimeout(() => controller.abort(), this.config.timeoutMs) : null;
+
+      try {
+        const authHeader =
+          typeof this.config.authToken === 'function'
+            ? this.config.authToken()
+            : this.config.authToken
+              ? this.config.authToken
+              : null;
+
+        const res = await fetch(`${this.config.apiBaseUrl}${this.config.routes.pay}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(this.config.publicKey ? { 'X-Public-Key': this.config.publicKey } : {}),
+            ...(authHeader ? { Authorization: `Bearer ${authHeader}` } : {}),
+          },
+          body: JSON.stringify(payload),
+          ...(controller ? { signal: controller.signal } : {}),
+        });
+
+        const json = await res.json().catch(() => ({}));
+
+        if (!res.ok || json?.success === false) {
+          const message = json?.message || 'Payment failed.';
+          const error = new Error(message);
+          error.response = json;
+          throw error;
+        }
+
+        return {
+          success: true,
+          message: json?.message || 'Payment created.',
+          data: json?.data || json,
+        };
+      } catch (err) {
+        const message = err?.message || 'Payment request failed.';
+        return Promise.reject({
+          message,
+          cause: err,
+        });
+      } finally {
+        if (timeout) clearTimeout(timeout);
+      }
+    }
+
+    /**
+     * Create a hosted checkout session (Stripe-style) and optionally redirect.
+     * @param {Object} options - { payload, redirect: boolean, onRedirect }
+     */
+    async createCheckoutSession(options = {}) {
+      const { payload = {}, redirect = true, onRedirect } = options;
+      const validated = validatePayment(payload);
+
+      if (!isNonEmptyString(this.config.apiBaseUrl)) {
+        throw new Error('apiBaseUrl is required to create a checkout session');
+      }
+
+      const authHeader =
+        typeof this.config.authToken === 'function'
+          ? this.config.authToken()
+          : this.config.authToken
+            ? this.config.authToken
+            : null;
+
+      const res = await fetch(`${this.config.apiBaseUrl}${this.config.routes.checkoutSession}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(this.config.publicKey ? { 'X-Public-Key': this.config.publicKey } : {}),
+          ...(authHeader ? { Authorization: `Bearer ${authHeader}` } : {}),
+        },
+        body: JSON.stringify(validated),
+      });
+
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || json?.success === false) {
+        const message = json?.message || 'Unable to create checkout session.';
+        const error = new Error(message);
+        error.response = json;
+        throw error;
+      }
+
+      const checkoutUrl = json?.data?.checkoutUrl || json?.checkoutUrl;
+      if (redirect && checkoutUrl) {
+        if (typeof onRedirect === 'function') onRedirect(checkoutUrl);
+        window.location.href = checkoutUrl;
+      }
+
+      return {
+        success: true,
+        message: json?.message || 'Checkout session created.',
+        data: json?.data || json,
+        checkoutUrl,
+      };
+    }
+
+    mountPayButton(options = {}) {
+      const {
+        selector,
+        buttonText = 'Pay with LonghoPay',
+        payment = {},
+        onSuccess,
+        onError,
+        onFailure,
+        reuseTarget,
+      } = options;
+      const target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+
+      if (!target) {
+        throw new Error('mountPayButton: target element not found');
+      }
+
+      const btn = reuseTarget ? target : document.createElement('button');
+      if (!reuseTarget) {
+        btn.type = 'button';
+        btn.textContent = buttonText;
+        btn.style.cursor = 'pointer';
+        btn.style.padding = '10px 16px';
+        btn.style.backgroundColor = '#1C6EC6';
+        btn.style.color = '#ffffff';
+        btn.style.border = 'none';
+        btn.style.borderRadius = '6px';
+        btn.style.fontWeight = '600';
+        target.appendChild(btn);
+      }
+
+      const setDisabled = (disabled) => {
+        btn.disabled = disabled;
+        btn.style.opacity = disabled ? '0.65' : '1';
+      };
+
+      const clickHandler = async () => {
+        setDisabled(true);
+        this.renderPaymentForm({
+          product: {
+            productCode: payment.productCode,
+            name: payment.name,
+            amount: payment.amount,
+            tag: payment.tag,
+            currency: payment.currency,
+          },
+          defaults: {
+            phone: payment.phone,
+            email: payment.email,
+            address: payment.address,
+            amount: payment.amount,
+          },
+          onSuccess: (res) => {
+            if (typeof onSuccess === 'function') onSuccess(res);
+          },
+          onError: (err) => {
+            if (typeof onError === 'function') onError(err);
+            if (typeof onFailure === 'function') onFailure(err);
+          },
+        });
+        setDisabled(false);
+      };
+
+      btn.addEventListener('click', clickHandler);
+      return btn;
+    }
+
+    /**
+     * Render a lightweight payment form overlay.
+     * @param {Object} options
+     * @param {Object} options.product - { productCode, storeCode, name, amount, tag }
+     * @param {Object} [options.defaults] - { phone, name, email, address, allowAmountEdit }
+     * @param {Function} [options.onSuccess] - callback(result)
+     * @param {Function} [options.onError] - callback(error)
+     * @param {Function} [options.onClose] - callback()
+     * @param {string} [options.title] - form heading
+     * @param {string} [options.submitText] - button text
+     * @param {Object} [options.fields] - per-field config, e.g. { phone: { label, placeholder, visible } }
+     */
+    renderPaymentForm(options = {}) {
+      const {
+        product = {},
+        defaults = {},
+        onSuccess,
+        onError,
+        onClose,
+        title = 'Complete your payment',
+        submitText = 'Pay now',
+        fields = {},
+      } = options;
+
+      const cfgField = (key, fallbackLabel, extra = {}) => ({
+        label: fields[key]?.label || fallbackLabel,
+        placeholder: fields[key]?.placeholder || '',
+        visible: fields[key]?.visible !== false,
+        ...extra,
+      });
+
+      const fieldConfig = {
+        name: cfgField('name', 'Your name'),
+        phone: cfgField('phone', 'Phone number'),
+        email: cfgField('email', 'Email'),
+        address: cfgField('address', 'Address'),
+        amount: cfgField('amount', 'Amount', { readonly: fields.amount?.readonly ?? !defaults.allowAmountEdit }),
+      };
+
+      const overlay = document.createElement('div');
+      overlay.style.cssText = `
+        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+        display: flex; align-items: center; justify-content: center;
+        z-index: 9999; padding: 16px;
+      `;
+
+      const panel = document.createElement('div');
+      panel.style.cssText =
+        'width: 100%; max-width: 440px; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); padding: 20px; position: relative; border: 1px solid #e5e7eb; border-top: 4px solid #1C6EC6;';
+
+      const closeBtn = document.createElement('button');
+      closeBtn.type = 'button';
+      closeBtn.textContent = '×';
+      closeBtn.setAttribute('aria-label', 'Close');
+      closeBtn.style.cssText =
+        'position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; cursor: pointer;';
+
+      const heading = document.createElement('h3');
+      heading.textContent = title;
+      heading.style.cssText = 'margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #0b1f3a;';
+
+      const sub = document.createElement('p');
+      sub.textContent = product.name || product.productCode || product.tag || '';
+      sub.style.cssText = 'margin: 0 0 12px; color: #1C6EC6; font-size: 14px; font-weight: 600;';
+
+      const form = document.createElement('form');
+      form.style.cssText = 'display: flex; flex-direction: column; gap: 10px;';
+
+      const showAlert = (msg, type = 'error') => {
+        let alertBox = form.querySelector('.lhp-alert');
+        if (!alertBox) {
+          alertBox = document.createElement('div');
+          alertBox.className = 'lhp-alert';
+          alertBox.style.cssText =
+            'padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid transparent;';
+          form.prepend(alertBox);
+        }
+        alertBox.textContent = msg;
+        alertBox.style.background = type === 'error' ? '#FDECEA' : '#E8F5E9';
+        alertBox.style.borderColor = type === 'error' ? '#F5C6CB' : '#C8E6C9';
+        alertBox.style.color = type === 'error' ? '#721C24' : '#1B5E20';
+      };
+
+      const inputFactory = ({ key, label, placeholder, value = '', type = 'text', readonly = false }) => {
+        const wrapper = document.createElement('label');
+        wrapper.style.cssText = 'display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #222;';
+        wrapper.textContent = label;
+
+        const input = document.createElement('input');
+        input.name = key;
+        input.type = type;
+        input.value = value;
+        input.placeholder = placeholder || label;
+        input.readOnly = readonly;
+        input.style.cssText =
+          'padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; outline: none;';
+        input.addEventListener('focus', () => {
+          input.style.borderColor = '#1C6EC6';
+          input.style.boxShadow = '0 0 0 3px rgba(28, 110, 198, 0.15)';
+        });
+        input.addEventListener('blur', () => {
+          input.style.borderColor = '#d0d5dd';
+          input.style.boxShadow = 'none';
+        });
+
+        wrapper.appendChild(input);
+        return { wrapper, input };
+      };
+
+      const inputs = {};
+
+      const addField = (key, opts) => {
+        if (!fieldConfig[key].visible) return;
+        const { wrapper, input } = inputFactory(opts);
+        inputs[key] = input;
+        form.appendChild(wrapper);
+      };
+
+      addField('name', {
+        key: 'name',
+        label: fieldConfig.name.label,
+        placeholder: fieldConfig.name.placeholder,
+        value: defaults.name || '',
+      });
+
+      addField('phone', {
+        key: 'phone',
+        label: fieldConfig.phone.label,
+        placeholder: fieldConfig.phone.placeholder,
+        value: defaults.phone || '',
+      });
+
+      addField('email', {
+        key: 'email',
+        label: fieldConfig.email.label,
+        placeholder: fieldConfig.email.placeholder,
+        value: defaults.email || '',
+      });
+
+      addField('address', {
+        key: 'address',
+        label: fieldConfig.address.label,
+        placeholder: fieldConfig.address.placeholder,
+        value: defaults.address || '',
+      });
+
+      addField('amount', {
+        key: 'amount',
+        label: fieldConfig.amount.label,
+        placeholder: fieldConfig.amount.placeholder,
+        value: product.amount ?? defaults.amount ?? '',
+        type: 'number',
+        readonly: fieldConfig.amount.readonly,
+      });
+
+      const submitBtn = document.createElement('button');
+      submitBtn.type = 'submit';
+      submitBtn.textContent = submitText;
+      submitBtn.style.cssText =
+        'margin-top: 6px; padding: 12px; background: #1C6EC6; color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer;';
+
+      const foot = document.createElement('div');
+      foot.style.cssText = 'display: flex; justify-content: flex-end; gap: 8px; align-items: center;';
+
+      foot.appendChild(submitBtn);
+      form.appendChild(foot);
+
+      const close = () => {
+        overlay.remove();
+        if (typeof onClose === 'function') onClose();
+      };
+
+      closeBtn.addEventListener('click', close);
+
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        submitBtn.disabled = true;
+        submitBtn.style.opacity = '0.7';
+        showAlert('Processing payment...', 'info');
+
+        try {
+          const payload = {
+            productCode: product.productCode,
+            tag: product.tag || product.productCode,
+            amount: inputs.amount ? inputs.amount.value : product.amount,
+            currency: product.currency || defaults.currency,
+            phone: inputs.phone ? inputs.phone.value : '',
+            name: inputs.name ? inputs.name.value : '',
+            email: inputs.email ? inputs.email.value : '',
+            address: inputs.address ? inputs.address.value : '',
+          };
+
+          const res = await this.createPayment(payload);
+          showAlert(res.message || 'Payment successful', 'success');
+          if (typeof onSuccess === 'function') onSuccess(res);
+        } catch (err) {
+          showAlert(err?.message || 'Payment failed', 'error');
+          if (typeof onError === 'function') onError(err);
+        } finally {
+          submitBtn.disabled = false;
+          submitBtn.style.opacity = '1';
+        }
+      });
+
+      panel.appendChild(closeBtn);
+      panel.appendChild(heading);
+      panel.appendChild(sub);
+      panel.appendChild(form);
+      overlay.appendChild(panel);
+      document.body.appendChild(overlay);
+
+      return { close, overlay, form, inputs };
+    }
+
+    /**
+     * Render a simple product grid and hook click-to-pay form.
+     * @param {Object} options
+     * @param {string|HTMLElement} options.selector - container
+     * @param {Array} options.products - [{ productCode, name, amount, description, imageUrl, tag }]
+     * @param {Function} [options.renderCard] - (product) => HTMLElement
+     * @param {Object} [options.form] - passed to renderPaymentForm
+     */
+    mountProductGrid(options = {}) {
+      const { selector, products = [], renderCard, form = {} } = options;
+      const container = typeof selector === 'string' ? document.querySelector(selector) : selector;
+      if (!container) {
+        throw new Error('mountProductGrid: container not found');
+      }
+
+      const defaultCard = (p) => {
+        const card = document.createElement('div');
+        card.style.cssText =
+          'border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: box-shadow 0.2s;';
+        card.addEventListener('mouseenter', () => {
+          card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.08)';
+        });
+        card.addEventListener('mouseleave', () => {
+          card.style.boxShadow = 'none';
+        });
+
+        if (p.imageUrl) {
+          const img = document.createElement('img');
+          img.src = p.imageUrl;
+          img.alt = p.name || p.productCode || 'Product';
+          img.style.cssText = 'width: 64px; height: 64px; object-fit: cover; border-radius: 10px;';
+          card.appendChild(img);
+        }
+
+        const body = document.createElement('div');
+        body.style.cssText = 'display: flex; flex-direction: column; gap: 4px;';
+
+        const title = document.createElement('div');
+        title.textContent = p.name || p.productCode || p.tag;
+        title.style.cssText = 'font-weight: 700; color: #0b1f3a;';
+
+        const desc = document.createElement('div');
+        desc.textContent = p.description || '';
+        desc.style.cssText = 'font-size: 13px; color: #555;';
+
+        const price = document.createElement('div');
+        price.textContent = p.amount != null ? `${p.currency || 'USD'} ${p.amount}` : '';
+        price.style.cssText = 'font-size: 13px; color: #1C6EC6; font-weight: 700;';
+
+        body.appendChild(title);
+        if (desc.textContent) body.appendChild(desc);
+        if (price.textContent) body.appendChild(price);
+
+        card.appendChild(body);
+        return card;
+      };
+
+      container.innerHTML = '';
+      products.forEach((p) => {
+        const card = typeof renderCard === 'function' ? renderCard(p) : defaultCard(p);
+        card.addEventListener('click', () => {
+          this.renderPaymentForm({
+            product: p,
+            defaults: { amount: p.amount },
+            ...form,
+          });
+        });
+        container.appendChild(card);
+      });
+
+      return container;
+    }
+
+    /**
+     * Plug-and-play binding: attach to any element with data attributes.
+     * Expected data attributes:
+     *  - data-lhp-tag (required)
+     *  - data-lhp-amount (required)
+     *  - data-lhp-name (optional, product name)
+     *  - data-lhp-currency (optional)
+     *  - data-lhp-phone / data-lhp-email (optional defaults)
+     */
+    autoBindPayButtons(options = {}) {
+      const {
+        selector = '[data-lhp-pay]',
+        onSuccess,
+        onError,
+        onFailure,
+        defaults = {},
+        submitText = 'Pay with LonghoPay',
+      } = options;
+
+      const nodes = Array.from(document.querySelectorAll(selector));
+      nodes.forEach((node) => {
+        const dataset = node.dataset || {};
+        const product = {
+          tag: dataset.lhpTag,
+          amount: dataset.lhpAmount,
+          name: dataset.lhpName || node.textContent?.trim(),
+          currency: dataset.lhpCurrency || defaults.currency,
+        };
+
+        node.addEventListener('click', (e) => {
+          e.preventDefault();
+          this.renderPaymentForm({
+            product,
+            defaults: {
+              ...defaults,
+              phone: dataset.lhpPhone || defaults.phone,
+              email: dataset.lhpEmail || defaults.email,
+              amount: product.amount,
+            },
+            submitText,
+            onSuccess,
+            onError: (err) => {
+              if (typeof onError === 'function') onError(err);
+              if (typeof onFailure === 'function') onFailure(err);
+            },
+          });
+        });
+      });
+
+      return nodes;
+    }
+  }
+
+  const api = {
+    version: '0.3.0',
+    init: (config) => new LonghoPay(config),
+    LonghoPaySDK: LonghoPay,
+  };
+
+  global.LonghoPaySDK = api;
+})(typeof window !== 'undefined' ? window : globalThis);

package/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: 'src/index.js',
+            name: 'LonghoPaySDK',
+            fileName: (format) => `payment-sdk.${format}.js`,
+            formats: ['iife', 'es'],
+        },
+        rollupOptions: {
+            output: {
+                globals: {},
+            },
+        },
+    },
+});