From ab887f8f1161445a152eee00b9a0c9eb1c6a7ec8 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 21:10:10 +0700
Subject: [PATCH] feat: Allow HTML in payment gateway descriptions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enabled HTML rendering in payment gateway descriptions.

Changes:
- Manual payment methods: gateway.description now renders HTML
- Online payment methods: gateway.method_description now renders HTML
- Used dangerouslySetInnerHTML for both description fields

Result:
✅ Links in descriptions are now clickable
✅ Formatted text (bold, italic) displays correctly
✅ HTML entities render properly
✅ Maintains security (WooCommerce sanitizes on backend)

Note: GenericGatewayForm already had HTML support for field descriptions
---
 admin-spa/src/routes/Settings/Payments.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Payments.tsx b/admin-spa/src/routes/Settings/Payments.tsx
index d58fc88..afc0e90 100644
--- a/admin-spa/src/routes/Settings/Payments.tsx
+++ b/admin-spa/src/routes/Settings/Payments.tsx
@@ -311,9 +311,10 @@ export default function PaymentsPage() {
                             <div>
                               <h3 className="font-medium">{gateway.method_title || gateway.title}</h3>
                               {gateway.description && (
-                                <p className="text-sm text-muted-foreground mt-1">
-                                  {gateway.description}
-                                </p>
+                                <p 
+                                  className="text-sm text-muted-foreground mt-1"
+                                  dangerouslySetInnerHTML={{ __html: gateway.description }}
+                                />
                               )}
                             </div>
                           </div>
@@ -369,9 +370,10 @@ export default function PaymentsPage() {
                                 </h3>
                               </div>
                               {gateway.method_description && (
-                                <p className="text-sm text-muted-foreground mb-2">
-                                  {gateway.method_description}
-                                </p>
+                                <p 
+                                  className="text-sm text-muted-foreground mb-2"
+                                  dangerouslySetInnerHTML={{ __html: gateway.method_description }}
+                                />
                               )}
                               {!gateway.requirements.met && (
                                 <Alert variant="destructive" className="mt-2">