feat(payment): show Stripe logo in method selector

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", () => {

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"
                 />
               ) : (