← All changes | templates/payment-section.php +135 -24 2.3.1 → 2.4.3 View file →

		@@ -7,12 +7,21 @@
7	7	* @package EasyInvoice
8	8	* @since 1.0.0
9	9	*/
10	10
	11	+if ( ! defined( 'ABSPATH' ) ) {
	12	+ exit;
	13	+}
11	14	// Get invoice data
12	15	$invoice_id = get_the_ID();
	16	+// The access token the AJAX calls below present back to the payment endpoints:
	17	+// the ?ik= from an emailed link, or whatever another proof of access (a signed
	18	+// secure link) supplies through the filter.
	19	+/** This filter is documented in includes/Controllers/InvoiceController.php */
	20	+$ei_ps_access_token = (string) apply_filters('easy_invoice_presented_access_token', isset($_GET['ik']) ? sanitize_text_field(wp_unslash($_GET['ik'])) : '', 'invoice'); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
13	21	$invoice = new \EasyInvoice\Models\Invoice(get_post($invoice_id));
14		-$total_amount = $invoice->getTotal();
	22	+// What is owed now: total less payments received and credit notes.
	23	+$total_amount = \EasyInvoice\Services\InvoiceBalance::due($invoice);
15	24	$currency_code = $invoice->getCurrencyCode() ?: 'USD';
16	25
17	26	// If currency is "global", use the global setting
18	27	if ($currency_code === 'global') {
		@@ -29,13 +38,48 @@
29	38	$payment_nonce = wp_create_nonce('easy_invoice_payment');
30	39
31	40
32	41	?>
	42	+<?php
	43	+if (!function_exists('easy_invoice_payment_icon')) {
	44	+ /**
	45	+ * An inline icon for a payment method. The public page loads no icon
	46	+ * font, so Font Awesome class names rendered as empty boxes; a gateway
	47	+ * may still hand over an image URL.
	48	+ *
	49	+ * @param string $gateway_id Gateway id.
	50	+ * @param string $icon Icon the gateway declared (class name or URL).
	51	+ * @return string HTML.
	52	+ */
	53	+ function easy_invoice_payment_icon(string $gateway_id, string $icon = ''): string {
	54	+ if ('' !== $icon && preg_match('#^(https?:)?//|^/#', $icon)) {
	55	+ return '<img src="' . esc_url($icon) . '" alt="" style="width:22px;height:22px;object-fit:contain;">';
	56	+ }
	57	+ $a = 'width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"';
	58	+ $paths = [
	59	+ 'bank' => '<path d="M3 10h18M5 10v9M9 10v9M15 10v9M19 10v9M2 19h20M12 3l9 6H3l9-6z"/>',
	60	+ 'cheque' => '<rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h6M7 14h3M15 14h2"/>',
	61	+ 'cash' => '<rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 9h.01M18 15h.01"/>',
	62	+ 'card' => '<rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/>',
	63	+ 'wallet' => '<path d="M3 7a2 2 0 0 1 2-2h14v4"/><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M16 13h.01"/>',
	64	+ ];
	65	+ $id = strtolower($gateway_id);
	66	+ $key = 'card';
	67	+ if (isset($paths[strtolower($icon)])) { $key = strtolower($icon); }
	68	+ elseif (false !== strpos($id, 'bank') || false !== strpos($id, 'transfer') || false !== strpos($id, 'wire')) { $key = 'bank'; }
	69	+ elseif (false !== strpos($id, 'cheque') || false !== strpos($id, 'check')) { $key = 'cheque'; }
	70	+ elseif (false !== strpos($id, 'cash')) { $key = 'cash'; }
	71	+ elseif (false !== strpos($id, 'paypal') || false !== strpos($id, 'paystack') || false !== strpos($id, 'mollie')) { $key = 'wallet'; }
	72	+ return '<svg ' . $a . '>' . $paths[$key] . '</svg>';
	73	+ }
	74	+}
	75	+?>
33	76
	77	+
34	78	<div class="easy-invoice-payment-sidebar">
35	79	<div class="payment-header">
36	80	<div class="header-content">
37		- <h2><?php _e('Payment', 'easy-invoice'); ?></h2>
	81	+ <h2><?php esc_html_e('Payment', 'easy-invoice'); ?></h2>
38	82	<div class="invoice-summary">
39	83	<span class="invoice-number"><?php echo esc_html($invoice->getNumber()); ?></span>
40	84	<span class="invoice-date"><?php echo esc_html(date_i18n('M j, Y', strtotime($invoice->getIssueDate()))); ?></span>
41	85	</div>
		@@ -41,11 +85,11 @@
41	85	</div>
42	86	</div>
43	87
44	88	<div class="amount-display">
45		- <div class="amount-label"><?php _e('Total Amount', 'easy-invoice'); ?></div>
	89	+ <div class="amount-label"><?php echo esc_html((float) $invoice->getTotal() - $total_amount > 0.005 ? __('Amount Due', 'easy-invoice') : __('Total Amount', 'easy-invoice')); ?></div>
46	90	<div class="amount-value">
47		- <?php echo esc_html($currency_symbol . number_format($total_amount, 2)); ?>
	91	+ <?php echo esc_html(easy_invoice_format_money($total_amount, $invoice)); ?>
48	92	</div>
49	93	</div>
50	94	</div>
51	95
		@@ -52,12 +96,12 @@
52	96	<?php if (empty($available_gateways)): ?>
53	97	<div class="no-payment-methods">
54	98	<div class="empty-state">
55	99	<div class="empty-icon">
56		- <i class="fas fa-credit-card"></i>
	100	+ <?php echo easy_invoice_payment_icon('card'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
57	101	</div>
58		- <h3><?php _e('No Payment Methods', 'easy-invoice'); ?></h3>
59		- <p><?php _e('Payment methods are not configured for this invoice.', 'easy-invoice'); ?></p>
	102	+ <h3><?php esc_html_e('No Payment Methods', 'easy-invoice'); ?></h3>
	103	+ <p><?php esc_html_e('Payment methods are not configured for this invoice.', 'easy-invoice'); ?></p>
60	104	</div>
61	105	</div>
62	106	<?php else: ?>
63	107	<form id="easy-invoice-payment-form" class="payment-form">
		@@ -75,9 +119,9 @@
75	119
76	120	?>
77	121
78	122	<div class="payment-methods">
79		- <label class="section-label"><?php _e('Payment Method', 'easy-invoice'); ?></label>
	123	+ <label class="section-label"><?php esc_html_e('Payment Method', 'easy-invoice'); ?></label>
80	124
81	125	<div class="method-options">
82	126	<?php foreach ($available_gateways as $gateway): ?>
83	127	<div class="method-option" data-gateway="<?php echo esc_attr($gateway['id']); ?>">
		@@ -89,13 +133,9 @@
89	133
90	134	<label for="payment_method_<?php echo esc_attr($gateway['id']); ?>" class="method-label">
91	135	<div class="method-content">
92	136	<div class="method-icon">
93		- <?php if (!empty($gateway['icon'])): ?>
94		- <i class="<?php echo esc_attr($gateway['icon']); ?>"></i>
95		- <?php else: ?>
96		- <i class="fas fa-credit-card"></i>
97		- <?php endif; ?>
	137	+ <?php echo easy_invoice_payment_icon((string) $gateway['id'], (string) ($gateway['icon'] ?? '')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- inline SVG / escaped img. ?>
98	138	</div>
99	139
100	140	<div class="method-details">
101	141	<div class="method-name"><?php echo esc_html($gateway['title']); ?></div>
		@@ -119,18 +159,18 @@
119	159	<div class="message-area" id="payment-message-area"></div>
120	160
121	161	<div class="submit-section">
122	162	<button type="submit" id="pay-now-button" class="submit-button" disabled>
123		- <span class="button-text"><?php _e('Pay', 'easy-invoice'); ?> <?php echo esc_html($currency_symbol . number_format($total_amount, 2)); ?></span>
	163	+ <span class="button-text"><?php esc_html_e('Pay', 'easy-invoice'); ?> <?php echo esc_html(easy_invoice_format_money($total_amount, $invoice)); ?></span>
124	164	<div class="button-loader hidden">
125	165	<div class="loader"></div>
126		- <span><?php _e('Processing...', 'easy-invoice'); ?></span>
	166	+ <span><?php esc_html_e('Processing...', 'easy-invoice'); ?></span>
127	167	</div>
128	168	</button>
129	169
130	170	<div class="security-note">
131		- <i class="fas fa-lock"></i>
132		- <span><?php _e('Your payment is secure and encrypted', 'easy-invoice'); ?></span>
	171	+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-2px;margin-right:4px;"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
	172	+ <span><?php esc_html_e('Your payment is secure and encrypted', 'easy-invoice'); ?></span>
133	173	</div>
134	174	</div>
135	175	</form>
136	176	<?php endif; ?>
		@@ -317,8 +357,24 @@
317	357	margin-top: 8px;
318	358	font-size: 13px;
319	359	}
320	360
	361	+.gateway-content .ei-offline h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #111827; }
	362	+.gateway-content .ei-offline__details { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
	363	+.gateway-content .ei-offline__details th { text-align: left; padding: 6px 8px 6px 0; color: #6b7280; font-weight: 500; width: 40%; vertical-align: top; }
	364	+.gateway-content .ei-offline__details td { padding: 6px 0; color: #111827; font-weight: 600; word-break: break-word; }
	365	+.gateway-content .ei-offline__instructions { font-size: 13px; color: #374151; line-height: 1.5; margin-bottom: 10px; }
	366	+.gateway-content .ei-offline__instructions p { margin: 0 0 8px; }
	367	+.gateway-content .ei-offline__form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
	368	+.gateway-content .ei-offline__lead { font-size: 13px; color: #374151; margin: 0 0 10px; }
	369	+.gateway-content .ei-offline__form .form-group { margin-bottom: 12px; }
	370	+.gateway-content .ei-offline__form label { display: block; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 4px; }
	371	+.gateway-content .ei-offline__optional { font-weight: 400; color: #6b7280; }
	372	+.gateway-content .ei-offline__required { color: #dc2626; }
	373	+.gateway-content .ei-offline__form input[type="text"],
	374	+.gateway-content .ei-offline__form textarea { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; background: #fff; }
	375	+.gateway-content .ei-offline__form input[type="file"] { display: block; width: 100%; font-size: 13px; color: #374151; }
	376	+.gateway-content .ei-offline__form .reference-note { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
321	377	.gateway-content .payment-proof-form {
322	378	margin-top: 24px;
323	379	padding-top: 20px;
324	380	border-top: 1px solid #e5e7eb;
		@@ -777,10 +833,14 @@
777	833	formData.append('action', 'easy_invoice_get_payment_instructions');
778	834	formData.append('gateway', gateway);
779	835	formData.append('invoice_id', document.querySelector('input[name="invoice_id"]').value);
780	836	formData.append('nonce', document.querySelector('input[name="payment_nonce"]').value);
	837	+ // Per-invoice access token from the emailed link (?ik=...); the server
	838	+ // authorises the request on it. Without it an anonymous client holding a
	839	+ // legitimate link could not load their own payment instructions.
	840	+ formData.append('access_token', <?php echo wp_json_encode($ei_ps_access_token); ?>);
781	841
782		- fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
	842	+ fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
783	843	method: 'POST',
784	844	body: formData
785	845	})
786	846	.then(response => {
		@@ -792,8 +852,9 @@
792	852	.then(response => {
793	853	if (response.success && response.data.instructions) {
794	854	contentDiv.innerHTML = response.data.instructions;
795	855	contentDiv.style.display = 'block';
	856	+ applyOfflineState(contentDiv);
796	857	} else {
797	858	contentDiv.style.display = 'none';
798	859	}
799	860	})
		@@ -808,10 +869,11 @@
808	869	formData.append('action', 'easy_invoice_get_payment_instructions');
809	870	formData.append('gateway', gateway);
810	871	formData.append('invoice_id', document.querySelector('input[name="invoice_id"]').value);
811	872	formData.append('nonce', document.querySelector('input[name="payment_nonce"]').value);
	873	+ formData.append('access_token', <?php echo wp_json_encode($ei_ps_access_token); ?>);
812	874
813		- fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
	875	+ fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
814	876	method: 'POST',
815	877	body: formData
816	878	})
817	879	.then(response => response.json())
		@@ -830,8 +892,23 @@
830	892	}
831	893
832	894
833	895
	896	+ // An offline method (bank transfer, cheque, cash, …) is not charged here:
	897	+ // the button becomes "Submit payment details" and a required receipt is
	898	+ // checked before anything is sent.
	899	+ window.eiOfflineSelected = false;
	900	+ function applyOfflineState(contentDiv) {
	901	+ var offline = contentDiv ? contentDiv.querySelector('[data-ei-offline]') : null;
	902	+ window.eiOfflineSelected = !!offline;
	903	+ if (!payButton || !payButton.querySelector('.button-text')) { return; }
	904	+ if (offline) {
	905	+ payButton.querySelector('.button-text').textContent = offline.getAttribute('data-ei-submit-label') || 'Submit payment details';
	906	+ } else {
	907	+ updatePayButtonText();
	908	+ }
	909	+ }
	910	+
834	911	function handlePaymentSubmit(e) {
835	912	e.preventDefault();
836	913	payButton.disabled = true;
837	914
		@@ -839,8 +916,17 @@
839	916	showPaymentMessage('Please select a payment method first.', 'error');
840	917	payButton.disabled = false;
841	918	return;
842	919	}
	920	+ if (window.eiOfflineSelected) {
	921	+ var required = paymentForm.querySelector('input[type="file"][data-ei-required]');
	922	+ if (required && !(required.files && required.files.length)) {
	923	+ showPaymentMessage(<?php echo wp_json_encode(__('Please attach your receipt or proof of payment.', 'easy-invoice')); ?>, 'error');
	924	+ payButton.disabled = false;
	925	+ required.focus();
	926	+ return;
	927	+ }
	928	+ }
843	929
844	930	// Show loading state
845	931	payButton.querySelector('.button-text').classList.add('hidden');
846	932	payButton.querySelector('.button-loader').classList.remove('hidden');
		@@ -853,11 +939,16 @@
853	939
854	940	function processStandardPayment() {
855	941	const formData = new FormData(paymentForm);
856	942	formData.append('payment_method', window.selectedGateway);
	943	+ // The per-invoice access token from the emailed link. processPayment()
	944	+ // authorises on it before anything else; without it a client who
	945	+ // arrived by their own link was refused with "Invalid invoice" the
	946	+ // moment they chose bank transfer, cheque or cash.
	947	+ formData.append('access_token', <?php echo wp_json_encode($ei_ps_access_token); ?>);
857	948
858	949	// Get AJAX URL from WordPress
859		- const ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
	950	+ const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
860	951
861	952	fetch(ajaxUrl, {
862	953	method: 'POST',
863	954	body: formData
		@@ -904,8 +995,17 @@
904	995	}, 1000);
905	996	return;
906	997	}
907	998
	999	+ if (data.offline) {
	1000	+ payButton.querySelector('.button-loader').classList.add('hidden');
	1001	+ payButton.querySelector('.button-text').classList.remove('hidden');
	1002	+ payButton.querySelector('.button-text').textContent = <?php echo wp_json_encode(__('Submitted', 'easy-invoice')); ?>;
	1003	+ payButton.disabled = true;
	1004	+ showPaymentMessage(data.message || 'Thank you — we will confirm your payment shortly.', 'success');
	1005	+ setTimeout(function () { window.location.reload(); }, 2500);
	1006	+ return;
	1007	+ }
908	1008	// For successful payments without redirect
909	1009	// Update button state
910	1010	payButton.querySelector('.button-text').textContent = 'Payment Successful!';
911	1011	payButton.querySelector('.button-loader').classList.add('hidden');
		@@ -932,9 +1032,8 @@
932	1032	}
933	1033
934	1034	messageArea.innerHTML = `
935	1035	<div class="payment-message ${type}">
936		- <i class="fas fa-${icon}"></i>
937	1036	${message}
938	1037	</div>
939	1038	`;
940	1039	}
		@@ -939,15 +1038,27 @@
939	1038	`;
940	1039	}
941	1040
942	1041	function updatePayButtonText() {
	1042	+ // No button when the panel has no payment methods to offer.
	1043	+ if (!payButton || !payButton.querySelector('.button-text')) { return; }
	1044	+ if (window.eiOfflineSelected) { return; }
943	1045	const hiddenPaymentAmount = document.getElementById('payment_amount');
944	1046	const paymentAmount = hiddenPaymentAmount ? hiddenPaymentAmount.value : '0';
945		- const currencySymbol = '<?php echo esc_js($currency_symbol); ?>';
	1047	+ const money = <?php echo wp_json_encode(easy_invoice_money_format_spec($invoice)); ?>;
	1048	+ const payLabel = <?php echo wp_json_encode(__('Pay', 'easy-invoice')); ?>;
946	1049
947	1050	if (paymentAmount && paymentAmount > 0) {
948		- const formattedAmount = parseFloat(paymentAmount).toFixed(2);
949		- payButton.querySelector('.button-text').textContent = `Pay ${currencySymbol}${formattedAmount}`;
	1051	+ // Same rules as the PHP formatter: separators, precision, symbol position.
	1052	+ const n = parseFloat(paymentAmount).toFixed(money.precision);
	1053	+ const [int, dec] = n.split('.');
	1054	+ const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, money.thousands);
	1055	+ const number = dec !== undefined ? grouped + money.decimal + dec : grouped;
	1056	+ const formatted = (money.position === 'after' || money.position === 'right') ? number + money.symbol
	1057	+ : (money.position === 'right_space') ? number + ' ' + money.symbol
	1058	+ : (money.position === 'left_space') ? money.symbol + ' ' + number
	1059	+ : money.symbol + number;
	1060	+ payButton.querySelector('.button-text').textContent = `${payLabel} ${formatted}`;
950	1061	} else {
951	1062	payButton.querySelector('.button-text').textContent = 'Pay';
952	1063	}
953	1064	}