@henrylabs-interview/payment-processor 0.2.6 → 0.2.8

package/dist/resources/checkout.d.ts

@@ -92,8 +92,6 @@ export declare class Checkout {
     private processConfirmDecision;
     private buildInstantConfirmSuccess;
     private scheduleConfirmWebhook;
-    private isValidCardNumber;
-    private isValidExpiry;
     private determineResponseCase;
     private sendWebhookResponse;
 }

package/dist/resources/checkout.js

@@ -2,6 +2,7 @@ import { readHistory, writeHistory } from '../utils/store';
 import { generateTimeBasedID, hashToString, signPayload } from '../utils/crypto';
 import { INTERNAL_WEBHOOKS } from './webhooks';
 import { sleep } from '../utils/async';
+import { isValidCardNumber, isValidExpiry } from '../utils/card';
 // checkoutId -> { historyRecordId }
 const INTERNAL_CHECKOUTS = {};
 export class Checkout {
@@ -218,7 +219,7 @@ export class Checkout {
         }
         if (params.type === 'raw-card') {
             const { number, expMonth, expYear, cvc } = params.data;
-            if (!this.isValidCardNumber(number)) {
+            if (!isValidCardNumber(number)) {
                 return {
                     status: 'failure',
                     substatus: '502-fraud',
@@ -226,7 +227,7 @@ export class Checkout {
                     message: 'Invalid card number',
                 };
             }
-            if (!this.isValidExpiry(expMonth, expYear)) {
+            if (!isValidExpiry(expMonth, expYear)) {
                 return {
                     status: 'failure',
                     substatus: '503-retry',
@@ -337,35 +338,6 @@ export class Checkout {
         }, webhookDelay);
     }
     //
-    isValidCardNumber(number) {
-        // Test card is valid
-        if (number === '4242424242424242')
-            return true;
-        // Cards must be 13-19 digits
-        if (!/^\d{13,19}$/.test(number))
-            return false;
-        // Luhn check
-        let sum = 0;
-        let shouldDouble = false;
-        for (let i = number.length - 1; i >= 0; i--) {
-            let digit = parseInt(number[i] ?? '');
-            if (shouldDouble) {
-                digit *= 2;
-                if (digit > 9)
-                    digit -= 9;
-            }
-            sum += digit;
-            shouldDouble = !shouldDouble;
-        }
-        return sum % 10 === 0;
-    }
-    isValidExpiry(month, year) {
-        if (month < 1 || month > 12)
-            return false;
-        const now = new Date();
-        const expiry = new Date(year, month - 1);
-        return expiry > now;
-    }
     determineResponseCase(amount, sameRecords) {
         // --- Base probabilities ---
         let immediateWeight = 65;

package/dist/resources/embedded.js

@@ -1,11 +1,13 @@
+import { isValidCardNumber, isValidExpiry } from '../utils/card';
 import { generateTimeBasedID } from '../utils/crypto';
 export async function renderEmbeddedCheckout(containerElementId, checkoutId, callbackFn) {
-    // Ensure browser environment
+    // --- Environment Guard ---
     if (typeof window === 'undefined' || typeof document === 'undefined') {
         console.warn('EmbeddedCheckoutUI can only be used in a browser environment.');
         return false;
     }
-    if (checkoutId.toString().length !== 20 || !checkoutId.startsWith('cki_')) {
+    // --- Checkout Validation ---
+    if (checkoutId.length !== 20 || !checkoutId.startsWith('cki_')) {
         console.warn(`Invalid checkout ID: "${checkoutId}".`);
         return false;
     }
@@ -18,6 +20,7 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
         console.warn(`Container element "${containerElementId}" not found.`);
         return false;
     }
+    // --- Render UI ---
     container.innerHTML = `
   <div style="
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -25,161 +28,147 @@ export async function renderEmbeddedCheckout(containerElementId, checkoutId, cal
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
     padding: 24px;
-    max-width: 360px;
+    max-width: 400px;
     width: 100%;
     box-sizing: border-box;
   ">
-    <h3 style="
-      margin: 0 0 20px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: #111827;
-    ">
+    <h3 style="margin:0 0 20px 0; font-size:18px; font-weight:600; color:#111827;">
       "Secure" Checkout
     </h3>
 
     <div style="display:flex; flex-direction:column; gap:14px;">
 
-      <div style="display:flex; flex-direction:column;">
-        <label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
-          Card Number
-        </label>
-        <input
-		  id="card-number"
-		  type="text"
-		  placeholder="4242 4242 4242 4242"
-          maxlength="16"
-          inputmode="numeric"
-          pattern="[0-9]*"
-          style="
-            padding: 10px 12px;
-            border-radius: 10px;
-            border: 1px solid #e5e7eb;
-            font-size: 14px;
-            outline: none;
-            transition: border 0.2s, box-shadow 0.2s;
-          "
-        />
-      </div>
-
+      ${inputBlock('card-number', 'Card Number', '4242 4242 4242 4242')}
       <div style="display:flex; gap:10px;">
-
-        <div style="flex:1; display:flex; flex-direction:column;">
-          <label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
-            Exp. Month
-          </label>
-          <input
-		    id="exp-month"
-			type="text"
-			placeholder="12"
-			min="1"
-			max="12"
-            maxlength="2"
-            inputmode="numeric"
-            pattern="[0-9]*"
-            style="
-              padding: 10px 12px;
-              border-radius: 10px;
-              border: 1px solid #e5e7eb;
-              font-size: 14px;
-              outline: none;
-              transition: border 0.2s, box-shadow 0.2s;
-            "
-          />
+        <div style="flex:1;">
+          ${inputBlock('exp-month', 'Exp. Month', '12')}
         </div>
-
-        <div style="flex:1; display:flex; flex-direction:column;">
-          <label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
-            Exp. Year
-          </label>
-          <input
-		    id="exp-year"
-			type="text"
-			placeholder="2030"
-			maxlength="4"
-			inputmode="numeric"
-			pattern="[0-9]*"
-            style="
-              padding: 10px 12px;
-              border-radius: 10px;
-              border: 1px solid #e5e7eb;
-              font-size: 14px;
-              outline: none;
-              transition: border 0.2s, box-shadow 0.2s;
-            "
-          />
+        <div style="flex:1;">
+          ${inputBlock('exp-year', 'Exp. Year', '2030')}
         </div>
-
-      </div>
-
-      <div style="display:flex; flex-direction:column;">
-        <label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
-          CVC
-        </label>
-        <input id="cvc"
-		  type="text"
-		  placeholder="123"
-		  maxlength="4"
-		  inputmode="numeric"
-		  pattern="[0-9]*"
-          style="
-            padding: 10px 12px;
-            border-radius: 10px;
-            border: 1px solid #e5e7eb;
-            font-size: 14px;
-            outline: none;
-            transition: border 0.2s, box-shadow 0.2s;
-          "
-        />
       </div>
+      ${inputBlock('cvc', 'CVC', '123')}
 
       <button id="confirm-btn"
         style="
-          margin-top: 8px;
-          padding: 12px;
-          border-radius: 12px;
-          border: none;
-          font-size: 14px;
-          font-weight: 600;
+          margin-top:8px;
+          padding:12px;
+          border-radius:12px;
+          border:none;
+          font-size:14px;
+          font-weight:600;
           background: linear-gradient(135deg, #6366f1, #4f46e5);
-          color: white;
-          cursor: pointer;
-          transition: transform 0.05s ease, box-shadow 0.2s ease;
+          color:white;
+          cursor:pointer;
+          transition: all 0.15s ease;
           box-shadow: 0 4px 14px rgba(79,70,229,0.3);
-        "
-        onmouseover="this.style.boxShadow='0 6px 18px rgba(79,70,229,0.4)'"
-        onmouseout="this.style.boxShadow='0 4px 14px rgba(79,70,229,0.3)'"
-        onmousedown="this.style.transform='scale(0.98)'"
-        onmouseup="this.style.transform='scale(1)'"
-      >
+        ">
         Confirm Payment
       </button>
 
-      <p style="
-        font-size: 11px;
-        color: #9ca3af;
-        text-align: center;
-        margin-top: 8px;
-      ">
+      <p style="font-size:11px; color:#9ca3af; text-align:center; margin-top:8px;">
         🔒 Payments are securely processed
       </p>
 
     </div>
   </div>
-`;
+  `;
+    function inputBlock(id, label, placeholder) {
+        return `
+      <div style="display:flex; flex-direction:column;">
+        <label style="font-size:12px; color:#6b7280; margin-bottom:6px;">
+          ${label}
+        </label>
+        <input
+          id="${id}"
+          type="tel"
+          placeholder="${placeholder}"
+          inputmode="numeric"
+          style="
+            padding:10px 12px;
+            border-radius:10px;
+            border:1px solid #e5e7eb;
+            font-size:14px;
+            outline:none;
+            transition:border 0.2s, box-shadow 0.2s;
+          "
+        />
+        <div id="${id}-error"
+          style="font-size:12px; color:#ef4444; margin-top:4px; display:none;">
+        </div>
+      </div>
+    `;
+    }
+    // --- DOM Refs ---
+    const cardNumberInput = container.querySelector('#card-number');
+    const expMonthInput = container.querySelector('#exp-month');
+    const expYearInput = container.querySelector('#exp-year');
+    const cvcInput = container.querySelector('#cvc');
     const button = container.querySelector('#confirm-btn');
-    button?.addEventListener('click', async () => {
-        const number = (container.querySelector('#card-number')?.value ?? '').replace(/\s+/g, '');
-        const expMonth = Number(container.querySelector('#exp-month')?.value);
-        const expYear = Number(container.querySelector('#exp-year')?.value);
-        const cvc = container.querySelector('#cvc')?.value ?? '';
-        // Add new card to internal storage
-        // const cardDetails = {
-        // 	number: number,
-        // 	expMonth: expMonth,
-        // 	expYear: expYear > 2000 ? expYear : expYear + 2000,
-        // 	cvc: cvc,
-        // };
+    // --- Helpers ---
+    function showError(input, message) {
+        input.style.border = '1px solid #ef4444';
+        const error = container?.querySelector(`#${input.id}-error`);
+        if (error) {
+            error.textContent = message;
+            error.style.display = 'block';
+        }
+    }
+    function clearError(input) {
+        input.style.border = '1px solid #e5e7eb';
+        const error = container?.querySelector(`#${input.id}-error`);
+        if (error) {
+            error.textContent = '';
+            error.style.display = 'none';
+        }
+    }
+    function setLoading(state) {
+        button.disabled = state;
+        button.style.opacity = state ? '0.6' : '1';
+        button.textContent = state ? 'Processing...' : 'Confirm Payment';
+    }
+    function clearAllErrors() {
+        [cardNumberInput, expMonthInput, expYearInput, cvcInput].forEach(clearError);
+    }
+    // --- Formatting ---
+    cardNumberInput.addEventListener('input', () => {
+        let value = cardNumberInput.value.replace(/\D/g, '').slice(0, 16);
+        value = value.replace(/(.{4})/g, '$1 ').trim();
+        cardNumberInput.value = value;
+        clearError(cardNumberInput);
+    });
+    [expMonthInput, expYearInput, cvcInput].forEach((input) => input.addEventListener('input', () => clearError(input)));
+    // --- Submit ---
+    button.addEventListener('click', async () => {
+        clearAllErrors();
+        const number = cardNumberInput.value.replace(/\s+/g, '');
+        const expMonth = Number(expMonthInput.value);
+        const expYear = Number(expYearInput.value);
+        const cvc = cvcInput.value;
+        let hasError = false;
+        if (!number) {
+            showError(cardNumberInput, 'Card number required');
+            hasError = true;
+        }
+        else if (!isValidCardNumber(number)) {
+            showError(cardNumberInput, 'Invalid card number');
+            hasError = true;
+        }
+        if (!expMonthInput.value || expMonth < 1 || expMonth > 12) {
+            showError(expMonthInput, 'Invalid month');
+            hasError = true;
+        }
+        if (!expYearInput.value || !isValidExpiry(expMonth, expYear)) {
+            showError(expYearInput, 'Card expired');
+            hasError = true;
+        }
+        if (!cvc || !/^\d{3,4}$/.test(cvc)) {
+            showError(cvcInput, 'Invalid CVC');
+            hasError = true;
+        }
+        if (hasError)
+            return;
+        setLoading(true);
         const paymentToken = `pmt_${await generateTimeBasedID('payment-token')}`;
         callbackFn(paymentToken);
     });

package/dist/utils/card.d.ts

@@ -0,0 +1,2 @@
+export declare function isValidCardNumber(number: string): boolean;
+export declare function isValidExpiry(month: number, year: number): boolean;

package/dist/utils/card.js

@@ -0,0 +1,29 @@
+export function isValidCardNumber(number) {
+    // Test card is valid
+    if (number === '4242424242424242')
+        return true;
+    // Cards must be 13-19 digits
+    if (!/^\d{13,19}$/.test(number))
+        return false;
+    // Luhn check
+    let sum = 0;
+    let shouldDouble = false;
+    for (let i = number.length - 1; i >= 0; i--) {
+        let digit = parseInt(number[i] ?? '');
+        if (shouldDouble) {
+            digit *= 2;
+            if (digit > 9)
+                digit -= 9;
+        }
+        sum += digit;
+        shouldDouble = !shouldDouble;
+    }
+    return sum % 10 === 0;
+}
+export function isValidExpiry(month, year) {
+    if (month < 1 || month > 12)
+        return false;
+    const now = new Date();
+    const expiry = new Date(year, month - 1);
+    return expiry > now;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@henrylabs-interview/payment-processor",
-	"version": "0.2.6",
+	"version": "0.2.8",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",