@payinto/checkout-sdk 1.0.0

package/README.md

@@ -0,0 +1,100 @@
+# @payinto/checkout-sdk
+
+The official Payinto Checkout SDK for web applications. Securely accept payments using the Payinto popup checkout.
+
+## Installation
+
+### npm
+```bash
+npm install @payinto/checkout-sdk
+```
+
+### CDN
+```html
+<script src="https://checkout.payinto.co/v1/checkout.js"></script>
+```
+
+## Quick Start
+
+### Modern Web App (npm)
+
+```ts
+import PayintoCheckout from '@payinto/checkout-sdk';
+
+const handlePayment = () => {
+  PayintoCheckout.open({
+    mode: 'public_key',
+    public_key: 'pk_live_your_public_key',
+    amount: 10000, // Amount in minor units (e.g., 10000 = 100.00)
+    currency: 'NGN',
+    customer: {
+      email: 'customer@example.com',
+      name: 'John Doe'
+    },
+    onSuccess: (response) => {
+      console.log('Payment successful:', response);
+    },
+    onClose: () => {
+      console.log('Checkout closed');
+    },
+    onError: (error) => {
+      console.error('Payment failed:', error);
+    }
+  });
+};
+```
+
+### Script Tag (CDN)
+
+```javascript
+window.PayintoCheckout.open({
+  mode: 'public_key',
+  public_key: 'pk_live_your_public_key',
+  // ...other options
+});
+```
+
+## Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `mode` | `string` | Yes | Use `'public_key'` for merchant integrations. |
+| `public_key` | `string` | Yes | Your Payinto public key. |
+| `amount` | `number` | Yes | The transaction amount in minor units. |
+| `currency` | `string` | No | Currency code (default: `'NGN'`). |
+| `customer` | `object` | Yes | Customer details (`email` is required). |
+| `reference` | `string` | No | Unique transaction reference. |
+| `metadata` | `object` | No | Additional data for the transaction. |
+| `redirect_url`| `string` | No | URL to redirect to after successful payment. |
+| `onSuccess` | `function`| No | Callback on successful payment. |
+| `onClose` | `function`| No | Callback when the checkout is closed. |
+| `onError` | `function`| No | Callback on error. |
+
+## Event Payloads
+
+### Success
+```ts
+{
+  type: 'checkout.success',
+  status: 'success',
+  reference: string,
+  token: string
+}
+```
+
+### Error
+```ts
+{
+  type: 'checkout.error',
+  code: string,
+  message: string
+}
+```
+
+## Security
+- The SDK validates message origins against an internal allowlist.
+- It uses a secure iframe to isolate the payment process.
+- **Never** expose your Secret Keys in client-side code.
+
+## License
+MIT

package/dist/v1/checkout.es.js

@@ -0,0 +1 @@
+const e="undefined"!=typeof window,t=e?"https://checkout.payinto.co":"",o="/v1".replace(/\/+$/,""),i=`${t}${o}/popup`,n="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),r=e?new URL(i).origin:"",s=/* @__PURE__ */new Set([r,...n]),c=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 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 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,reference:e.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={reference:e.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 i=await o.json(),n=i.data||(i.token&&i.checkout_url?{token:i.token,checkout_url:i.checkout_url,reference:i.reference,checkout_version:i.checkout_version}:void 0);if(!n?.token||!n?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:n.token,checkout_url:n.checkout_url,reference:n.reference,checkout_version:n.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),i=c(e),n=new URL(i).origin,r=new URL(e.checkout_url).origin,a=Array.from(/* @__PURE__ */new Set([n,r]));if(!s.has(n)&&n!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${i}?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,reference:e.reference,checkout_url:e.checkout_url};for(const e of a)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let i=0;this.initRetryTimer=window.setInterval(()=>{i+=1,i>=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)}},l={open:e=>a.open(e),pay:e=>a.pay(e),close:()=>a.close()},u=e=>{a.open(e)};u.open=e=>a.open(e),u.pay=e=>a.pay(e),u.close=()=>a.close(),e&&(window.PayintoCheckout=u);export{l as PayintoCheckoutApi,l as default};

package/dist/v1/checkout.js

@@ -0,0 +1 @@
+var PayintoCheckout=function(e){"use strict";const t="undefined"!=typeof window,o=t?"https://checkout.payinto.co":"",i="/v1".replace(/\/+$/,""),n=`${o}${i}/popup`,r="https://checkout.payinto.co,https://go.payinto.co".split(",").map(e=>e.trim()).filter(Boolean),s=t?new URL(n).origin:"",c=new Set([s,...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 n}};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 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,reference:e.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={reference:e.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 i=await o.json(),n=i.data||(i.token&&i.checkout_url?{token:i.token,checkout_url:i.checkout_url,reference:i.reference,checkout_version:i.checkout_version}:void 0);if(!n?.token||!n?.checkout_url)throw new Error("Payinto Checkout: invalid initialize response.");return{token:n.token,checkout_url:n.checkout_url,reference:n.reference,checkout_version:n.checkout_version}}initializeIframe(e){if(!this.iframe||!this.container)return;const t=this.container.querySelector("#payinto-checkout-subtitle"),o=this.container.querySelector(".payinto-preloader"),i=a(e),n=new URL(i).origin,r=new URL(e.checkout_url).origin,s=Array.from(new Set([n,r]));if(!c.has(n)&&n!==new URL(e.checkout_url).origin)throw new Error("Payinto Checkout: target origin is not in allowlist.");this.iframe.src=`${i}?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,reference:e.reference,checkout_url:e.checkout_url};for(const e of s)this.iframe?.contentWindow?.postMessage(t,e)};t(),this.clearInitRetry();let i=0;this.initRetryTimer=window.setInterval(()=>{i+=1,i>=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)}},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

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Payinto Checkout Demo</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .demo-container {
+            background: white;
+            border-radius: 16px;
+            padding: 40px;
+            max-width: 500px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        }
+
+        h1 {
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            color: #1a202c;
+        }
+
+        p {
+            color: #718096;
+            margin-bottom: 32px;
+            font-size: 14px;
+        }
+
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        button {
+            background: #1a202c;
+            color: white;
+            border: none;
+            padding: 14px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        button:hover {
+            background: #2d3748;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        .code-block {
+            background: #f7fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 16px;
+            margin-top: 32px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 12px;
+            color: #2d3748;
+            overflow-x: auto;
+        }
+
+        .code-block pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        .badge {
+            display: inline-block;
+            background: #48bb78;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: 700;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <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>
+
+        <div class="button-group">
+            <button onclick="openCheckout()">
+                Pay NGN 10,000
+            </button>
+        </div>
+
+        <div class="code-block">
+            <pre>PayintoCheckout({
+    mode: 'public_key',
+    public_key: 'pk_test_123456789',
+    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>
+        </div>
+    </div>
+
+    <!-- Payinto Checkout SDK -->
+    <script src="/checkout.js"></script>
+
+    <script>
+        function openCheckout() {
+            PayintoCheckout({
+                mode: 'public_key',
+                public_key: 'pk_live_784683f25db04c05838ee730ce489e27e46e', // Example public key
+                reference: 'TRANS_123456',
+                amount: 100000,
+                currency: 'NGN',
+                customer: {
+                    name: 'John Doe',
+                    email: 'john.doe@example.com',
+                    phone_number: '08123456789'
+                },
+                redirect_url: 'https://example.com/redirect',
+                metadata: {
+                    custom_field: 'custom_value'
+                },
+                onClose: function () {
+                    console.log('Checkout closed');
+                },
+                callback: function (response) {
+                    console.log('Payment successful:', response);
+                    // alert('Payment successful! ' + JSON.stringify(response));
+                }
+            });
+        }
+    </script>
+</body>
+
+</html>

package/dist/v1/example-1.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Payinto Checkout Demo</title>
+</head>
+
+<body>
+    <h1>Checkout Demo</h1>
+    <button onclick="makePayment()">Click Me!</button>
+
+    <script src="https://checkout.payinto.co/v1/checkout.js"></script>
+    <script type="text/javascript">
+        function makePayment() {
+            PayintoCheckout({
+                mode: 'public_key',
+                public_key: 'pk_live_xxxxxxxxxxxxxxxxxxx', // Example public key
+                reference: '12345678-1234-1234-1234-123456789012',
+                amount: 100000, // Amount in the smallest currency unit (e.g. kobo, cents)
+                currency: 'NGN',
+                customer: {
+                    name: 'John Doe',
+                    email: 'john.doe@example.com',
+                    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);
+                }
+            });
+        }
+    </script>
+</body>
+
+</html>

package/dist/v1/types/checkout-sdk.d.ts

@@ -0,0 +1,56 @@
+export type CheckoutSuccessPayload = {
+    type: 'checkout.success';
+    reference?: string;
+    token?: string;
+    status: 'success';
+};
+export type CheckoutErrorPayload = {
+    type: 'checkout.error';
+    code: string;
+    message: string;
+};
+type CheckoutCallbacks = {
+    onClose?: () => void;
+    onSuccess?: (payload: CheckoutSuccessPayload) => void;
+    onError?: (payload: CheckoutErrorPayload) => void;
+    callback?: (payload: string | CheckoutSuccessPayload) => void;
+};
+type TokenModeOptions = CheckoutCallbacks & {
+    mode: 'token';
+    token: string;
+    checkout_url: string;
+    reference?: string;
+    checkout_version?: string;
+};
+type PublicKeyModeOptions = CheckoutCallbacks & {
+    mode: 'public_key';
+    public_key: string;
+    reference?: string;
+    amount: number;
+    currency?: string;
+    customer: {
+        email: string;
+        name?: string;
+        phone_number?: string;
+    };
+    redirect_url?: string;
+    metadata?: Record<string, unknown>;
+    checkout_version?: string;
+};
+export type CheckoutOpenOptions = TokenModeOptions | PublicKeyModeOptions;
+type CheckoutGlobalCallable = ((options: CheckoutOpenOptions) => void) & {
+    open: (options: CheckoutOpenOptions) => void;
+    pay: (options: CheckoutOpenOptions) => void;
+    close: () => void;
+};
+export declare const PayintoCheckoutApi: {
+    open: (options: CheckoutOpenOptions) => void;
+    pay: (options: CheckoutOpenOptions) => void;
+    close: () => void;
+};
+declare global {
+    interface Window {
+        PayintoCheckout: CheckoutGlobalCallable;
+    }
+}
+export default PayintoCheckoutApi;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@payinto/checkout-sdk",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Payinto Checkout SDK for popup payments (token and public_key modes)",
+  "main": "./dist/v1/checkout.es.js",
+  "module": "./dist/v1/checkout.es.js",
+  "types": "./dist/v1/types/checkout-sdk.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/v1/checkout.es.js",
+      "types": "./dist/v1/types/checkout-sdk.d.ts"
+    }
+  },
+  "files": [
+    "dist/v1",
+    "README.md"
+  ],
+  "author": "Payinto <hello@payinto.co>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "prepublishOnly": "npm run build:v1:sdk",
+    "build": "npm run build:v1:all",
+    "build:v1:sdk": "vite build --config vite.v1.sdk.config.ts && npm run build:v1:sdk:types && npm run copy:sdk",
+    "build:v1:sdk:types": "tsc -p tsconfig.sdk.json",
+    "build:v1:app": "tsc -b && vite build --config vite.v1.app.config.ts",
+    "build:v1:all": "npm run build:v1:sdk && npm run build:v1:app",
+    "build:sdk": "npm run build:v1:sdk",
+    "build:app": "npm run build:v1:app",
+    "build:all": "npm run build:v1:all",
+    "copy:sdk": "cp dist/v1/checkout.js public/checkout.js",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "payinto",
+    "checkout",
+    "payments",
+    "sdk"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.10.1",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "terser": "^5.44.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}