Offline Payment Processing Request Form

Offline Payment Processing Request

Customer Information
Payment Details
$
Authorization

Request Submitted Successfully!

You can now download the request summary as a PDF.

`; statusMessage.classList.remove('hidden'); document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf); }; const generatePdf = () => { if (!formData) return; const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const docWidth = doc.internal.pageSize.getWidth(); // --- PDF DESIGN --- // Header doc.setFillColor(31, 41, 55); // gray-800 doc.rect(0, 0, docWidth, 80, 'F'); doc.setFontSize(24); doc.setTextColor(255, 255, 255); doc.setFont('helvetica', 'bold'); doc.text("Offline Payment Request", 40, 40); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); doc.text(`Ref #: ${formData.referenceNumber}`, 40, 60); let yPos = 120; // Subheader doc.setFontSize(11); doc.setTextColor(100); doc.text(`Request Date: ${formData.requestDate}`, docWidth - 40, yPos, { align: 'right' }); doc.text(`Requested By: ${formData.authorizingPerson}`, 40, yPos); yPos += 30; doc.setLineWidth(0.5); doc.line(40, yPos, docWidth - 40, yPos); yPos += 30; // Customer Info Table doc.setFontSize(14); doc.setTextColor(30); doc.setFont('helvetica', 'bold'); doc.text("Customer Information", 40, yPos); yPos += 15; doc.autoTable({ startY: yPos, theme: 'plain', body: [ ['Customer Name:', formData.customerName], ['Email Address:', formData.customerEmail], ], styles: { fontSize: 11, cellPadding: 6 }, columnStyles: { 0: { fontStyle: 'bold' } } }); yPos = doc.autoTable.previous.finalY + 30; // Payment Details Table doc.setFontSize(14); doc.text("Payment Details", 40, yPos); yPos += 15; doc.autoTable({ startY: yPos, theme: 'plain', body: [ ['Payment Amount:', `$${formData.paymentAmount} USD`], ['Payment Method:', formData.paymentMethod], ['Reason / Invoice #:', formData.paymentReason], ], styles: { fontSize: 11, cellPadding: 6 }, columnStyles: { 0: { fontStyle: 'bold' } } }); yPos = doc.autoTable.previous.finalY; // Footer / Signature Area const pageHeight = doc.internal.pageSize.getHeight(); const footerY = pageHeight - 100; doc.setLineWidth(1); doc.setDrawColor(150); doc.line(40, footerY, docWidth / 2 - 20, footerY); // Signature line doc.line(docWidth / 2 + 20, footerY, docWidth - 40, footerY); // Date line doc.setFontSize(10); doc.setTextColor(100); doc.text("Authorized Signature", 40, footerY + 15); doc.text("Date Processed", docWidth / 2 + 20, footerY + 15); doc.save(`PaymentRequest_${formData.referenceNumber}.pdf`); }; // --- EVENT LISTENERS --- form.addEventListener('submit', handleSubmit); // --- INITIALIZATION --- // Set default date to today const today = new Date().toISOString().split('T')[0]; requestDateInput.value = today; });
Scroll to Top