657 lines
15 KiB
JavaScript
657 lines
15 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) {
|
|
|
|
frm.enable_save();
|
|
|
|
if (!r.message) {
|
|
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)}?`,
|
|
|
|
() => {
|
|
|
|
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) {
|
|
|
|
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) {
|
|
|
|
frm.remove_custom_button("Processing...");
|
|
|
|
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();
|
|
|
|
window.ns_payment_processing = false;
|
|
|
|
const dialog = new frappe.ui.Dialog({
|
|
title: "Secure Payment",
|
|
|
|
size: "large",
|
|
|
|
fields: [
|
|
{
|
|
fieldtype: "HTML",
|
|
|
|
fieldname: "payment_form",
|
|
|
|
options: `
|
|
<div style="padding: 20px;">
|
|
|
|
<div>
|
|
<label>First Name</label>
|
|
|
|
<input
|
|
type="text"
|
|
id="first_name_${uid}"
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label>Last Name</label>
|
|
|
|
<input
|
|
type="text"
|
|
id="last_name_${uid}"
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label>Company (Optional)</label>
|
|
|
|
<input
|
|
type="text"
|
|
id="company_${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="font-weight: bold;">
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="save_autopay_${uid}"
|
|
/>
|
|
|
|
Save for Auto Pay
|
|
|
|
</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 ${format_currency(frm.doc.outstanding_amount)}
|
|
</button>
|
|
|
|
</div>
|
|
`
|
|
}
|
|
],
|
|
|
|
primary_action_label: "Close",
|
|
|
|
primary_action() {
|
|
dialog.hide();
|
|
}
|
|
});
|
|
|
|
dialog.show();
|
|
|
|
dialog.$wrapper.on(
|
|
"hidden.bs.modal",
|
|
function () {
|
|
|
|
document.querySelectorAll(
|
|
".modal-backdrop"
|
|
).forEach(el => el.remove());
|
|
|
|
document.body.classList.remove(
|
|
"modal-open"
|
|
);
|
|
|
|
document.body.style.overflow = "";
|
|
|
|
dialog.$wrapper.remove();
|
|
|
|
window.ns_payment_processing = false;
|
|
|
|
if (window.CollectJS) {
|
|
|
|
try {
|
|
|
|
delete window.CollectJS;
|
|
|
|
} catch (e) {}
|
|
|
|
}
|
|
|
|
}
|
|
);
|
|
|
|
setTimeout(() => {
|
|
|
|
const firstNameEl =
|
|
document.getElementById(
|
|
`first_name_${uid}`
|
|
);
|
|
|
|
const lastNameEl =
|
|
document.getElementById(
|
|
`last_name_${uid}`
|
|
);
|
|
|
|
const companyEl =
|
|
document.getElementById(
|
|
`company_${uid}`
|
|
);
|
|
|
|
const zipEl =
|
|
document.getElementById(
|
|
`billing_zip_${uid}`
|
|
);
|
|
|
|
const customerName =
|
|
frm.doc.customer_name || "";
|
|
|
|
const parts =
|
|
customerName.trim().split(" ");
|
|
|
|
if (firstNameEl) {
|
|
firstNameEl.value = parts[0] || "";
|
|
}
|
|
|
|
if (lastNameEl) {
|
|
lastNameEl.value =
|
|
parts.slice(1).join(" ") || "";
|
|
}
|
|
|
|
if (companyEl) {
|
|
companyEl.value =
|
|
frm.doc.customer || "";
|
|
}
|
|
|
|
if (zipEl) {
|
|
|
|
zipEl.value =
|
|
frm.doc.billing_zip
|
|
|| frm.doc.pincode
|
|
|| "";
|
|
|
|
}
|
|
|
|
}, 50);
|
|
|
|
|
|
function loadCollectJS(callback) {
|
|
|
|
const existingScript = document.querySelector(
|
|
'script[src*="Collect.js"]'
|
|
);
|
|
|
|
if (existingScript) {
|
|
existingScript.remove();
|
|
}
|
|
|
|
if (window.CollectJS) {
|
|
|
|
try {
|
|
|
|
delete window.CollectJS;
|
|
|
|
} catch (e) {}
|
|
|
|
}
|
|
|
|
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 (
|
|
window.ns_payment_processing
|
|
) {
|
|
return;
|
|
}
|
|
|
|
window.ns_payment_processing = true;
|
|
|
|
if (!response.token) {
|
|
|
|
window.ns_payment_processing = false;
|
|
|
|
frappe.msgprint(
|
|
"Payment failed to tokenize"
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
const firstName =
|
|
document.getElementById(
|
|
`first_name_${uid}`
|
|
)?.value?.trim();
|
|
|
|
const lastName =
|
|
document.getElementById(
|
|
`last_name_${uid}`
|
|
)?.value?.trim();
|
|
|
|
const company =
|
|
document.getElementById(
|
|
`company_${uid}`
|
|
)?.value?.trim();
|
|
|
|
const billingZip =
|
|
document.getElementById(
|
|
`billing_zip_${uid}`
|
|
)?.value?.trim();
|
|
|
|
const checkbox =
|
|
document.getElementById(
|
|
`save_autopay_${uid}`
|
|
);
|
|
|
|
const save_autopay =
|
|
checkbox?.checked ? 1 : 0;
|
|
|
|
console.log(
|
|
"AUTOPAY CHECKBOX:",
|
|
save_autopay
|
|
);
|
|
|
|
const payBtn =
|
|
document.getElementById(
|
|
`pay_btn_${uid}`
|
|
);
|
|
|
|
if (payBtn) {
|
|
|
|
payBtn.disabled = true;
|
|
|
|
payBtn.innerText =
|
|
"Processing...";
|
|
|
|
}
|
|
|
|
run_token_payment(
|
|
frm,
|
|
response.token,
|
|
dialog,
|
|
{
|
|
first_name: firstName,
|
|
last_name: lastName,
|
|
company: company,
|
|
billing_zip: billingZip,
|
|
save_autopay: save_autopay
|
|
}
|
|
);
|
|
}
|
|
});
|
|
|
|
const btn =
|
|
document.getElementById(
|
|
`pay_btn_${uid}`
|
|
);
|
|
|
|
if (!btn) {
|
|
|
|
console.error(
|
|
"Pay button not found"
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
btn.onclick = function () {
|
|
|
|
if (
|
|
window.ns_payment_processing
|
|
) {
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
|
|
btn.innerText = "Processing...";
|
|
|
|
frappe.show_alert({
|
|
message:
|
|
"Processing payment...",
|
|
|
|
indicator: "blue"
|
|
});
|
|
|
|
CollectJS.startPaymentRequest();
|
|
};
|
|
|
|
}, 300);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function run_token_payment(
|
|
frm,
|
|
token,
|
|
dialog,
|
|
extra_data = {}
|
|
) {
|
|
|
|
frappe.call({
|
|
|
|
method:
|
|
"ns_app.api.payments.run_token_payment",
|
|
|
|
args: {
|
|
|
|
invoice: frm.doc.name,
|
|
|
|
token: token,
|
|
|
|
first_name:
|
|
extra_data.first_name,
|
|
|
|
last_name:
|
|
extra_data.last_name,
|
|
|
|
company:
|
|
extra_data.company,
|
|
|
|
billing_zip:
|
|
extra_data.billing_zip,
|
|
|
|
save_autopay:
|
|
extra_data.save_autopay || 0
|
|
},
|
|
|
|
freeze: true,
|
|
|
|
freeze_message:
|
|
"Processing payment...",
|
|
|
|
callback(r) {
|
|
|
|
if (r.message?.success) {
|
|
|
|
if (
|
|
extra_data.save_autopay
|
|
&& r.message.vault_id
|
|
) {
|
|
|
|
frappe.show_alert({
|
|
message:
|
|
`Payment successful + AutoPay enabled (${r.message.vault_id})`,
|
|
|
|
indicator: "green"
|
|
});
|
|
|
|
} else {
|
|
|
|
frappe.show_alert({
|
|
message:
|
|
"Payment successful",
|
|
|
|
indicator: "green"
|
|
});
|
|
|
|
}
|
|
|
|
window.ns_payment_processing = false;
|
|
|
|
dialog.hide();
|
|
|
|
frm.reload_doc();
|
|
|
|
} else {
|
|
|
|
window.ns_payment_processing = false;
|
|
|
|
frappe.msgprint(
|
|
r.message?.error
|
|
|| "Payment failed"
|
|
);
|
|
|
|
const payBtn =
|
|
document.querySelector(
|
|
'[id^="pay_btn_"]'
|
|
);
|
|
|
|
if (payBtn) {
|
|
|
|
payBtn.disabled = false;
|
|
|
|
payBtn.innerText =
|
|
`Pay ${format_currency(frm.doc.outstanding_amount)}`;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
} |