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

ns_app/api/payments.py

@@ -118,21 +118,47 @@ def call_payment_api(payload):
     
 
 @frappe.whitelist()
-def get_collect_checkout_url(invoice):
+def run_token_payment(invoice, token):
     inv = frappe.get_doc("Sales Invoice", invoice)
 
-    security_key = frappe.conf.get("nmi_security_key")
+    url = "https://secure.nmi.com/api/transact.php"
 
-    if not security_key:
+    # Get and parse customer name.
-        frappe.throw("NMI security key not configured")
+    customer_name = inv.customer_name or inv.customer or "Customer"
+    parts = customer_name.split(" ", 1)
+    first_name = parts[0]
+    last_name = parts[1] if len(parts) > 1 else "."
 
-    return (
+    data = {
-        "https://crystalclear.transactiongateway.com/collect/checkout"
+        "security_key": frappe.conf.get("nmi_security_key"),
-        f"?security_key={security_key}"
+        "type": "sale",
-        f"&amount={inv.outstanding_amount}"
+        "payment_token": token,
-        f"&orderid={inv.name}"
+        "amount": inv.outstanding_amount,
+        "orderid": inv.name,
+
+        "first_name": first_name,
+        "last_name": last_name,
+        "email": inv.contact_email or "",
+    }
+
+    response = requests.post(url, data=data)
+    result = urllib.parse.parse_qs(response.text)
+    frappe.logger("payments").info(f"NMI RESPONSE: {response.text}")
+    success = result.get("response", ["0"])[0]
+    transaction_id = result.get("transactionid", [""])[0]
+
+    if success == "1":
+        create_payment_entry(
+            invoice=invoice,
+            amount=inv.outstanding_amount,
+            transaction_id=transaction_id,
+            mode_of_payment="Credit Card"
         )
 
+        return {"success": True}
+
+    return {"success": False, "error": result.get("responsetext", ["Error"])[0]}
+    
 
 @frappe.whitelist(allow_guest=True)
 def crystalclear_webhook():

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;">
+                    <div style="padding: 20px;">
-                        <b>Loading secure checkout…</b>
+                        <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({
+    // Load NMI Collect.js
-        method: "ns_app.api.payments.get_collect_checkout_url",
+    const script = document.createElement("script");
-        args: { invoice: frm.doc.name },
+    script.src = "https://secure.nmi.com/token/Collect.js";
-        callback(r) {
+
-            if (!r.message) {
+    script.setAttribute(
-                frappe.msgprint("Unable to start payment");
+    "data-tokenization-key",
+    "HKx4XR-G549wT-8bZ2YJ-3kbG28" 
+);
+
+    script.onload = () => {
+        console.log("CollectJS loaded");
+
+        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: function (response) {
+                console.log("Token response:", response);
+
+                if (response.token) {
+                    run_token_payment(frm, response.token, dialog);
+                } else {
+                    frappe.msgprint("Payment failed to tokenize");
+                }
+            }
+        });
+
+        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;
             }
 
-            const iframe_html = `
+            btn.onclick = function () {
-                <iframe
+                console.log("Pay clicked");
-                    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>
-            `;
 
-            document.getElementById("iframe_container").innerHTML = iframe_html;
+                frappe.show_alert({
-        }
+                    message: "Processing payment...",
+                    indicator: "blue"
                 });
 
-    // Poll invoice every 5 seconds
+                CollectJS.startPaymentRequest();
-    const poller = setInterval(() => {
+            };
+        }, 300);
+
+    };
+
+    document.body.appendChild(script);
+}
+
+
+function run_token_payment(frm, token, dialog) {
     frappe.call({
-            method: "frappe.client.get",
+        method: "ns_app.api.payments.run_token_payment",
         args: {
-                doctype: "Sales Invoice",
+            invoice: frm.doc.name,
-                name: frm.doc.name
+            token: token
         },
         callback(r) {
-                if (r.message && r.message.outstanding_amount <= 0) {
+            if (r.message?.success) {
-                    clearInterval(poller);
                 dialog.hide();
                 frm.reload_doc();
-                    frappe.msgprint("Payment successful!");
+
+                frappe.show_alert({
+                    message: "Payment successful",
+                    indicator: "green"
+                });
+            } else {
+                frappe.msgprint(r.message?.error || "Payment failed");
             }
         }
     });
-    }, 5000);
 }