348 lines
10 KiB
JavaScript
348 lines
10 KiB
JavaScript
frappe.ui.form.on("Sales Invoice", {
|
|
refresh(frm) {
|
|
frm.clear_custom_buttons();
|
|
|
|
// Only on submitted invoices
|
|
if (frm.doc.docstatus !== 1) return;
|
|
if (!frm.doc.customer) return;
|
|
|
|
// Already paid
|
|
if (frm.doc.outstanding_amount <= 0) {
|
|
frm.dashboard.add_indicator("Paid", "green");
|
|
return;
|
|
}
|
|
|
|
frm.dashboard.add_indicator("Unpaid", "red");
|
|
|
|
if (frm.doc.outstanding_amount > 0 && frm.doc.docstatus === 1) {
|
|
frm.add_custom_button("Run Payment", () => {
|
|
run_payment_flow(frm);
|
|
}, "Actions");
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function run_payment_flow(frm) {
|
|
frm.disable_save();
|
|
|
|
frappe.call({
|
|
method: "ns_app.api.payments.check_autopay",
|
|
args: { customer: frm.doc.customer },
|
|
callback(r) {
|
|
if (!r.message) {
|
|
frm.enable_save();
|
|
return;
|
|
}
|
|
|
|
if (r.message.autopay_enabled && r.message.autopay_id) {
|
|
run_autopay(frm);
|
|
} else {
|
|
open_manual_payment_form(frm);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function run_autopay(frm) {
|
|
|
|
frappe.confirm(
|
|
`Run AutoPay for ${format_currency(frm.doc.outstanding_amount)}?`,
|
|
() => {
|
|
|
|
// Change button to processing
|
|
frm.remove_custom_button("Run Payment");
|
|
frm.add_custom_button("Processing...", () => {}, null).prop("disabled", true);
|
|
|
|
frappe.call({
|
|
method: "ns_app.api.payments.run_autopay_payment",
|
|
args: {
|
|
invoice: frm.doc.name
|
|
},
|
|
freeze: true,
|
|
freeze_message: "Processing payment...",
|
|
|
|
callback(r) {
|
|
|
|
if (!r.message) {
|
|
show_payment_failed(frm, "No response from payment processor");
|
|
return;
|
|
}
|
|
|
|
if (r.message.success) {
|
|
|
|
// Success UI
|
|
frm.remove_custom_button("Run Payment");
|
|
|
|
frm.add_custom_button("Paid ✓", () => {})
|
|
.prop("disabled", true);
|
|
|
|
frappe.show_alert({
|
|
message: `Payment of ${format_currency(frm.doc.outstanding_amount)} received`,
|
|
indicator: "green"
|
|
});
|
|
|
|
frm.reload_doc();
|
|
|
|
} else {
|
|
|
|
show_payment_failed(frm, r.message.error || "Payment declined");
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
() => {}
|
|
);
|
|
}
|
|
|
|
function show_payment_failed(frm, message) {
|
|
|
|
// Remove processing button
|
|
frm.remove_custom_button("Processing...");
|
|
|
|
// Add retry button
|
|
frm.add_custom_button("Retry Payment", () => {
|
|
run_payment_flow(frm);
|
|
});
|
|
|
|
frappe.msgprint({
|
|
title: "Payment Failed",
|
|
indicator: "red",
|
|
message: message
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function open_manual_payment_form(frm) {
|
|
|
|
const uid = Date.now(); // unique per open
|
|
|
|
const dialog = new frappe.ui.Dialog({
|
|
title: "Secure Payment",
|
|
size: "large",
|
|
fields: [
|
|
{
|
|
fieldtype: "HTML",
|
|
fieldname: "payment_form",
|
|
options: `
|
|
<div style="padding: 20px;">
|
|
|
|
<div>
|
|
<label>Cardholder Name</label>
|
|
<input type="text" id="cardholder_name_${uid}" class="form-control"/>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label>Billing ZIP</label>
|
|
<input type="text" id="billing_zip_${uid}" class="form-control"/>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<label style="color: red; font-weight: bold;">
|
|
<input type="checkbox" id="save_autopay_${uid}" />
|
|
Save for Auto Pay (** Not Fuctional Yet **)
|
|
</label>
|
|
</div>
|
|
|
|
<div id="cc_number_${uid}" class="mt-3"></div>
|
|
<div id="cc_exp_${uid}" class="mt-2"></div>
|
|
<div id="cc_cvv_${uid}" class="mt-2"></div>
|
|
|
|
<button id="pay_btn_${uid}" class="btn btn-primary mt-4">
|
|
Pay $${frm.doc.outstanding_amount}
|
|
</button>
|
|
</div>
|
|
`
|
|
}
|
|
],
|
|
|
|
// Destroy CollectJS instance if close button is clicked
|
|
primary_action_label: "Close",
|
|
primary_action() {
|
|
dialog.hide();
|
|
}
|
|
});
|
|
|
|
dialog.show();
|
|
|
|
// Destroy CollectJS Instance if closed with the X button
|
|
dialog.$wrapper.on("hidden.bs.modal", function () {
|
|
|
|
// Remove leftover backdrop (fix dark screen)
|
|
document.querySelectorAll(".modal-backdrop").forEach(el => el.remove());
|
|
|
|
// Restore body scroll + click
|
|
document.body.classList.remove("modal-open");
|
|
document.body.style.overflow = "";
|
|
|
|
// safely remove dialog
|
|
dialog.$wrapper.remove();
|
|
|
|
// WClean CollectJS
|
|
if (window.CollectJS) {
|
|
try {
|
|
delete window.CollectJS;
|
|
} catch (e) {}
|
|
}
|
|
|
|
});
|
|
|
|
// Prefill
|
|
setTimeout(() => {
|
|
const nameEl = document.getElementById(`cardholder_name_${uid}`);
|
|
const zipEl = document.getElementById(`billing_zip_${uid}`);
|
|
|
|
if (nameEl) nameEl.value = frm.doc.customer_name || "";
|
|
if (zipEl) zipEl.value = frm.doc.billing_zip || frm.doc.pincode || "";
|
|
}, 50);
|
|
|
|
|
|
// Load CollectJS once
|
|
function loadCollectJS(callback) {
|
|
|
|
// Remove existing script if it exists
|
|
const existingScript = document.querySelector('script[src*="Collect.js"]');
|
|
if (existingScript) {
|
|
existingScript.remove();
|
|
}
|
|
|
|
// Reset global
|
|
if (window.CollectJS) {
|
|
delete window.CollectJS;
|
|
}
|
|
|
|
// Create fresh script every instance
|
|
const script = document.createElement("script");
|
|
script.src = "https://secure.nmi.com/token/Collect.js";
|
|
|
|
script.setAttribute(
|
|
"data-tokenization-key",
|
|
"HKx4XR-G549wT-8bZ2YJ-3kbG28"
|
|
);
|
|
|
|
script.onload = () => {
|
|
console.log("CollectJS loaded fresh");
|
|
callback();
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
|
|
loadCollectJS(() => {
|
|
console.log("CollectJS ready");
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
CollectJS.configure({
|
|
variant: "inline",
|
|
styleSniffer: true,
|
|
|
|
fields: {
|
|
ccnumber: {
|
|
selector: `#cc_number_${uid}`,
|
|
placeholder: "Card Number"
|
|
},
|
|
ccexp: {
|
|
selector: `#cc_exp_${uid}`,
|
|
placeholder: "MM / YY"
|
|
},
|
|
cvv: {
|
|
selector: `#cc_cvv_${uid}`,
|
|
placeholder: "CVV"
|
|
}
|
|
},
|
|
|
|
callback: function (response) {
|
|
if (response.token) {
|
|
|
|
// Get name and ZIP
|
|
const enteredName = document.getElementById(`cardholder_name_${uid}`)?.value;
|
|
const enteredZip = document.getElementById(`billing_zip_${uid}`)?.value;
|
|
|
|
// Save name and ZIP
|
|
const finalName = enteredName || frm.doc.customer_name;
|
|
const finalZip = enteredZip || frm.doc.billing_zip || frm.doc.pincode;
|
|
|
|
// Check autopay enrollment choice
|
|
const AUTOPAY_ENABLED = false;
|
|
const checkbox = document.getElementById(`save_autopay_${uid}`);
|
|
const save_autopay = AUTOPAY_ENABLED ? checkbox?.checked : 0;
|
|
|
|
|
|
run_token_payment(frm, response.token, dialog, {
|
|
cardholder_name: finalName,
|
|
billing_zip: finalZip,
|
|
save_autopay: save_autopay
|
|
});
|
|
|
|
} else {
|
|
frappe.msgprint("Payment failed to tokenize");
|
|
}
|
|
}
|
|
});
|
|
|
|
const btn = document.getElementById(`pay_btn_${uid}`);
|
|
|
|
if (!btn) {
|
|
console.error("Pay button not found");
|
|
return;
|
|
}
|
|
|
|
btn.onclick = function () {
|
|
frappe.show_alert({
|
|
message: "Processing payment...",
|
|
indicator: "blue"
|
|
});
|
|
|
|
CollectJS.startPaymentRequest();
|
|
};
|
|
|
|
}, 100);
|
|
|
|
});
|
|
}
|
|
|
|
|
|
function run_token_payment(frm, token, dialog, extra_data = {}) {
|
|
|
|
const save_autopay = extra_data.save_autopay ? 1 : 0;
|
|
|
|
frappe.call({
|
|
method: "ns_app.api.payments.run_token_payment",
|
|
args: {
|
|
invoice: frm.doc.name,
|
|
token: token,
|
|
cardholder_name: extra_data.cardholder_name,
|
|
billing_zip: extra_data.billing_zip,
|
|
save_autopay: save_autopay
|
|
},
|
|
callback(r) {
|
|
if (r.message?.success) {
|
|
|
|
if (save_autopay && r.message.vault_id) {
|
|
frappe.show_alert({
|
|
message: "Payment successful + AutoPay enabled",
|
|
indicator: "green"
|
|
});
|
|
} else {
|
|
frappe.show_alert({
|
|
message: "Payment successful",
|
|
indicator: "green"
|
|
});
|
|
}
|
|
|
|
dialog.hide();
|
|
frm.reload_doc();
|
|
}
|
|
else {
|
|
frappe.msgprint(r.message?.error || "Payment failed");
|
|
}
|
|
}
|
|
});
|
|
} |