@payinto/checkout-sdk 1.1.0 → 1.2.0

package/dist/v1/checkout.es.js

@@ -1 +1 @@
-const e="undefined"!=typeof window,t=e?"https://checkout.payinto.co":"",o="/v1".replace(/\/+$/,""),n=`${t}${o}/popup`,i="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),r=e?new URL(n).origin:"",c=/* @__PURE__ */new Set([r,...i]),s=e=>{try{const t=new URL(e.checkout_url),o=e.checkout_version||(e=>{try{const t=new URL(e).pathname.split("/").filter(Boolean)[0];return/^v[0-9]+$/i.test(t||"")?t:void 0}catch{return}})(e.checkout_url);return o?`${t.origin}/${o}/popup`:`${t.origin}/popup`}catch{return n}};const a=new class{container=null;iframe=null;messageListener=null;callbacks={};initRetryTimer=null;open(e){const t=(e=>{if("token"===e.mode)return e;if("public_key"===e.mode)return e;throw new Error('Payinto Checkout: invalid options. Provide a valid mode ("token" or "public_key").')})(e);this.container&&this.close(),this.callbacks={onClose:t.onClose,onSuccess:t.onSuccess,onError:t.onError,callback:t.callback},this.mountOverlay();(async()=>{try{const e="token"===t.mode?this.validateTokenMode(t):await this.initializePublicKeyMode(t);this.bindMessageListener(),this.initializeIframe(e)}catch(e){const t=e instanceof Error?e.message:"Unable to initialize checkout.";this.handleError({type:"checkout.error",code:"initialization_failed",message:t})}})()}pay(e){this.open(e)}close=()=>{this.clearInitRetry(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.container&&document.body.contains(this.container)&&document.body.removeChild(this.container),this.container=null,this.iframe=null,document.body.classList.remove("payinto-checkout-open")};clearInitRetry(){null!==this.initRetryTimer&&(window.clearInterval(this.initRetryTimer),this.initRetryTimer=null)}mountOverlay(){const e=document.createElement("div");e.id="payinto-checkout-container",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.right="0",e.style.bottom="0",e.style.width="100%",e.style.minHeight="100vh",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.85)",e.style.zIndex="9999",e.style.display="flex",e.style.alignItems="flex-start",e.style.justifyContent="center",e.style.overflowY="auto",e.style.paddingTop="6rem",e.style.paddingBottom="2rem",e.style.boxSizing="border-box";const t=document.createElement("div");t.className="payinto-preloader",t.style.display="flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.position="absolute",t.style.top="6rem",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.width="100%",t.style.maxWidth="650px",t.style.padding="4rem 0",t.style.zIndex="10",t.style.fontFamily="system-ui, -apple-system, sans-serif";const o=document.createElement("div");o.style.width="40px",o.style.height="40px",o.style.borderRadius="50%",o.style.border="2px solid transparent",o.style.borderBottom="2px solid #ffffff",o.style.marginBottom="16px",o.style.animation="spin 1s linear infinite";const i=document.createElement("p");i.id="payinto-checkout-subtitle",i.innerText="Initializing Secure Checkout...",i.style.fontSize="12px",i.style.color="#e5e7eb",i.style.margin="0",t.appendChild(o),t.appendChild(i),e.appendChild(t);const r=document.createElement("iframe");if(r.src=n,r.style.width="100%",r.style.maxWidth="650px",r.style.height="auto",r.style.border="none",r.style.backgroundColor="transparent",r.style.opacity="0",r.style.transition="opacity 0.25s ease",r.allow="payment; clipboard-read; clipboard-write",e.appendChild(r),!document.getElementById("payinto-checkout-styles")){const e=document.createElement("style");e.id="payinto-checkout-styles",e.innerHTML="\n      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n      body.payinto-checkout-open { overflow: hidden !important; }\n      @media (max-width: 767px) {\n        #payinto-checkout-container {\n          position: fixed !important;\n          top: 0 !important;\n          left: 0 !important;\n          right: 0 !important;\n          bottom: 0 !important;\n          height: 100% !important;\n          min-height: 100vh !important;\n          overflow-y: auto !important;\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n        .payinto-preloader { top: 2rem !important; }\n      }\n      ",document.head.appendChild(e)}document.body.appendChild(e),document.body.classList.add("payinto-checkout-open"),this.container=e,this.iframe=r}validateTokenMode(e){if(!e.token||"string"!=typeof e.token)throw new Error('Payinto Checkout: token is required for mode="token".');if(!e.checkout_url||"string"!=typeof e.checkout_url)throw new Error('Payinto Checkout: checkout_url is required for mode="token".');if(!new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: invalid checkout_url.");return{token:e.token,checkout_url:e.checkout_url,merchant_reference:e.merchant_reference,checkout_version:e.checkout_version}}async initializePublicKeyMode(e){if(!e.public_key)throw new Error('Payinto Checkout: public_key is required for mode="public_key".');if(!e.customer?.email)throw new Error('Payinto Checkout: customer.email is required for mode="public_key".');if(!e.amount||e.amount<=0)throw new Error('Payinto Checkout: amount must be greater than zero for mode="public_key".');const t={merchant_reference:e.merchant_reference,amount:e.amount,currency:e.currency,customer:e.customer,redirect_url:e.redirect_url,metadata:e.metadata,checkout_version:e.checkout_version},o=await fetch("https://api.payinto.co/api/v1/checkout/initialize",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json",Authorization:`Bearer ${e.public_key}`},body:JSON.stringify(t)});if(!o.ok){const e=(e=>{try{return JSON.parse(e)}catch{return null}})(await o.text());throw new Error(e?.message||"Failed to initialize transaction.")}const n=await o.json(),i=n.data||(n.token&&n.checkout_url?{token:n.token,checkout_url:n.checkout_url,merchant_reference:n.merchant_reference,checkout_version:n.checkout_version}:void 0);if(!i?.token||!i?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:i.token,checkout_url:i.checkout_url,merchant_reference:i.merchant_reference,checkout_version:i.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),n=s(e),i=new URL(n).origin,r=new URL(e.checkout_url).origin,a=Array.from(/* @__PURE__ */new Set([i,r]));if(!c.has(i)&&i!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${n}?updated=${Date.now()}`,this.iframe.onload=()=>{o&&(o.style.display="none"),this.iframe&&(this.iframe.style.opacity="1");const t=()=>{const t={type:"checkout.init",token:e.token,merchant_reference:e.merchant_reference,checkout_url:e.checkout_url};for(const e of a)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let n=0;this.initRetryTimer=window.setInterval(()=>{n+=1,n>=8?this.clearInitRetry():t()},500)},t&&(t.innerText="Loading checkout...")}bindMessageListener(){const e=e=>{if(!c.has(e.origin))return;this.clearInitRetry();const t=e.data;if("object"==typeof t&&"checkout.resize"===t?.type&&this.iframe)this.iframe.style.height=`${Math.max(300,t.height||0)}px`;else{if("object"==typeof t&&"checkout.close"===t?.type)return this.callbacks.onClose?.(),void this.close();if("object"==typeof t&&"checkout.success"===t?.type||"checkout.success"===t){const e="object"==typeof t?t:{type:"checkout.success",status:"success"};return this.callbacks.onSuccess?.(e),this.callbacks.callback?.(e),void this.close()}"object"==typeof t&&"checkout.error"===t?.type&&this.handleError(t)}};this.messageListener=e,window.addEventListener("message",e)}handleError(e){if(this.callbacks.onError?.(e),this.container){const t=this.container.querySelector(".payinto-preloader"),o=this.container.querySelector("#payinto-checkout-subtitle");t&&(t.style.display="flex"),o&&(o.innerText=e.message,o.style.color="#ff4444")}setTimeout(()=>{this.close()},1800)}},l={open:e=>a.open(e),pay:e=>a.pay(e),close:()=>a.close()},h=e=>{a.open(e)};h.open=e=>a.open(e),h.pay=e=>a.pay(e),h.close=()=>a.close(),e&&(window.PayintoCheckout=h);export{l as PayintoCheckoutApi,l as default};
+const e="undefined"!=typeof window,t=e?"https://checkout.payinto.co":"",o="/v1".replace(/\/+$/,""),n=`${t}${o}/popup`,i="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),r=e?new URL(n).origin:"",c=/* @__PURE__ */new Set([r,...i]),s=e=>{try{const t=new URL(e.checkout_url),o=e.checkout_version||(e=>{try{const t=new URL(e).pathname.split("/").filter(Boolean)[0];return/^v[0-9]+$/i.test(t||"")?t:void 0}catch{return}})(e.checkout_url);return o?`${t.origin}/${o}/popup`:`${t.origin}/popup`}catch{return n}};const a=new class{container=null;iframe=null;messageListener=null;callbacks={};initRetryTimer=null;open(e){const t=(e=>{if("token"===e.mode)return e;if("public_key"===e.mode)return e;throw new Error('Payinto Checkout: invalid options. Provide a valid mode ("token" or "public_key").')})(e);this.container&&this.close(),this.callbacks={onClose:t.onClose,onSuccess:t.onSuccess,onError:t.onError,callback:t.callback},this.mountOverlay();(async()=>{try{const e="token"===t.mode?this.validateTokenMode(t):await this.initializePublicKeyMode(t);this.bindMessageListener(),this.initializeIframe(e)}catch(e){const t=e instanceof Error?e.message:"Unable to initialize checkout.";this.handleError({type:"checkout.error",code:"initialization_failed",message:t})}})()}pay(e){this.open(e)}close=()=>{this.clearInitRetry(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.container&&document.body.contains(this.container)&&document.body.removeChild(this.container),this.container=null,this.iframe=null,document.body.classList.remove("payinto-checkout-open")};clearInitRetry(){null!==this.initRetryTimer&&(window.clearInterval(this.initRetryTimer),this.initRetryTimer=null)}mountOverlay(){const e=document.createElement("div");e.id="payinto-checkout-container",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.right="0",e.style.bottom="0",e.style.width="100%",e.style.minHeight="100vh",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.85)",e.style.zIndex="9999",e.style.display="flex",e.style.alignItems="flex-start",e.style.justifyContent="center",e.style.overflowY="auto",e.style.paddingTop="6rem",e.style.paddingBottom="2rem",e.style.boxSizing="border-box";const t=document.createElement("div");t.className="payinto-preloader",t.style.display="flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.position="absolute",t.style.top="6rem",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.width="100%",t.style.maxWidth="720px",t.style.padding="4rem 0",t.style.zIndex="10",t.style.fontFamily="system-ui, -apple-system, sans-serif";const o=document.createElement("div");o.style.width="40px",o.style.height="40px",o.style.borderRadius="50%",o.style.border="2px solid transparent",o.style.borderBottom="2px solid #ffffff",o.style.marginBottom="16px",o.style.animation="spin 1s linear infinite";const i=document.createElement("p");i.id="payinto-checkout-subtitle",i.innerText="Initializing Secure Checkout...",i.style.fontSize="12px",i.style.color="#e5e7eb",i.style.margin="0",t.appendChild(o),t.appendChild(i),e.appendChild(t);const r=document.createElement("iframe");if(r.src=n,r.style.width="100%",r.style.maxWidth="720px",r.style.height="auto",r.style.border="none",r.style.backgroundColor="transparent",r.style.opacity="0",r.style.transition="opacity 0.25s ease",r.allow="payment; clipboard-read; clipboard-write",e.appendChild(r),!document.getElementById("payinto-checkout-styles")){const e=document.createElement("style");e.id="payinto-checkout-styles",e.innerHTML="\n      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n      body.payinto-checkout-open { overflow: hidden !important; }\n      @media (max-width: 767px) {\n        #payinto-checkout-container {\n          position: fixed !important;\n          top: 0 !important;\n          left: 0 !important;\n          right: 0 !important;\n          bottom: 0 !important;\n          height: 100% !important;\n          min-height: 100vh !important;\n          overflow-y: auto !important;\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n        .payinto-preloader { top: 2rem !important; }\n      }\n      ",document.head.appendChild(e)}document.body.appendChild(e),document.body.classList.add("payinto-checkout-open"),this.container=e,this.iframe=r}validateTokenMode(e){if(!e.token||"string"!=typeof e.token)throw new Error('Payinto Checkout: token is required for mode="token".');if(!e.checkout_url||"string"!=typeof e.checkout_url)throw new Error('Payinto Checkout: checkout_url is required for mode="token".');if(!new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: invalid checkout_url.");return{token:e.token,checkout_url:e.checkout_url,merchant_reference:e.merchant_reference,checkout_version:e.checkout_version}}async initializePublicKeyMode(e){if(!e.public_key)throw new Error('Payinto Checkout: public_key is required for mode="public_key".');if(!e.customer?.email)throw new Error('Payinto Checkout: customer.email is required for mode="public_key".');if(!e.amount||e.amount<=0)throw new Error('Payinto Checkout: amount must be greater than zero for mode="public_key".');const t={merchant_reference:e.merchant_reference,amount:e.amount,currency:e.currency,customer:e.customer,redirect_url:e.redirect_url,metadata:e.metadata,checkout_version:e.checkout_version},o=await fetch("https://api.payinto.co/api/v1/checkout/initialize",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json",Authorization:`Bearer ${e.public_key}`},body:JSON.stringify(t)});if(!o.ok){const e=(e=>{try{return JSON.parse(e)}catch{return null}})(await o.text());throw new Error(e?.message||"Failed to initialize transaction.")}const n=await o.json(),i=n.data||(n.token&&n.checkout_url?{token:n.token,checkout_url:n.checkout_url,merchant_reference:n.merchant_reference,checkout_version:n.checkout_version}:void 0);if(!i?.token||!i?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:i.token,checkout_url:i.checkout_url,merchant_reference:i.merchant_reference,checkout_version:i.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),n=s(e),i=new URL(n).origin,r=new URL(e.checkout_url).origin,a=Array.from(/* @__PURE__ */new Set([i,r]));if(!c.has(i)&&i!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${n}?updated=${Date.now()}`,this.iframe.onload=()=>{o&&(o.style.display="none"),this.iframe&&(this.iframe.style.opacity="1");const t=()=>{const t={type:"checkout.init",token:e.token,merchant_reference:e.merchant_reference,checkout_url:e.checkout_url};for(const e of a)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let n=0;this.initRetryTimer=window.setInterval(()=>{n+=1,n>=8?this.clearInitRetry():t()},500)},t&&(t.innerText="Loading checkout...")}bindMessageListener(){const e=e=>{if(!c.has(e.origin))return;this.clearInitRetry();const t=e.data;if("object"==typeof t&&"checkout.resize"===t?.type&&this.iframe)this.iframe.style.height=`${Math.max(300,t.height||0)}px`;else{if("object"==typeof t&&"checkout.close"===t?.type)return this.callbacks.onClose?.(),void this.close();if("object"==typeof t&&"checkout.success"===t?.type||"checkout.success"===t){const e="object"==typeof t?t:{type:"checkout.success",status:"success"};return this.callbacks.onSuccess?.(e),this.callbacks.callback?.(e),void this.close()}"object"==typeof t&&"checkout.error"===t?.type&&this.handleError(t)}};this.messageListener=e,window.addEventListener("message",e)}handleError(e){if(this.callbacks.onError?.(e),this.container){const t=this.container.querySelector(".payinto-preloader"),o=this.container.querySelector("#payinto-checkout-subtitle");t&&(t.style.display="flex"),o&&(o.innerText=e.message,o.style.color="#ff4444")}setTimeout(()=>{this.close()},1800)}},l={open:e=>a.open(e),pay:e=>a.pay(e),close:()=>a.close()},h=e=>{a.open(e)};h.open=e=>a.open(e),h.pay=e=>a.pay(e),h.close=()=>a.close(),e&&(window.PayintoCheckout=h);export{l as PayintoCheckoutApi,l as default};

package/dist/v1/checkout.js

@@ -1 +1 @@
-var PayintoCheckout=function(e){"use strict";const t="undefined"!=typeof window,o=t?"https://checkout.payinto.co":"",n="/v1".replace(/\/+$/,""),i=`${o}${n}/popup`,r="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),c=t?new URL(i).origin:"",s=new Set([c,...r]),a=e=>{try{const t=new URL(e.checkout_url),o=e.checkout_version||(e=>{try{const t=new URL(e).pathname.split("/").filter(Boolean)[0];return/^v[0-9]+$/i.test(t||"")?t:void 0}catch{return}})(e.checkout_url);return o?`${t.origin}/${o}/popup`:`${t.origin}/popup`}catch{return i}};const l=new class{container=null;iframe=null;messageListener=null;callbacks={};initRetryTimer=null;open(e){const t=(e=>{if("token"===e.mode)return e;if("public_key"===e.mode)return e;throw new Error('Payinto Checkout: invalid options. Provide a valid mode ("token" or "public_key").')})(e);this.container&&this.close(),this.callbacks={onClose:t.onClose,onSuccess:t.onSuccess,onError:t.onError,callback:t.callback},this.mountOverlay();(async()=>{try{const e="token"===t.mode?this.validateTokenMode(t):await this.initializePublicKeyMode(t);this.bindMessageListener(),this.initializeIframe(e)}catch(e){const t=e instanceof Error?e.message:"Unable to initialize checkout.";this.handleError({type:"checkout.error",code:"initialization_failed",message:t})}})()}pay(e){this.open(e)}close=()=>{this.clearInitRetry(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.container&&document.body.contains(this.container)&&document.body.removeChild(this.container),this.container=null,this.iframe=null,document.body.classList.remove("payinto-checkout-open")};clearInitRetry(){null!==this.initRetryTimer&&(window.clearInterval(this.initRetryTimer),this.initRetryTimer=null)}mountOverlay(){const e=document.createElement("div");e.id="payinto-checkout-container",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.right="0",e.style.bottom="0",e.style.width="100%",e.style.minHeight="100vh",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.85)",e.style.zIndex="9999",e.style.display="flex",e.style.alignItems="flex-start",e.style.justifyContent="center",e.style.overflowY="auto",e.style.paddingTop="6rem",e.style.paddingBottom="2rem",e.style.boxSizing="border-box";const t=document.createElement("div");t.className="payinto-preloader",t.style.display="flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.position="absolute",t.style.top="6rem",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.width="100%",t.style.maxWidth="650px",t.style.padding="4rem 0",t.style.zIndex="10",t.style.fontFamily="system-ui, -apple-system, sans-serif";const o=document.createElement("div");o.style.width="40px",o.style.height="40px",o.style.borderRadius="50%",o.style.border="2px solid transparent",o.style.borderBottom="2px solid #ffffff",o.style.marginBottom="16px",o.style.animation="spin 1s linear infinite";const n=document.createElement("p");n.id="payinto-checkout-subtitle",n.innerText="Initializing Secure Checkout...",n.style.fontSize="12px",n.style.color="#e5e7eb",n.style.margin="0",t.appendChild(o),t.appendChild(n),e.appendChild(t);const r=document.createElement("iframe");if(r.src=i,r.style.width="100%",r.style.maxWidth="650px",r.style.height="auto",r.style.border="none",r.style.backgroundColor="transparent",r.style.opacity="0",r.style.transition="opacity 0.25s ease",r.allow="payment; clipboard-read; clipboard-write",e.appendChild(r),!document.getElementById("payinto-checkout-styles")){const e=document.createElement("style");e.id="payinto-checkout-styles",e.innerHTML="\n      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n      body.payinto-checkout-open { overflow: hidden !important; }\n      @media (max-width: 767px) {\n        #payinto-checkout-container {\n          position: fixed !important;\n          top: 0 !important;\n          left: 0 !important;\n          right: 0 !important;\n          bottom: 0 !important;\n          height: 100% !important;\n          min-height: 100vh !important;\n          overflow-y: auto !important;\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n        .payinto-preloader { top: 2rem !important; }\n      }\n      ",document.head.appendChild(e)}document.body.appendChild(e),document.body.classList.add("payinto-checkout-open"),this.container=e,this.iframe=r}validateTokenMode(e){if(!e.token||"string"!=typeof e.token)throw new Error('Payinto Checkout: token is required for mode="token".');if(!e.checkout_url||"string"!=typeof e.checkout_url)throw new Error('Payinto Checkout: checkout_url is required for mode="token".');if(!new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: invalid checkout_url.");return{token:e.token,checkout_url:e.checkout_url,merchant_reference:e.merchant_reference,checkout_version:e.checkout_version}}async initializePublicKeyMode(e){if(!e.public_key)throw new Error('Payinto Checkout: public_key is required for mode="public_key".');if(!e.customer?.email)throw new Error('Payinto Checkout: customer.email is required for mode="public_key".');if(!e.amount||e.amount<=0)throw new Error('Payinto Checkout: amount must be greater than zero for mode="public_key".');const t={merchant_reference:e.merchant_reference,amount:e.amount,currency:e.currency,customer:e.customer,redirect_url:e.redirect_url,metadata:e.metadata,checkout_version:e.checkout_version},o=await fetch("https://api.payinto.co/api/v1/checkout/initialize",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json",Authorization:`Bearer ${e.public_key}`},body:JSON.stringify(t)});if(!o.ok){const e=(e=>{try{return JSON.parse(e)}catch{return null}})(await o.text());throw new Error(e?.message||"Failed to initialize transaction.")}const n=await o.json(),i=n.data||(n.token&&n.checkout_url?{token:n.token,checkout_url:n.checkout_url,merchant_reference:n.merchant_reference,checkout_version:n.checkout_version}:void 0);if(!i?.token||!i?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:i.token,checkout_url:i.checkout_url,merchant_reference:i.merchant_reference,checkout_version:i.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),n=a(e),i=new URL(n).origin,r=new URL(e.checkout_url).origin,c=Array.from(new Set([i,r]));if(!s.has(i)&&i!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${n}?updated=${Date.now()}`,this.iframe.onload=()=>{o&&(o.style.display="none"),this.iframe&&(this.iframe.style.opacity="1");const t=()=>{const t={type:"checkout.init",token:e.token,merchant_reference:e.merchant_reference,checkout_url:e.checkout_url};for(const e of c)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let n=0;this.initRetryTimer=window.setInterval(()=>{n+=1,n>=8?this.clearInitRetry():t()},500)},t&&(t.innerText="Loading checkout...")}bindMessageListener(){const e=e=>{if(!s.has(e.origin))return;this.clearInitRetry();const t=e.data;if("object"==typeof t&&"checkout.resize"===t?.type&&this.iframe)this.iframe.style.height=`${Math.max(300,t.height||0)}px`;else{if("object"==typeof t&&"checkout.close"===t?.type)return this.callbacks.onClose?.(),void this.close();if("object"==typeof t&&"checkout.success"===t?.type||"checkout.success"===t){const e="object"==typeof t?t:{type:"checkout.success",status:"success"};return this.callbacks.onSuccess?.(e),this.callbacks.callback?.(e),void this.close()}"object"==typeof t&&"checkout.error"===t?.type&&this.handleError(t)}};this.messageListener=e,window.addEventListener("message",e)}handleError(e){if(this.callbacks.onError?.(e),this.container){const t=this.container.querySelector(".payinto-preloader"),o=this.container.querySelector("#payinto-checkout-subtitle");t&&(t.style.display="flex"),o&&(o.innerText=e.message,o.style.color="#ff4444")}setTimeout(()=>{this.close()},1800)}},u={open:e=>l.open(e),pay:e=>l.pay(e),close:()=>l.close()},h=e=>{l.open(e)};return h.open=e=>l.open(e),h.pay=e=>l.pay(e),h.close=()=>l.close(),t&&(window.PayintoCheckout=h),e.PayintoCheckoutApi=u,e.default=u,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),e}({});
+var PayintoCheckoutBundle=function(e){"use strict";const t="undefined"!=typeof window,o=t?"https://checkout.payinto.co":"",n="/v1".replace(/\/+$/,""),i=`${o}${n}/popup`,r="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),c=t?new URL(i).origin:"",s=new Set([c,...r]),a=e=>{try{const t=new URL(e.checkout_url),o=e.checkout_version||(e=>{try{const t=new URL(e).pathname.split("/").filter(Boolean)[0];return/^v[0-9]+$/i.test(t||"")?t:void 0}catch{return}})(e.checkout_url);return o?`${t.origin}/${o}/popup`:`${t.origin}/popup`}catch{return i}};const l=new class{container=null;iframe=null;messageListener=null;callbacks={};initRetryTimer=null;open(e){const t=(e=>{if("token"===e.mode)return e;if("public_key"===e.mode)return e;throw new Error('Payinto Checkout: invalid options. Provide a valid mode ("token" or "public_key").')})(e);this.container&&this.close(),this.callbacks={onClose:t.onClose,onSuccess:t.onSuccess,onError:t.onError,callback:t.callback},this.mountOverlay();(async()=>{try{const e="token"===t.mode?this.validateTokenMode(t):await this.initializePublicKeyMode(t);this.bindMessageListener(),this.initializeIframe(e)}catch(e){const t=e instanceof Error?e.message:"Unable to initialize checkout.";this.handleError({type:"checkout.error",code:"initialization_failed",message:t})}})()}pay(e){this.open(e)}close=()=>{this.clearInitRetry(),this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null),this.container&&document.body.contains(this.container)&&document.body.removeChild(this.container),this.container=null,this.iframe=null,document.body.classList.remove("payinto-checkout-open")};clearInitRetry(){null!==this.initRetryTimer&&(window.clearInterval(this.initRetryTimer),this.initRetryTimer=null)}mountOverlay(){const e=document.createElement("div");e.id="payinto-checkout-container",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.right="0",e.style.bottom="0",e.style.width="100%",e.style.minHeight="100vh",e.style.height="100%",e.style.backgroundColor="rgba(0, 0, 0, 0.85)",e.style.zIndex="9999",e.style.display="flex",e.style.alignItems="flex-start",e.style.justifyContent="center",e.style.overflowY="auto",e.style.paddingTop="6rem",e.style.paddingBottom="2rem",e.style.boxSizing="border-box";const t=document.createElement("div");t.className="payinto-preloader",t.style.display="flex",t.style.flexDirection="column",t.style.alignItems="center",t.style.justifyContent="center",t.style.position="absolute",t.style.top="6rem",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.width="100%",t.style.maxWidth="720px",t.style.padding="4rem 0",t.style.zIndex="10",t.style.fontFamily="system-ui, -apple-system, sans-serif";const o=document.createElement("div");o.style.width="40px",o.style.height="40px",o.style.borderRadius="50%",o.style.border="2px solid transparent",o.style.borderBottom="2px solid #ffffff",o.style.marginBottom="16px",o.style.animation="spin 1s linear infinite";const n=document.createElement("p");n.id="payinto-checkout-subtitle",n.innerText="Initializing Secure Checkout...",n.style.fontSize="12px",n.style.color="#e5e7eb",n.style.margin="0",t.appendChild(o),t.appendChild(n),e.appendChild(t);const r=document.createElement("iframe");if(r.src=i,r.style.width="100%",r.style.maxWidth="720px",r.style.height="auto",r.style.border="none",r.style.backgroundColor="transparent",r.style.opacity="0",r.style.transition="opacity 0.25s ease",r.allow="payment; clipboard-read; clipboard-write",e.appendChild(r),!document.getElementById("payinto-checkout-styles")){const e=document.createElement("style");e.id="payinto-checkout-styles",e.innerHTML="\n      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n      body.payinto-checkout-open { overflow: hidden !important; }\n      @media (max-width: 767px) {\n        #payinto-checkout-container {\n          position: fixed !important;\n          top: 0 !important;\n          left: 0 !important;\n          right: 0 !important;\n          bottom: 0 !important;\n          height: 100% !important;\n          min-height: 100vh !important;\n          overflow-y: auto !important;\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n        .payinto-preloader { top: 2rem !important; }\n      }\n      ",document.head.appendChild(e)}document.body.appendChild(e),document.body.classList.add("payinto-checkout-open"),this.container=e,this.iframe=r}validateTokenMode(e){if(!e.token||"string"!=typeof e.token)throw new Error('Payinto Checkout: token is required for mode="token".');if(!e.checkout_url||"string"!=typeof e.checkout_url)throw new Error('Payinto Checkout: checkout_url is required for mode="token".');if(!new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: invalid checkout_url.");return{token:e.token,checkout_url:e.checkout_url,merchant_reference:e.merchant_reference,checkout_version:e.checkout_version}}async initializePublicKeyMode(e){if(!e.public_key)throw new Error('Payinto Checkout: public_key is required for mode="public_key".');if(!e.customer?.email)throw new Error('Payinto Checkout: customer.email is required for mode="public_key".');if(!e.amount||e.amount<=0)throw new Error('Payinto Checkout: amount must be greater than zero for mode="public_key".');const t={merchant_reference:e.merchant_reference,amount:e.amount,currency:e.currency,customer:e.customer,redirect_url:e.redirect_url,metadata:e.metadata,checkout_version:e.checkout_version},o=await fetch("https://api.payinto.co/api/v1/checkout/initialize",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json",Authorization:`Bearer ${e.public_key}`},body:JSON.stringify(t)});if(!o.ok){const e=(e=>{try{return JSON.parse(e)}catch{return null}})(await o.text());throw new Error(e?.message||"Failed to initialize transaction.")}const n=await o.json(),i=n.data||(n.token&&n.checkout_url?{token:n.token,checkout_url:n.checkout_url,merchant_reference:n.merchant_reference,checkout_version:n.checkout_version}:void 0);if(!i?.token||!i?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:i.token,checkout_url:i.checkout_url,merchant_reference:i.merchant_reference,checkout_version:i.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),n=a(e),i=new URL(n).origin,r=new URL(e.checkout_url).origin,c=Array.from(new Set([i,r]));if(!s.has(i)&&i!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${n}?updated=${Date.now()}`,this.iframe.onload=()=>{o&&(o.style.display="none"),this.iframe&&(this.iframe.style.opacity="1");const t=()=>{const t={type:"checkout.init",token:e.token,merchant_reference:e.merchant_reference,checkout_url:e.checkout_url};for(const e of c)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let n=0;this.initRetryTimer=window.setInterval(()=>{n+=1,n>=8?this.clearInitRetry():t()},500)},t&&(t.innerText="Loading checkout...")}bindMessageListener(){const e=e=>{if(!s.has(e.origin))return;this.clearInitRetry();const t=e.data;if("object"==typeof t&&"checkout.resize"===t?.type&&this.iframe)this.iframe.style.height=`${Math.max(300,t.height||0)}px`;else{if("object"==typeof t&&"checkout.close"===t?.type)return this.callbacks.onClose?.(),void this.close();if("object"==typeof t&&"checkout.success"===t?.type||"checkout.success"===t){const e="object"==typeof t?t:{type:"checkout.success",status:"success"};return this.callbacks.onSuccess?.(e),this.callbacks.callback?.(e),void this.close()}"object"==typeof t&&"checkout.error"===t?.type&&this.handleError(t)}};this.messageListener=e,window.addEventListener("message",e)}handleError(e){if(this.callbacks.onError?.(e),this.container){const t=this.container.querySelector(".payinto-preloader"),o=this.container.querySelector("#payinto-checkout-subtitle");t&&(t.style.display="flex"),o&&(o.innerText=e.message,o.style.color="#ff4444")}setTimeout(()=>{this.close()},1800)}},u={open:e=>l.open(e),pay:e=>l.pay(e),close:()=>l.close()},h=e=>{l.open(e)};return h.open=e=>l.open(e),h.pay=e=>l.pay(e),h.close=()=>l.close(),t&&(window.PayintoCheckout=h),e.PayintoCheckoutApi=u,e.default=u,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),e}({});

package/dist/v1/demo.html

@@ -44,12 +44,51 @@
             font-size: 14px;
         }
 
-        .button-group {
-            display: flex;
-            flex-direction: column;
+        form {
+            display: grid;
+            gap: 16px;
+        }
+
+        .field-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
             gap: 12px;
         }
 
+        label {
+            display: grid;
+            gap: 6px;
+            color: #4a5568;
+            font-size: 12px;
+            font-weight: 700;
+        }
+
+        input,
+        select,
+        textarea {
+            width: 100%;
+            border: 1px solid #cbd5e0;
+            border-radius: 8px;
+            padding: 12px;
+            color: #1a202c;
+            font: inherit;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        input:focus,
+        select:focus,
+        textarea:focus {
+            border-color: #1a202c;
+            box-shadow: 0 0 0 3px rgba(26, 32, 44, 0.12);
+        }
+
+        textarea {
+            min-height: 82px;
+            resize: vertical;
+        }
+
         button {
             background: #1a202c;
             color: white;
@@ -72,6 +111,16 @@
             transform: translateY(0);
         }
 
+        .form-error {
+            display: none;
+            padding: 10px 12px;
+            border-radius: 8px;
+            background: #fff5f5;
+            color: #c53030;
+            font-size: 13px;
+            font-weight: 600;
+        }
+
         .code-block {
             background: #f7fafc;
             border: 1px solid #e2e8f0;
@@ -101,6 +150,16 @@
             text-transform: uppercase;
             margin-bottom: 16px;
         }
+
+        @media (max-width: 560px) {
+            .demo-container {
+                padding: 24px;
+            }
+
+            .field-grid {
+                grid-template-columns: 1fr;
+            }
+        }
     </style>
 </head>
 
@@ -108,40 +167,73 @@
     <div class="demo-container">
         <span class="badge">Demo</span>
         <h1>Payinto Checkout</h1>
-        <p>Click the button below to test the payment checkout integration.</p>
+        <p>Enter checkout details and launch the local popup integration.</p>
+
+        <form id="checkout-form">
+            <label>
+                Public Key
+                <input id="public-key" name="public_key" value="pk_live_784683f25db04c05838ee730ce489e27e46e" required>
+            </label>
+
+            <div class="field-grid">
+                <label>
+                    Amount
+                    <input id="amount" name="amount" type="number" min="1" step="1" value="100000" required>
+                </label>
+
+                <label>
+                    Currency
+                    <select id="currency" name="currency">
+                        <option value="NGN" selected>NGN</option>
+                        <option value="USD">USD</option>
+                        <option value="GBP">GBP</option>
+                    </select>
+                </label>
+            </div>
+
+            <label>
+                Merchant Reference
+                <input id="merchant-reference" name="merchant_reference" value="TRANS_123456" required>
+            </label>
 
-        <div class="button-group">
-            <button onclick="openCheckout()">
-                Pay NGN 10,000
+            <div class="field-grid">
+                <label>
+                    Customer Name
+                    <input id="customer-name" name="customer_name" value="John Doe">
+                </label>
+
+                <label>
+                    Customer Email
+                    <input id="customer-email" name="customer_email" type="email" value="john.doe@example.com" required>
+                </label>
+            </div>
+
+            <div class="field-grid">
+                <label>
+                    Phone Number
+                    <input id="phone-number" name="phone_number" value="08123456789">
+                </label>
+
+                <label>
+                    Redirect URL
+                    <input id="redirect-url" name="redirect_url" type="url" value="https://example.com/redirect">
+                </label>
+            </div>
+
+            <label>
+                Metadata JSON
+                <textarea id="metadata" name="metadata">{"custom_field":"custom_value"}</textarea>
+            </label>
+
+            <div id="form-error" class="form-error"></div>
+
+            <button type="submit">
+                Open Checkout
             </button>
-        </div>
+        </form>
 
         <div class="code-block">
-            <pre>PayintoCheckout({
-    mode: 'public_key',
-    public_key: 'pk_test_123456789',
-    merchant_reference: 'TRANS_123456',
-    amount: 100000,
-    currency: 'NGN',
-    customer: {
-        email: 'customer@example.com',
-        name: 'John Doe',
-        phone_number: '08123456789'
-    },
-    metadata: {
-        custom_field: 'custom_value'
-    },
-    // With Redirect URL to redirect to after payment
-    redirect_url: 'https://example.com/redirect', // URL 
-    // OR Alternatively, you can specify a callback function to handle payment response
-    onClose: function () {
-        console.log('Checkout closed');
-    },
-    callback: function (response) {
-        console.log('Payment successful:', response);
-    }
-
-});</pre>
+            <pre id="payload-preview"></pre>
         </div>
     </div>
 
@@ -149,31 +241,90 @@
     <script src="/checkout.js"></script>
 
     <script>
-        function openCheckout() {
-            PayintoCheckout({
+        const form = document.getElementById('checkout-form');
+        const errorBox = document.getElementById('form-error');
+        const payloadPreview = document.getElementById('payload-preview');
+
+        function setError(message) {
+            errorBox.textContent = message;
+            errorBox.style.display = message ? 'block' : 'none';
+        }
+
+        function getMetadata() {
+            const value = document.getElementById('metadata').value.trim();
+            if (!value) return {};
+
+            try {
+                return JSON.parse(value);
+            } catch {
+                throw new Error('Metadata must be valid JSON.');
+            }
+        }
+
+        function getCheckoutPayload() {
+            return {
                 mode: 'public_key',
-                public_key: 'pk_live_784683f25db04c05838ee730ce489e27e46e', // Example public key
-                merchant_reference: 'TRANS_123456',
-                amount: 100000,
-                currency: 'NGN',
+                public_key: document.getElementById('public-key').value.trim(),
+                merchant_reference: document.getElementById('merchant-reference').value.trim(),
+                amount: Number(document.getElementById('amount').value),
+                currency: document.getElementById('currency').value,
                 customer: {
-                    name: 'John Doe',
-                    email: 'john.doe@example.com',
-                    phone_number: '08123456789'
-                },
-                redirect_url: 'https://example.com/redirect',
-                metadata: {
-                    custom_field: 'custom_value'
+                    name: document.getElementById('customer-name').value.trim(),
+                    email: document.getElementById('customer-email').value.trim(),
+                    phone_number: document.getElementById('phone-number').value.trim()
                 },
+                redirect_url: document.getElementById('redirect-url').value.trim(),
+                metadata: getMetadata()
+            };
+        }
+
+        function updatePayloadPreview() {
+            try {
+                const payload = getCheckoutPayload();
+                payloadPreview.textContent = `PayintoCheckout(${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')});
+
+// callbacks are attached by the demo:
+// onClose, onError, callback`;
+            } catch {
+                payloadPreview.textContent = 'Metadata must be valid JSON to preview the payload.';
+            }
+        }
+
+        form.addEventListener('input', updatePayloadPreview);
+        updatePayloadPreview();
+
+        form.addEventListener('submit', function (event) {
+            event.preventDefault();
+            setError('');
+
+            let payload;
+            try {
+                payload = getCheckoutPayload();
+            } catch (error) {
+                setError(error.message);
+                return;
+            }
+
+            if (!Number.isFinite(payload.amount) || payload.amount <= 0) {
+                setError('Amount must be greater than zero.');
+                return;
+            }
+
+            PayintoCheckout({
+                ...payload,
                 onClose: function () {
                     console.log('Checkout closed');
                 },
+                onError: function (error) {
+                    console.error('Checkout error:', error);
+                    setError(error.message || 'Checkout failed to initialize.');
+                },
                 callback: function (response) {
                     console.log('Payment successful:', response);
                     // alert('Payment successful! ' + JSON.stringify(response));
                 }
             });
-        }
+        });
     </script>
 </body>
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@payinto/checkout-sdk",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
-  "description": "Payinto Checkout SDK for popup payments (token and public_key modes)",
+  "description": "Payinto Checkout SDK for popup payments",
   "main": "./dist/v1/checkout.es.js",
   "module": "./dist/v1/checkout.es.js",
   "types": "./dist/v1/types/checkout-sdk.d.ts",