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 @@ + + + \ 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"); }); 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 ? ( ) : (