@henrylabs-interview/payment-processor 0.1.8 → 0.1.10

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Checkout } from './resources/checkout';
 import { Webhooks } from './resources/webhooks';
-export default class HenryPaymentProcessorSDK {
+export declare class PaymentProcessorSDK {
     checkout: Checkout;
     webhooks: Webhooks;
     private VALID_API_KEYS;
@@ -8,3 +8,16 @@ export default class HenryPaymentProcessorSDK {
         apiKey: string;
     });
 }
+export declare class EmbeddedCheckoutUI {
+    private checkoutId;
+    constructor(config: {
+        checkoutId: string;
+    });
+    /**
+     * Renders the embedded checkout UI
+     * @param containerElementId - The ID of the container element where the checkout UI will be rendered
+     * @param callbackFn - Callback function to handle the payment token
+     * @returns - Whether the UI rendered successfully
+     */
+    render(containerElementId: string, callbackFn: (paymentToken: string) => void): boolean;
+}

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Checkout } from './resources/checkout';
+import { renderEmbeddedCheckout } from './resources/embedded';
 import { Webhooks } from './resources/webhooks';
-export default class HenryPaymentProcessorSDK {
+export class PaymentProcessorSDK {
     checkout;
     webhooks;
     VALID_API_KEYS = ['824c951e-dfac-4342-8e03', '3f67e17a-880a-463b-a667', '78254d40-623a-48c5-b83f'];
@@ -15,3 +16,21 @@ export default class HenryPaymentProcessorSDK {
         this.webhooks = new Webhooks();
     }
 }
+export class EmbeddedCheckoutUI {
+    checkoutId;
+    constructor(config) {
+        if (!config.checkoutId) {
+            throw new Error('Henry: checkoutId is required');
+        }
+        this.checkoutId = config.checkoutId;
+    }
+    /**
+     * Renders the embedded checkout UI
+     * @param containerElementId - The ID of the container element where the checkout UI will be rendered
+     * @param callbackFn - Callback function to handle the payment token
+     * @returns - Whether the UI rendered successfully
+     */
+    render(containerElementId, callbackFn) {
+        return renderEmbeddedCheckout(containerElementId, this.checkoutId, callbackFn);
+    }
+}

package/dist/resources/checkout.d.ts

@@ -64,6 +64,15 @@ interface CheckoutConfirmFailure extends CheckoutConfirmGeneric {
     status: 'failure';
     substatus: '500-error' | '502-fraud' | '503-retry';
 }
+export declare const INTERNAL_CHECKOUTS: Record<string, {
+    historyRecordId: number;
+}>;
+export declare const INTERNAL_CARDS: Record<string, {
+    number: string;
+    expMonth: number;
+    expYear: number;
+    cvc: string;
+}>;
 export declare class Checkout {
     /**
      * Create a new checkout session

package/dist/resources/checkout.js

@@ -1,11 +1,11 @@
-import { readHistory } from '../utils/store';
+import { readHistory, writeHistory } from '../utils/store';
 import { generateID, hashToNumber, signPayload } from '../utils/crypto';
 import { INTERNAL_WEBHOOKS } from './webhooks';
 import { sleep } from '../utils/async';
 // checkoutId -> { historyRecordId }
-const INTERNAL_CHECKOUTS = {};
+export const INTERNAL_CHECKOUTS = {};
 // paymentToken -> card details
-const INTERNAL_CARDS = {};
+export const INTERNAL_CARDS = {};
 export class Checkout {
     /**
      * Create a new checkout session
@@ -31,6 +31,13 @@ export class Checkout {
         // Phase 3: Webhook Scheduling
         // ---------------------------------------
         this.scheduleCreateWebhook(hashId, response);
+        // Add to history records
+        await writeHistory({
+            id: hashId,
+            amount: params.amount,
+            currency: params.currency,
+            customerId: params.customerId ?? null,
+        });
         // Simulate API latency
         await sleep(Math.random() * 2000);
         return response;
@@ -126,7 +133,7 @@ export class Checkout {
     }
     createCheckoutRecord(hashId) {
         const checkoutId = generateID();
-        INTERNAL_CHECKOUTS[checkoutId] = {
+        INTERNAL_CHECKOUTS[`${checkoutId}`] = {
             historyRecordId: hashId,
         };
         return checkoutId;
@@ -174,7 +181,7 @@ export class Checkout {
     }
     ///
     async validateConfirm(params) {
-        if (!INTERNAL_CHECKOUTS[params.checkoutId]) {
+        if (!INTERNAL_CHECKOUTS[`${params.checkoutId}`]) {
             return {
                 status: 'failure',
                 substatus: '500-error',
@@ -183,7 +190,7 @@ export class Checkout {
             };
         }
         if (params.type === 'embedded') {
-            const stored = INTERNAL_CARDS[params.data.paymentToken];
+            const stored = INTERNAL_CARDS[`${params.data.paymentToken}`];
             if (!stored) {
                 return {
                     status: 'failure',
@@ -223,6 +230,21 @@ export class Checkout {
         return null;
     }
     async processConfirmDecision(params) {
+        if (params.type === 'raw-card') {
+            // Add new card to internal storage
+            const cardDetails = {
+                number: params.data.number,
+                expMonth: params.data.expMonth,
+                expYear: params.data.expYear > 2000 ? params.data.expYear : params.data.expYear + 2000,
+                cvc: params.data.cvc,
+            };
+            const paymentToken = 'pmt_' +
+                hashToNumber(JSON.stringify({
+                    type: 'PAYMENT_TOKEN',
+                    ...cardDetails,
+                }));
+            INTERNAL_CARDS[`${paymentToken}`] = cardDetails;
+        }
         const decision = Math.random();
         if (decision > 0.85) {
             return {
@@ -251,7 +273,7 @@ export class Checkout {
         return this.buildInstantConfirmSuccess(params.checkoutId);
     }
     async buildInstantConfirmSuccess(checkoutId) {
-        const { historyRecordId } = INTERNAL_CHECKOUTS[checkoutId] ?? {};
+        const { historyRecordId } = INTERNAL_CHECKOUTS[`${checkoutId}`] ?? {};
         if (!historyRecordId) {
             return {
                 status: 'failure',
@@ -403,7 +425,7 @@ export class Checkout {
                 'Content-Type': 'application/json',
             };
             if (hook.secret) {
-                headers['webhook-signature'] = signPayload(payload, hook.secret);
+                headers['x-henry-signature'] = signPayload(payload, hook.secret);
             }
             await fetch(hook.url, {
                 method: 'POST',

package/dist/resources/embedded.d.ts

@@ -0,0 +1 @@
+export declare function renderEmbeddedCheckout(containerElementId: string, checkoutId: string, callbackFn: (paymentToken: string) => void): boolean;

package/dist/resources/embedded.js

@@ -0,0 +1,165 @@
+import { hashToNumber } from '../utils/crypto';
+import { INTERNAL_CARDS, INTERNAL_CHECKOUTS } from './checkout';
+export function renderEmbeddedCheckout(containerElementId, checkoutId, callbackFn) {
+    // Ensure browser environment
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        console.warn('EmbeddedCheckoutUI can only be used in a browser environment.');
+        return false;
+    }
+    const { historyRecordId } = INTERNAL_CHECKOUTS[`${checkoutId}`] ?? {};
+    if (!historyRecordId) {
+        console.warn(`Invalid checkout ID: "${checkoutId}".`);
+        return false;
+    }
+    const container = document.getElementById(containerElementId);
+    if (!container) {
+        console.warn(`Container element "${containerElementId}" not found.`);
+        return false;
+    }
+    container.innerHTML = `
+  <div style="
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+    padding: 24px;
+    max-width: 360px;
+    width: 100%;
+    box-sizing: border-box;
+  ">
+    <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"
+          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>
+
+      <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="number" placeholder="12" min="1" max="12"
+            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>
+
+        <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="number" placeholder="2030"
+            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>
+
+      </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"
+          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>
+
+      <button id="confirm-btn"
+        style="
+          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;
+          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;
+      ">
+        🔒 Payments are securely processed
+      </p>
+
+    </div>
+  </div>
+`;
+    const button = container.querySelector('#confirm-btn');
+    button?.addEventListener('click', () => {
+        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,
+        };
+        const paymentToken = 'pmt_' +
+            hashToNumber(JSON.stringify({
+                type: 'PAYMENT_TOKEN',
+                ...cardDetails,
+            }));
+        INTERNAL_CARDS[`${paymentToken}`] = cardDetails;
+        callbackFn(paymentToken);
+    });
+    return true;
+}

package/dist/utils/store.d.ts

@@ -5,7 +5,6 @@ export type HistoryRecord = {
     customerId: string | null;
     updatedAt: number;
     createdAt: number;
-    confirmed: boolean;
 };
 /**
  * Reads all history records from the JSON store.
@@ -14,4 +13,4 @@ export declare function readHistory(): Promise<HistoryRecord[]>;
 /**
  * Writes a new record to the JSON store.
  */
-export declare function writeHistory(params: Omit<HistoryRecord, 'updatedAt'>): Promise<HistoryRecord>;
+export declare function writeHistory(params: Omit<HistoryRecord, 'createdAt' | 'updatedAt'>): Promise<HistoryRecord>;

package/dist/utils/store.js

@@ -22,11 +22,28 @@ export async function readHistory() {
  */
 export async function writeHistory(params) {
     const history = await readHistory();
-    const newRecord = {
-        updatedAt: new Date().getTime(),
-        ...params,
-    };
-    history.push(newRecord);
+    const now = Date.now();
+    const existingIndex = history.findIndex((v) => v.id === params.id);
+    let record;
+    if (existingIndex !== -1) {
+        // Replace existing record
+        record = {
+            ...history[existingIndex],
+            ...params,
+            createdAt: history[existingIndex]?.createdAt ?? now,
+            updatedAt: now,
+        };
+        history[existingIndex] = record;
+    }
+    else {
+        // Add new record
+        record = {
+            ...params,
+            createdAt: now,
+            updatedAt: now,
+        };
+        history.push(record);
+    }
     await Bun.write(path, JSON.stringify(history, null, 2));
-    return newRecord;
+    return record;
 }

package/package.json

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