From 3aefbef259ddb55eea22ca320a426f9779328a5a Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Fri, 17 Jul 2026 18:32:37 +0800
Subject: [PATCH] feat(payment): show Stripe logo in method selector

---
 public/images/subscription/stripe-logo.svg          |  3 +++
 .../__tests__/payment-method-selector.test.tsx      |  2 ++
 .../_components/payment/payment-method-selector.tsx | 13 ++++++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 public/images/subscription/stripe-logo.svg

diff --git a/public/images/subscription/stripe-logo.svg b/public/images/subscription/stripe-logo.svg
new file mode 100644
index 00000000..e1fd0e12
--- /dev/null
+++ b/public/images/subscription/stripe-logo.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 468 222.5;" xml:space="preserve" viewBox="54 36 360.02 149.84"> <style type="text/css"> 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#635BFF;} </style> <g> 	<path class="st0" d="M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 		c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z 		 M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z"></path> 	<path class="st0" d="M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 		c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 		c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z"></path> 	<polygon class="st0" points="223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 	"></polygon> 	<rect x="223.8" y="69.3" class="st0" width="25.1" height="87.5"></rect> 	<path class="st0" d="M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z"></path> 	<path class="st0" d="M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 		c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z"></path> 	<path class="st0" d="M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 		C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 		c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z"></path> </g> </svg>
\ No newline at end of file
diff --git a/src/app/_components/payment/__tests__/payment-method-selector.test.tsx b/src/app/_components/payment/__tests__/payment-method-selector.test.tsx
index b8218137..0b9eef4d 100644
--- a/src/app/_components/payment/__tests__/payment-method-selector.test.tsx
+++ b/src/app/_components/payment/__tests__/payment-method-selector.test.tsx
@@ -35,6 +35,8 @@ describe("PaymentMethodSelector", () => {
     expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
     expect(selectedButton).toContain("-translate-y-0.5");
     expect(html).toContain("/images/subscription/gcash-logo.svg");
+    expect(html).toContain("/images/subscription/stripe-logo.svg");
+    expect(html).not.toContain(">Stripe</span>");
   });
 
   it("disables both payment methods while payment is busy", () => {
diff --git a/src/app/_components/payment/payment-method-selector.tsx b/src/app/_components/payment/payment-method-selector.tsx
index 5064446c..74adedba 100644
--- a/src/app/_components/payment/payment-method-selector.tsx
+++ b/src/app/_components/payment/payment-method-selector.tsx
@@ -8,15 +8,22 @@ const PAYMENT_METHODS: readonly {
   channel: PayChannel;
   title: string;
   logoSrc?: string;
+  logoWidth?: number;
+  logoHeight?: number;
 }[] = [
   {
     channel: "stripe",
     title: "Stripe",
+    logoSrc: "/images/subscription/stripe-logo.svg",
+    logoWidth: 360,
+    logoHeight: 150,
   },
   {
     channel: "ezpay",
     title: "GCash",
     logoSrc: "/images/subscription/gcash-logo.svg",
+    logoWidth: 122,
+    logoHeight: 29,
   },
 ];
 
@@ -85,13 +92,13 @@ export function PaymentMethodSelector({
               aria-label={method.title}
               onClick={() => onChange(method.channel)}
             >
-              {method.logoSrc ? (
+              {method.logoSrc && method.logoWidth && method.logoHeight ? (
                 <Image
                   src={method.logoSrc}
                   alt=""
                   aria-hidden="true"
-                  width={122}
-                  height={29}
+                  width={method.logoWidth}
+                  height={method.logoHeight}
                   className="block max-h-8.5 w-[min(100%,92px)] object-contain"
                 />
               ) : (