Added card holder name and zip to manual payment form. Known bug for loading Collect.Js after 1st instance post cache clear. Working on a fix.
This commit is contained in:
Ty Reynolds
@@ -118,6 +118,9 @@ function show_payment_failed(frm, 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",
|
||||
@@ -127,11 +130,22 @@ function open_manual_payment_form(frm) {
|
||||
fieldname: "payment_form",
|
||||
options: `
|
||||
<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">
|
||||
<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 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>
|
||||
@@ -146,53 +160,83 @@ function open_manual_payment_form(frm) {
|
||||
|
||||
dialog.show();
|
||||
|
||||
// Load NMI Collect.js
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://secure.nmi.com/token/Collect.js";
|
||||
// Prefill
|
||||
setTimeout(() => {
|
||||
const nameEl = document.getElementById(`cardholder_name_${uid}`);
|
||||
const zipEl = document.getElementById(`billing_zip_${uid}`);
|
||||
|
||||
script.setAttribute(
|
||||
"data-tokenization-key",
|
||||
"HKx4XR-G549wT-8bZ2YJ-3kbG28"
|
||||
);
|
||||
if (nameEl) nameEl.value = frm.doc.customer_name || "";
|
||||
if (zipEl) zipEl.value = frm.doc.billing_zip || frm.doc.pincode || "";
|
||||
}, 50);
|
||||
|
||||
script.onload = () => {
|
||||
console.log("CollectJS loaded");
|
||||
|
||||
CollectJS.configure({
|
||||
variant: "inline",
|
||||
styleSniffer: true,
|
||||
// Load CollectJS once
|
||||
function loadCollectJS(callback) {
|
||||
if (window.CollectJS) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
fields: {
|
||||
ccnumber: {
|
||||
selector: "#cc_number",
|
||||
placeholder: "Card Number"
|
||||
},
|
||||
ccexp: {
|
||||
selector: "#cc_exp",
|
||||
placeholder: "MM / YY"
|
||||
},
|
||||
cvv: {
|
||||
selector: "#cc_cvv",
|
||||
placeholder: "CVV"
|
||||
}
|
||||
},
|
||||
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://secure.nmi.com/token/Collect.js";
|
||||
|
||||
callback: function (response) {
|
||||
console.log("Token response:", response);
|
||||
script.setAttribute(
|
||||
"data-tokenization-key",
|
||||
"HKx4XR-G549wT-8bZ2YJ-3kbG28"
|
||||
);
|
||||
|
||||
if (response.token) {
|
||||
run_token_payment(frm, response.token, dialog);
|
||||
} else {
|
||||
frappe.msgprint("Payment failed to tokenize");
|
||||
}
|
||||
}
|
||||
});
|
||||
script.onload = callback;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
|
||||
loadCollectJS(() => {
|
||||
console.log("CollectJS ready");
|
||||
|
||||
console.log("Fields:", document.querySelector("#cc_number"));
|
||||
|
||||
setTimeout(() => {
|
||||
const btn = dialog.$wrapper.find("#pay_btn")[0];
|
||||
|
||||
// DO NOT clear anything — new IDs = fresh mount
|
||||
|
||||
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) {
|
||||
|
||||
const enteredName = document.getElementById(`cardholder_name_${uid}`)?.value;
|
||||
const enteredZip = document.getElementById(`billing_zip_${uid}`)?.value;
|
||||
|
||||
const finalName = enteredName || frm.doc.customer_name;
|
||||
const finalZip = enteredZip || frm.doc.billing_zip || frm.doc.pincode;
|
||||
|
||||
run_token_payment(frm, response.token, dialog, {
|
||||
cardholder_name: finalName,
|
||||
billing_zip: finalZip
|
||||
});
|
||||
|
||||
} else {
|
||||
frappe.msgprint("Payment failed to tokenize");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const btn = document.getElementById(`pay_btn_${uid}`);
|
||||
|
||||
if (!btn) {
|
||||
console.error("Pay button not found");
|
||||
@@ -200,8 +244,6 @@ function open_manual_payment_form(frm) {
|
||||
}
|
||||
|
||||
btn.onclick = function () {
|
||||
console.log("Pay clicked");
|
||||
|
||||
frappe.show_alert({
|
||||
message: "Processing payment...",
|
||||
indicator: "blue"
|
||||
@@ -209,23 +251,24 @@ function open_manual_payment_form(frm) {
|
||||
|
||||
CollectJS.startPaymentRequest();
|
||||
};
|
||||
}, 300);
|
||||
|
||||
};
|
||||
}, 100);
|
||||
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function run_token_payment(frm, token, dialog) {
|
||||
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
|
||||
token: token,
|
||||
cardholder_name: extra_data.cardholder_name,
|
||||
billing_zip: extra_data.billing_zip
|
||||
},
|
||||
callback(r) {
|
||||
if (r.message?.success) {
|
||||
if (r.message?.success) {
|
||||
|
||||
frappe.confirm(
|
||||
"Payment successful. Save this card for AutoPay?",
|
||||
@@ -235,7 +278,9 @@ function run_token_payment(frm, token, dialog) {
|
||||
method: "ns_app.api.payments.save_to_autopay",
|
||||
args: {
|
||||
customer: frm.doc.customer,
|
||||
token: token
|
||||
token: token,
|
||||
cardholder_name: extra_data.cardholder_name,
|
||||
billing_zip: extra_data.billing_zip
|
||||
},
|
||||
callback(res) {
|
||||
if (res.message?.success) {
|
||||
@@ -266,4 +311,4 @@ function run_token_payment(frm, token, dialog) {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user