node-paytmpg 6.4.6 → 7.0.1

package/dist/app/controllers/static/loadingsvg.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSVG = void 0;
+exports.LoadingSVG = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(30 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(60 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(90 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(120 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(150 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(180 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(210 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(240 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(270 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(300 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+</rect>
+</g><g transform="rotate(330 50 50)">
+<rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#0097a7">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+</rect>
+</g>
+</svg>`;

package/dist/app/controllers/user.controller.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NPUserController = void 0;
+const utils_1 = require("../utils/utils");
+class NPUserController {
+    constructor(db, tableName = 'npusers') {
+        this.db = db;
+        this.tableName = tableName;
+    }
+    async init() {
+        const sample = {
+            id: "user_aB3dE9xY1Z",
+            name: "tset",
+            email: "testgmailcom",
+            phone: "12345678",
+        };
+        this.db.create(this.tableName, sample);
+    }
+    async create(userData) {
+        try {
+            let user = await this.db.getOne(this.tableName, { email: userData.email });
+            if (user) {
+                const myquery = { email: userData.email };
+                const objForUpdate = Object.assign({}, user);
+                if (userData.email && userData.email.indexOf("@") !== -1)
+                    objForUpdate.email = userData.email;
+                if (userData.phone && userData.phone.length > 2)
+                    objForUpdate.phone = userData.phone;
+                if (userData.name && userData.name.length > 2)
+                    objForUpdate.name = userData.name;
+                const newvalues = { $set: objForUpdate };
+                try {
+                    await this.db.update(this.tableName, myquery, newvalues);
+                    return objForUpdate;
+                }
+                catch (uErr) {
+                    throw new Error(uErr.message || 'Some error occurred while updating users.');
+                }
+            }
+            else {
+                userData.id = "user_" + utils_1.Utils.makeid();
+                await this.db.insert(this.tableName, userData);
+                return userData;
+            }
+        }
+        catch (err) {
+            throw new Error(err.message || 'Some error occurred while creating users.');
+        }
+    }
+    ;
+}
+exports.NPUserController = NPUserController;
+;

package/dist/app/models/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/app/routes/payment_route.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const body_parser_1 = __importDefault(require("body-parser"));
+const express_handlebars_1 = __importDefault(require("express-handlebars"));
+const path_1 = __importDefault(require("path"));
+const payment_controller_1 = require("../controllers/payment.controller");
+const paymentRoute = function (app, express, callbacks) {
+    const config = app.get('np_config');
+    const pc = new payment_controller_1.PaymentController(app, callbacks);
+    const router = express.Router();
+    app.set('view_path', __dirname + config.view_path);
+    const vp = app.get('view_path');
+    console.log('PaytmPG : Using MultiDB ORM');
+    app.engine('hbs', (0, express_handlebars_1.default)({
+        extname: 'hbs',
+        defaultLayout: vp + '/layouts/index.hbs',
+        helpers: {
+            theme_color: function () {
+                return config.theme_color;
+            },
+            logo: function () {
+                return config.logo;
+            }
+        }
+    }));
+    app.set('view engine', 'handlebars');
+    let saveRawBody = function (req, res, buf, encoding) {
+        req.rawBody = buf.toString();
+    };
+    app.use(body_parser_1.default.urlencoded({ extended: true }));
+    app.use(body_parser_1.default.json({ verify: saveRawBody }));
+    app.use('/' + config.path_prefix, express.static(path_1.default.join(__dirname, '../../public')));
+    app.use('/' + config.path_prefix, router);
+    router.all('/', pc.init);
+    router.all('/init', pc.init);
+    router.all('/callback', pc.callback);
+    router.all('/api/webhook', pc.webhook);
+    router.all('/api/status', pc.status);
+    router.all('/api/createTxn/token', pc.createTxnToken);
+    router.all('/api/createTxn', pc.createTxn);
+    return router;
+};
+exports.default = paymentRoute;

package/dist/app/utils/buildConfig.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildConfig = buildConfig;
+const defaults = {
+    // Server configuration
+    host_url: 'http://localhost:3000',
+    path_prefix: '_pay',
+    homepage: '/',
+    // Template configuration
+    templateDir: null, // null = use built-in views, or provide path to custom templates
+    templateEngine: 'handlebars',
+    // UI Customization
+    theme_color: '#3399cc',
+    logo: '/favicon.ico',
+    // Transaction ID configuration
+    id_length: 10,
+    // Database
+    db_url: null, // MongoDB URL (legacy), leave null to use multidborm
+    // Payment Gateway URLs
+    // paytm_url: null,        // e.g., 'https://securegw-stage.paytm.in' for test, 'https://securegw.paytm.in' for production
+    // razor_url: null,        // e.g., 'https://api.razorpay.com/v1/'
+    // payu_url: null,         // e.g., 'https://test.payu.in' for test, 'https://secure.payu.in' for production
+    // open_money_url: null,   // e.g., 'https://sandbox-icp-api.bankopen.co/api' for sandbox, 'https://icp-api.bankopen.co/api' for live
+    // Gateway Credentials (must be provided by user)
+    // MID: null,
+    // WEBSITE: null,
+    // KEY: null,
+    // SECRET: null,
+    // CHANNEL_ID: 'WEB',
+    // INDUSTRY_TYPE_ID: 'Retail',
+    // Payment mode configuration (optional)
+    // mode: null  // JSON string of enabled payment modes for Paytm
+};
+function pickEnv(keys) {
+    const output = {};
+    keys.forEach((key) => {
+        if (process.env[key] !== undefined) {
+            output[key] = process.env[key];
+        }
+    });
+    return output;
+}
+/**
+ * Validates and merges config with defaults
+ * @param {Object} userConfig - User-provided configuration
+ * @returns {Object} Merged and validated configuration
+ * @throws {Error} If required fields are missing
+ */
+function validateConfig(userConfig) {
+    if (!userConfig || typeof userConfig !== 'object') {
+        throw new Error('Config must be an object');
+    }
+    // Merge with defaults
+    const config = { ...defaults, ...userConfig };
+    // Detect which payment gateway is being used
+    const hasPaytm = !!config.paytm_url;
+    const hasRazorpay = !!config.razor_url;
+    const hasPayU = !!config.payu_url;
+    const hasOpenMoney = !!config.open_money_url;
+    if (!hasPaytm && !hasRazorpay && !hasPayU && !hasOpenMoney) {
+        throw new Error('At least one payment gateway must be configured. ' +
+            'Please provide one of: paytm_url, razor_url, payu_url, or open_money_url');
+    }
+    // Validate required credentials based on gateway
+    if (hasPaytm) {
+        validatePaytmConfig(config);
+    }
+    if (hasRazorpay) {
+        validateRazorpayConfig(config);
+    }
+    if (hasPayU) {
+        validatePayUConfig(config);
+    }
+    if (hasOpenMoney) {
+        validateOpenMoneyConfig(config);
+    }
+    // Validate common fields
+    if (!config.host_url) {
+        throw new Error('host_url is required');
+    }
+    if (!config.path_prefix) {
+        throw new Error('path_prefix is required');
+    }
+    return config;
+}
+function validatePaytmConfig(config) {
+    const required = ['MID', 'WEBSITE', 'KEY', 'CHANNEL_ID', 'INDUSTRY_TYPE_ID'];
+    const missing = required.filter(field => !config[field]);
+    if (missing.length > 0) {
+        throw new Error(`Paytm configuration incomplete. Missing fields: ${missing.join(', ')}`);
+    }
+}
+function validateRazorpayConfig(config) {
+    const required = ['KEY', 'SECRET'];
+    const missing = required.filter(field => !config[field]);
+    if (missing.length > 0) {
+        throw new Error(`Razorpay configuration incomplete. Missing fields: ${missing.join(', ')}`);
+    }
+}
+function validatePayUConfig(config) {
+    const required = ['KEY', 'SECRET'];
+    const missing = required.filter(field => !config[field]);
+    if (missing.length > 0) {
+        throw new Error(`PayU configuration incomplete. Missing fields: ${missing.join(', ')}`);
+    }
+}
+function validateOpenMoneyConfig(config) {
+    const required = ['KEY', 'SECRET'];
+    const missing = required.filter(field => !config[field]);
+    if (missing.length > 0) {
+        throw new Error(`OpenMoney configuration incomplete. Missing fields: ${missing.join(', ')}`);
+    }
+}
+function buildConfig(userConfig = {}) {
+    var _a, _b, _c, _d, _e, _f;
+    const envOverrides = pickEnv([
+        'NP_HOST_URL',
+        'NP_PATH_PREFIX',
+        'NP_HOMEPAGE',
+        'NP_TEMPLATE_DIR',
+        'NP_THEME_COLOR',
+        'NP_LOGO',
+        'NP_DB_URL',
+        'NP_PAYTM_URL',
+        'NP_RAZOR_URL',
+        'NP_PAYU_URL',
+        'NP_OPEN_MONEY_URL',
+        'NP_MID',
+        'NP_WEBSITE',
+        'NP_KEY',
+        'NP_SECRET',
+        'NP_CHANNEL_ID',
+        'NP_INDUSTRY_TYPE_ID',
+        'NP_MODE',
+        'NP_THEME_NAME',
+    ]);
+    const merged = {
+        ...defaults,
+        ...normalizeEnv(envOverrides),
+        ...userConfig,
+    };
+    // theme normalization
+    const themeName = (userConfig.themeName || ((_a = userConfig.theme) === null || _a === void 0 ? void 0 : _a.name) || merged.theme_name || 'dark').toLowerCase();
+    const theme = {
+        primary: getThemeColor(userConfig, merged),
+        accent: ((_b = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _b === void 0 ? void 0 : _b.accent) || merged.theme_accent || '#4ae0ff',
+        surface: ((_c = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _c === void 0 ? void 0 : _c.surface) || '#0f1021',
+        text: ((_d = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _d === void 0 ? void 0 : _d.text) || '#e9ecf2',
+        success: ((_e = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _e === void 0 ? void 0 : _e.success) || '#24cf5f',
+        danger: ((_f = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _f === void 0 ? void 0 : _f.danger) || '#ff6b6b',
+        name: themeName,
+    };
+    merged.theme = theme;
+    merged.theme_color = theme.primary;
+    merged.logo = userConfig.logo || merged.logo;
+    merged.brand = userConfig.brand || 'Secure Pay';
+    merged.callbacks = userConfig.callbacks || userConfig.hooks || merged.callbacks || {};
+    merged.templateDir = userConfig.templateDir || merged.templateDir;
+    merged.themeName = themeName;
+    // ensure view path remains compatible with legacy controllers
+    if (!merged.view_path) {
+        merged.view_path = '/../views/';
+    }
+    if (userConfig.host_url) {
+        merged.host_url = userConfig.host_url;
+    }
+    else if (process.env.NP_HOST_URL) {
+        merged.host_url = process.env.NP_HOST_URL;
+    }
+    return validateConfig(merged);
+}
+function getThemeColor(userConfig, merged) {
+    var _a;
+    if ((_a = userConfig === null || userConfig === void 0 ? void 0 : userConfig.theme) === null || _a === void 0 ? void 0 : _a.primary)
+        return userConfig.theme.primary;
+    if (userConfig.theme_color)
+        return userConfig.theme_color;
+    if (merged.NP_THEME_COLOR)
+        return merged.NP_THEME_COLOR;
+    return merged.theme_color;
+}
+function normalizeEnv(env) {
+    const mapping = {
+        NP_HOST_URL: 'host_url',
+        NP_PATH_PREFIX: 'path_prefix',
+        NP_HOMEPAGE: 'homepage',
+        NP_TEMPLATE_DIR: 'templateDir',
+        NP_THEME_COLOR: 'theme_color',
+        NP_LOGO: 'logo',
+        NP_DB_URL: 'db_url',
+        NP_PAYTM_URL: 'paytm_url',
+        NP_RAZOR_URL: 'razor_url',
+        NP_PAYU_URL: 'payu_url',
+        NP_OPEN_MONEY_URL: 'open_money_url',
+        NP_MID: 'MID',
+        NP_WEBSITE: 'WEBSITE',
+        NP_KEY: 'KEY',
+        NP_SECRET: 'SECRET',
+        NP_CHANNEL_ID: 'CHANNEL_ID',
+        NP_INDUSTRY_TYPE_ID: 'INDUSTRY_TYPE_ID',
+        NP_MODE: 'mode',
+        NP_THEME_NAME: 'themeName',
+    };
+    return Object.keys(env).reduce((acc, key) => {
+        const target = mapping[key];
+        if (target)
+            acc[target] = env[key];
+        return acc;
+    }, {});
+}

package/dist/app/utils/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Utils = void 0;
+const IDLEN = 10;
+class Utils {
+    static makeid(length = IDLEN) {
+        let text = "";
+        const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        for (let i = 0; i < length; i++)
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        return text;
+    }
+    static sanitizeRequest(body) {
+        if (body.amount)
+            body.amount = parseFloat(body.amount);
+        if (body.TXN_AMOUNT)
+            body.amount = parseFloat(body.TXN_AMOUNT);
+    }
+}
+exports.Utils = Utils;

package/dist/app/views/home.hbs

@@ -0,0 +1,22 @@
+<p>
+    <h4>About</h4>
+    <div>
+
+        <table  border="1"> 
+            
+              <tr>  
+                  <td>Name</td><td>{{name}}</td> 
+              </tr>
+              <tr>  
+                  <td>Version</td><td>{{version}}</td> 
+              </tr>
+              <tr>  
+                  <td>Repository</td><td><a href='{{repository.url}}'>GITHUB</a></td> 
+              </tr>
+          
+
+        </table>
+
+
+    </div>
+</p>

package/dist/app/views/init.hbs

@@ -0,0 +1,98 @@
+<div class="checkout-grid">
+  <aside class="product-panel card">
+     {{#if productImage}}
+        <div class="product-preview">
+            <img src="{{productImage}}" alt="{{PRODUCT_NAME}}" style="width:100%;height:100%;object-fit:cover" />
+        </div>
+       {{/if}}
+  
+    <div class="product-price">
+      <div class="pill">Product</div>
+      <div class="price">{{PRODUCT_NAME}}</div>
+    </div>
+     {{#if PRODUCT_DESC}}
+    <p class="helper" style="margin-top:14px;">{{PRODUCT_DESC}}</p>
+       {{/if}}
+  </aside>
+
+  <section class="form-panel card">
+    <header class="card__header">
+      <div>
+        <p class="eyebrow">Payment</p>
+        <h2>Review &amp; pay</h2>
+      </div>
+      <div class="amount-chip">₹ {{TXN_AMOUNT}}</div>
+    </header>
+
+    <p class="helper">Your payment is processed over an encrypted channel. Double-check the details before you continue.</p>
+
+    <form action="{{action}}" method="POST" class="form-grid" id="payment-form">
+      {{#if check}}
+      <label class="field">
+        <span class="field__label">Full Name</span>
+        <input type="text" name="NAME" required value="{{NAME}}" {{readonly}} />
+      </label>
+      {{else}}
+      <input type="hidden" name="NAME" required value="{{NAME}}" {{readonly}} />
+      {{/if}}
+
+      <label class="field">
+        <span class="field__label">Email address</span>
+        <input type="email" name="EMAIL" required value="{{EMAIL}}" {{readonly}} />
+      </label>
+
+      <label class="field">
+        <span class="field__label">Phone</span>
+        <input type="text" name="MOBILE_NO" required value="{{MOBILE_NO}}" {{readonly}} />
+      </label>
+
+      {{#if check}}
+      <label class="field">
+        <span class="field__label">Product</span>
+        <input type="text" name="PRODUCT_NAME" required value="{{PRODUCT_NAME}}" {{readonly}} />
+      </label>
+      {{else}}
+      <input type="hidden" name="PRODUCT_NAME" required value="{{PRODUCT_NAME}}" {{readonly}} />
+      {{/if}}
+
+      <label class="field">
+        <span class="field__label">Amount</span>
+        <input type="text" name="TXN_AMOUNT" required value="{{TXN_AMOUNT}}" {{readonly}} />
+      </label>
+
+      <div style="grid-column:1 / -1; display:flex; gap:10px; align-items:center; justify-content:space-between;">
+        <label class="checkbox" style="margin:0">
+          <input type="checkbox" name="save_cc" checked="checked" />
+          <span>I agree to the merchant terms</span>
+        </label>
+        <div style="font-size:12px; color:rgba(255,255,255,0.6)">Secure by PCI-DSS</div>
+      </div>
+
+      <button id="pay-button" type="submit" class="button">{{BUTTON}}</button>
+
+      <input type="hidden" name="MID" value="{{MID}}" {{readonly}} />
+      <input type="hidden" name="WEBSITE" value="{{WEBSITE}}" {{readonly}} />
+      <input type="hidden" name="ORDER_ID" value="{{ORDER_ID}}" {{readonly}} />
+      <input type="hidden" name="CUST_ID" value="{{CUST_ID}}" {{readonly}} />
+      <input type="hidden" name="INDUSTRY_TYPE_ID" value="{{INDUSTRY_TYPE_ID}}" {{readonly}} />
+      <input type="hidden" name="CHANNEL_ID" value="{{CHANNEL_ID}}" {{readonly}} />
+      <input type="hidden" name="CALLBACK_URL" value="{{CALLBACK_URL}}" {{readonly}} />
+      <input type="hidden" name="CHECKSUMHASH" value="{{CHECKSUMHASH}}" {{readonly}} />
+    </form>
+  </section>
+</div>
+
+{{!-- <script>
+  (function(){
+    if (window.__npPayBtnBound) return;
+    window.__npPayBtnBound = true;
+    const payBtn = document.getElementById('pay-button');
+    if (payBtn) {
+      payBtn.addEventListener('click', () => {
+        payBtn.setAttribute('data-loading', 'true');
+        payBtn.setAttribute('disabled', 'disabled');
+        setTimeout(() => payBtn.innerText = 'Processing…', 10);
+      });
+    }
+  })();
+</script> --}}

package/dist/app/views/layouts/index.hbs

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{brand}} · Secure Checkout</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+  <link rel="stylesheet" href="/{{path_prefix}}/css/style.css" />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20width='16'%20height='16'%20rx='3'%20fill='%23ff5722'/%3E%3C/svg%3E" />
+  <link rel="shortcut icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Crect%20width='16'%20height='16'%20rx='3'%20fill='%23ff5722'/%3E%3C/svg%3E" />
+  <style>
+    :root {
+      --color-primary: {{#if theme.primary}}{{theme.primary}}{{else}}#2f8bff{{/if}};
+      --color-accent: {{#if theme.accent}}{{theme.accent}}{{else}}#5ce1e6{{/if}};
+      --color-surface: {{#if theme.surface}}{{theme.surface}}{{else}}#0f1021{{/if}};
+      --color-text: {{#if theme.text}}{{theme.text}}{{else}}#e9ecf2{{/if}};
+      --color-success: {{#if theme.success}}{{theme.success}}{{else}}#24cf5f{{/if}};
+      --color-danger: {{#if theme.danger}}{{theme.danger}}{{else}}#ff6b6b{{/if}};
+      --color-outline: rgba(255,255,255,0.08);
+      --radius: 14px;
+    }
+  </style>
+</head>
+<body class="theme-{{#if themeName}}{{themeName}}{{else}}dark{{/if}}">
+  <div class="shell">
+    <header class="shell__header">
+      <div class="brand">
+        {{#if logo}}
+          <span class="brand__mark brand__mark--img"><img src="{{logo}}" alt="{{brand}} logo"></span>
+        {{else}}
+          <span class="brand__mark">{{brand}}</span>
+        {{/if}}
+        <div class="brand__text">
+          <div class="brand__title">{{brand}}</div>
+          <div class="brand__meta">Secure checkout</div>
+        </div>
+      </div>
+      <div class="pill">Encrypted</div>
+    </header>
+
+    <main class="shell__content">
+      {{{body}}}
+    </main>
+
+    <footer class="shell__footer">
+      <span>Protected by {{brand}}</span>
+    </footer>
+  </div>
+</body>
+</html>

package/dist/app/views/result.hbs

@@ -0,0 +1,33 @@
+<section class="card" style="text-align:center; padding:36px 28px;">
+  <div style="display:flex; flex-direction:column; align-items:center; gap:18px;" class="status-{{status}}">
+    <div style="width:84px; height:84px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,0.03);">
+      <svg class="icon-success" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17l-5-5" stroke="#4cff9f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <svg class="icon-fail" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:none"><circle cx="12" cy="12" r="9" stroke="#ff9b9b" stroke-width="2.2"/><path d="M12 8v5" stroke="#ff9b9b" stroke-width="2.2" stroke-linecap="round"/><path d="M12 16h.01" stroke="#ff9b9b" stroke-width="2.2" stroke-linecap="round"/></svg>
+    </div>
+
+    <div>
+      <h2 style="margin:0">Payment</h2>
+      <p class="helper" style="margin-top:6px">{{message}}</p>
+    </div>
+
+    <div class="result-grid" style="max-width:560px; width:100%;">
+      <div class="result-item">
+        <p class="label">Order ID</p>
+        <p class="value">{{orderId}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Transaction ID</p>
+        <p class="value">{{txnId}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Amount</p>
+        <p class="value">{{amount}}</p>
+      </div>
+      <div class="result-item">
+        <p class="label">Status</p>
+        <p class="value">{{status}}</p>
+      </div>
+    </div>
+
+  </div>
+</section>