Version 1 of Collect.JS no autopay, invoice payment feature.

ns_app/public/js/sales_invoice.js

@@ -124,66 +124,118 @@ function open_manual_payment_form(frm) {
         fields: [
             {
                 fieldtype: "HTML",
-                fieldname: "loader",
+                fieldname: "payment_form",
                 options: `
-                    <div id="payment_loader" style="text-align:center;padding:40px;">
-                        <b>Loading secure checkout…</b>
+                    <div style="padding: 20px;">
+                        <div id="cc_number"></div>
+                        <div id="cc_exp" class="mt-2"></div>
+                        <div id="cc_cvv" class="mt-2"></div>
+
+                        <button id="pay_btn" class="btn btn-primary mt-4">
+                            Pay $${frm.doc.outstanding_amount}
+                        </button>
                     </div>
                 `
-            },
-            {
-                fieldtype: "HTML",
-                fieldname: "payment_form",
-                options: `<div id="iframe_container"></div>`
             }
         ],
         primary_action_label: "Close",
         primary_action() {
             dialog.hide();
-            frm.reload_doc();
         }
     });
 
     dialog.show();
 
-    frappe.call({
-        method: "ns_app.api.payments.get_collect_checkout_url",
-        args: { invoice: frm.doc.name },
-        callback(r) {
-            if (!r.message) {
-                frappe.msgprint("Unable to start payment");
-                return;
-            }
+    // Load NMI Collect.js
+    const script = document.createElement("script");
+    script.src = "https://secure.nmi.com/token/Collect.js";
 
-            const iframe_html = `
-                <iframe
-                    src="${r.message}"
-                    style="width:100%;height:520px;border:none;"
-                    sandbox="allow-forms allow-scripts allow-same-origin"
-                    onload="document.getElementById('payment_loader').style.display='none';"
-                ></iframe>
-            `;
+    script.setAttribute(
+    "data-tokenization-key",
+    "HKx4XR-G549wT-8bZ2YJ-3kbG28" 
+);
 
-            document.getElementById("iframe_container").innerHTML = iframe_html;
-        }
-    });
+    script.onload = () => {
+        console.log("CollectJS loaded");
 
-    // Poll invoice every 5 seconds
-    const poller = setInterval(() => {
-        frappe.call({
-            method: "frappe.client.get",
-            args: {
-                doctype: "Sales Invoice",
-                name: frm.doc.name
+        CollectJS.configure({ 
+            variant: "inline",
+            styleSniffer: true,
+
+            fields: {
+                ccnumber: {
+                    selector: "#cc_number",
+                    placeholder: "Card Number"
+                },
+                ccexp: {
+                    selector: "#cc_exp",
+                    placeholder: "MM / YY"
+                },
+                cvv: {
+                    selector: "#cc_cvv",
+                    placeholder: "CVV"
+                }
             },
-            callback(r) {
-                if (r.message && r.message.outstanding_amount <= 0) {
-                    clearInterval(poller);
-                    dialog.hide();
-                    frm.reload_doc();
-                    frappe.msgprint("Payment successful!");
+            
+
+            callback: function (response) {
+                console.log("Token response:", response);
+
+                if (response.token) {
+                    run_token_payment(frm, response.token, dialog);
+                } else {
+                    frappe.msgprint("Payment failed to tokenize");
                 }
             }
         });
-    }, 5000);
+
+        console.log("Fields:", document.querySelector("#cc_number"));
+        
+        setTimeout(() => {
+            const btn = dialog.$wrapper.find("#pay_btn")[0];
+
+            if (!btn) {
+                console.error("Pay button not found");
+                return;
+            }
+
+            btn.onclick = function () {
+                console.log("Pay clicked");
+
+                frappe.show_alert({
+                    message: "Processing payment...",
+                    indicator: "blue"
+                });
+
+                CollectJS.startPaymentRequest();
+            };
+        }, 300);
+
+    };
+
+    document.body.appendChild(script);
+}
+
+
+function run_token_payment(frm, token, dialog) {
+    frappe.call({
+        method: "ns_app.api.payments.run_token_payment",
+        args: {
+            invoice: frm.doc.name,
+            token: token
+        },
+        callback(r) {
+            if (r.message?.success) {
+                dialog.hide();
+                frm.reload_doc();
+
+                frappe.show_alert({
+                    message: "Payment successful",
+                    indicator: "green"
+                });
+            } else {
+                frappe.msgprint(r.message?.error || "Payment failed");
+            }
+        }
+    });
 }