Finished sign up for auto pay feature from pay invoice form. Also, added a doc file for the payment flow.
This commit is contained in:
Ty Reynolds
@@ -24,21 +24,35 @@ frappe.ui.form.on("Sales Invoice", {
|
||||
|
||||
|
||||
function run_payment_flow(frm) {
|
||||
|
||||
frm.disable_save();
|
||||
|
||||
frappe.call({
|
||||
method: "ns_app.api.payments.check_autopay",
|
||||
args: { customer: frm.doc.customer },
|
||||
|
||||
args: {
|
||||
customer: frm.doc.customer
|
||||
},
|
||||
|
||||
callback(r) {
|
||||
|
||||
frm.enable_save();
|
||||
|
||||
if (!r.message) {
|
||||
frm.enable_save();
|
||||
return;
|
||||
}
|
||||
|
||||
if (r.message.autopay_enabled && r.message.autopay_id) {
|
||||
if (
|
||||
r.message.autopay_enabled
|
||||
&& r.message.autopay_id
|
||||
) {
|
||||
|
||||
run_autopay(frm);
|
||||
|
||||
} else {
|
||||
|
||||
open_manual_payment_form(frm);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -49,37 +63,53 @@ 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);
|
||||
|
||||
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");
|
||||
|
||||
show_payment_failed(
|
||||
frm,
|
||||
"No response from payment processor"
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (r.message.success) {
|
||||
|
||||
// Success UI
|
||||
frm.remove_custom_button("Run Payment");
|
||||
frm.remove_custom_button(
|
||||
"Run Payment"
|
||||
);
|
||||
|
||||
frm.add_custom_button("Paid ✓", () => {})
|
||||
.prop("disabled", true);
|
||||
frm.add_custom_button(
|
||||
"Paid ✓",
|
||||
() => {}
|
||||
).prop("disabled", true);
|
||||
|
||||
frappe.show_alert({
|
||||
message: `Payment of ${format_currency(frm.doc.outstanding_amount)} received`,
|
||||
message:
|
||||
`Payment of ${format_currency(frm.doc.outstanding_amount)} received`,
|
||||
indicator: "green"
|
||||
});
|
||||
|
||||
@@ -87,26 +117,32 @@ function run_autopay(frm) {
|
||||
|
||||
} else {
|
||||
|
||||
show_payment_failed(frm, r.message.error || "Payment declined");
|
||||
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);
|
||||
});
|
||||
frm.add_custom_button(
|
||||
"Retry Payment",
|
||||
() => {
|
||||
run_payment_flow(frm);
|
||||
}
|
||||
);
|
||||
|
||||
frappe.msgprint({
|
||||
title: "Payment Failed",
|
||||
@@ -119,105 +155,223 @@ function show_payment_failed(frm, message) {
|
||||
|
||||
function open_manual_payment_form(frm) {
|
||||
|
||||
const uid = Date.now(); // unique per open
|
||||
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>Cardholder Name</label>
|
||||
<input type="text" id="cardholder_name_${uid}" class="form-control"/>
|
||||
<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"/>
|
||||
|
||||
<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 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>
|
||||
<div
|
||||
id="cc_number_${uid}"
|
||||
class="mt-3"
|
||||
></div>
|
||||
|
||||
<button id="pay_btn_${uid}" class="btn btn-primary mt-4">
|
||||
Pay $${frm.doc.outstanding_amount}
|
||||
<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>
|
||||
`
|
||||
}
|
||||
],
|
||||
|
||||
// Destroy CollectJS instance if close button is clicked
|
||||
|
||||
primary_action_label: "Close",
|
||||
|
||||
primary_action() {
|
||||
dialog.hide();
|
||||
dialog.hide();
|
||||
}
|
||||
});
|
||||
|
||||
dialog.show();
|
||||
|
||||
// Destroy CollectJS Instance if closed with the X button
|
||||
dialog.$wrapper.on("hidden.bs.modal", function () {
|
||||
dialog.$wrapper.on(
|
||||
"hidden.bs.modal",
|
||||
function () {
|
||||
|
||||
// Remove leftover backdrop (fix dark screen)
|
||||
document.querySelectorAll(".modal-backdrop").forEach(el => el.remove());
|
||||
document.querySelectorAll(
|
||||
".modal-backdrop"
|
||||
).forEach(el => el.remove());
|
||||
|
||||
// Restore body scroll + click
|
||||
document.body.classList.remove("modal-open");
|
||||
document.body.style.overflow = "";
|
||||
document.body.classList.remove(
|
||||
"modal-open"
|
||||
);
|
||||
|
||||
// safely remove dialog
|
||||
dialog.$wrapper.remove();
|
||||
document.body.style.overflow = "";
|
||||
|
||||
// WClean CollectJS
|
||||
if (window.CollectJS) {
|
||||
try {
|
||||
delete window.CollectJS;
|
||||
} catch (e) {}
|
||||
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(" ") || "";
|
||||
}
|
||||
|
||||
// Prefill
|
||||
setTimeout(() => {
|
||||
const nameEl = document.getElementById(`cardholder_name_${uid}`);
|
||||
const zipEl = document.getElementById(`billing_zip_${uid}`);
|
||||
if (companyEl) {
|
||||
companyEl.value =
|
||||
frm.doc.customer || "";
|
||||
}
|
||||
|
||||
if (zipEl) {
|
||||
|
||||
zipEl.value =
|
||||
frm.doc.billing_zip
|
||||
|| frm.doc.pincode
|
||||
|| "";
|
||||
|
||||
}
|
||||
|
||||
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"]');
|
||||
const existingScript = document.querySelector(
|
||||
'script[src*="Collect.js"]'
|
||||
);
|
||||
|
||||
if (existingScript) {
|
||||
existingScript.remove();
|
||||
}
|
||||
|
||||
// Reset global
|
||||
if (window.CollectJS) {
|
||||
delete window.CollectJS;
|
||||
|
||||
try {
|
||||
|
||||
delete window.CollectJS;
|
||||
|
||||
} catch (e) {}
|
||||
|
||||
}
|
||||
|
||||
// Create fresh script every instance
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://secure.nmi.com/token/Collect.js";
|
||||
const script =
|
||||
document.createElement("script");
|
||||
|
||||
script.src =
|
||||
"https://secure.nmi.com/token/Collect.js";
|
||||
|
||||
script.setAttribute(
|
||||
"data-tokenization-key",
|
||||
@@ -225,7 +379,11 @@ function open_manual_payment_form(frm) {
|
||||
);
|
||||
|
||||
script.onload = () => {
|
||||
console.log("CollectJS loaded fresh");
|
||||
|
||||
console.log(
|
||||
"CollectJS loaded fresh"
|
||||
);
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
@@ -234,114 +392,265 @@ function open_manual_payment_form(frm) {
|
||||
|
||||
|
||||
loadCollectJS(() => {
|
||||
|
||||
console.log("CollectJS ready");
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
|
||||
CollectJS.configure({
|
||||
|
||||
variant: "inline",
|
||||
|
||||
styleSniffer: true,
|
||||
|
||||
fields: {
|
||||
|
||||
ccnumber: {
|
||||
selector: `#cc_number_${uid}`,
|
||||
placeholder: "Card Number"
|
||||
selector:
|
||||
`#cc_number_${uid}`,
|
||||
|
||||
placeholder:
|
||||
"Card Number"
|
||||
},
|
||||
|
||||
ccexp: {
|
||||
selector: `#cc_exp_${uid}`,
|
||||
placeholder: "MM / YY"
|
||||
selector:
|
||||
`#cc_exp_${uid}`,
|
||||
|
||||
placeholder:
|
||||
"MM / YY"
|
||||
},
|
||||
|
||||
cvv: {
|
||||
selector: `#cc_cvv_${uid}`,
|
||||
placeholder: "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");
|
||||
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}`);
|
||||
const btn =
|
||||
document.getElementById(
|
||||
`pay_btn_${uid}`
|
||||
);
|
||||
|
||||
if (!btn) {
|
||||
console.error("Pay button not found");
|
||||
|
||||
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...",
|
||||
message:
|
||||
"Processing payment...",
|
||||
|
||||
indicator: "blue"
|
||||
});
|
||||
|
||||
CollectJS.startPaymentRequest();
|
||||
};
|
||||
|
||||
}, 100);
|
||||
}, 300);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
function run_token_payment(frm, token, dialog, extra_data = {}) {
|
||||
|
||||
const save_autopay = extra_data.save_autopay ? 1 : 0;
|
||||
function run_token_payment(
|
||||
frm,
|
||||
token,
|
||||
dialog,
|
||||
extra_data = {}
|
||||
) {
|
||||
|
||||
frappe.call({
|
||||
method: "ns_app.api.payments.run_token_payment",
|
||||
|
||||
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
|
||||
|
||||
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 (save_autopay && r.message.vault_id) {
|
||||
if (
|
||||
extra_data.save_autopay
|
||||
&& r.message.vault_id
|
||||
) {
|
||||
|
||||
frappe.show_alert({
|
||||
message: "Payment successful + AutoPay enabled",
|
||||
message:
|
||||
`Payment successful + AutoPay enabled (${r.message.vault_id})`,
|
||||
|
||||
indicator: "green"
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
frappe.show_alert({
|
||||
message: "Payment successful",
|
||||
message:
|
||||
"Payment successful",
|
||||
|
||||
indicator: "green"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.ns_payment_processing = false;
|
||||
|
||||
dialog.hide();
|
||||
|
||||
frm.reload_doc();
|
||||
}
|
||||
else {
|
||||
frappe.msgprint(r.message?.error || "Payment failed");
|
||||
|
||||
} 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)}`;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user