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 ? (
) : (