feat(payment): support Indonesia QRIS checkout

src/app/_components/payment/__tests__/payment-launch-dialogs.test.tsx

@@ -6,10 +6,15 @@ import { PaymentLaunchDialogs } from "../payment-launch-dialogs";
 const hiddenLaunch = {
   handleEzpayCancel: vi.fn(),
   handleEzpayConfirm: vi.fn(),
+  handleQrisClose: vi.fn(),
   handleStripeClose: vi.fn(),
   handleStripeConfirmed: vi.fn(),
   isConfirmingEzpay: false,
+  qrisErrorMessage: null,
+  qrisPayment: null,
+  qrisStatus: null,
   shouldShowEzpayConfirmDialog: false,
+  shouldShowQrisDialog: false,
   shouldShowStripeDialog: false,
   stripeClientSecret: null,
 };
@@ -43,10 +48,65 @@ describe("PaymentLaunchDialogs", () => {
     );
 
     expect(html).toContain('role="alertdialog"');
-    expect(html).toContain("Continue to GCash?");
+    expect(html).toContain("Continue to payment?");
     expect(html).toContain("Your coffee order is ready.");
     expect(html).toContain("Order No. order-123");
     expect(html).toContain('data-analytics-key="tip.external_checkout"');
     expect(html).toContain("Opening...");
   });
+
+  it("renders an accessible QRIS dialog with display cents and order status", () => {
+    const html = renderToStaticMarkup(
+      <PaymentLaunchDialogs
+        currentOrderId="order-id-qris"
+        externalCheckoutAnalyticsKey="tip.external_checkout"
+        ezpayDescription="Scan QRIS to finish the payment."
+        launch={{
+          ...hiddenLaunch,
+          qrisPayment: {
+            qrData: "00020101021226670016COM.NOBUBANK.WWW",
+            orderId: "order-id-qris",
+            amountCents: 5_000_000,
+            currency: "IDR",
+          },
+          qrisStatus: "pending",
+          shouldShowQrisDialog: true,
+        }}
+      />,
+    );
+
+    expect(html).toContain('role="dialog"');
+    expect(html).toContain("Scan to pay with QRIS");
+    expect(html).toContain("QRIS payment QR code");
+    expect(html).toContain("Order No. order-id-qris");
+    expect(html).toContain("Rp");
+    expect(html).toContain("50.000");
+    expect(html).toContain("Waiting for payment");
+  });
+
+  it("shows QRIS failure state and handles empty QR data safely", () => {
+    const html = renderToStaticMarkup(
+      <PaymentLaunchDialogs
+        currentOrderId="order-id-qris"
+        externalCheckoutAnalyticsKey="payment.external_checkout"
+        ezpayDescription="Scan QRIS to finish the payment."
+        launch={{
+          ...hiddenLaunch,
+          qrisErrorMessage: "Payment failed or was cancelled.",
+          qrisPayment: {
+            qrData: "",
+            orderId: "order-id-qris",
+            amountCents: 5_000_000,
+            currency: "IDR",
+          },
+          qrisStatus: "failed",
+          shouldShowQrisDialog: true,
+        }}
+      />,
+    );
+
+    expect(html).toContain("QRIS data is unavailable");
+    expect(html).toContain("Payment failed or was cancelled.");
+    expect(html).toContain("Close");
+  });
 });

src/app/_components/payment/__tests__/payment-method-selector.test.tsx

@@ -62,6 +62,27 @@ describe("PaymentMethodSelector", () => {
     );
   });
 
+  it("labels Indonesia Ezpay as QRIS without the GCash logo", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "ezpay",
+          showPaymentMethodSelector: true,
+          ezpayDisplayName: "QRIS",
+        }}
+        value="ezpay"
+        caption="QRIS by default in Indonesia"
+        analyticsKey="subscription.payment_method"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('aria-label="QRIS"');
+    expect(html).toContain("QRIS by default in Indonesia");
+    expect(html).not.toContain("gcash-logo.svg");
+  });
+
   it("renders compact controls without the caption", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector

src/app/_components/payment/payment-launch-dialogs.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useId, type ReactNode } from "react";
+import { QRCodeSVG } from "qrcode.react";
 
 import type { PaymentLaunchFlow } from "@/app/_hooks/use-payment-launch-flow";
 
@@ -11,10 +12,15 @@ type PaymentLaunchDialogFlow = Pick<
   PaymentLaunchFlow,
   | "handleEzpayCancel"
   | "handleEzpayConfirm"
+  | "handleQrisClose"
   | "handleStripeClose"
   | "handleStripeConfirmed"
   | "isConfirmingEzpay"
+  | "qrisErrorMessage"
+  | "qrisPayment"
+  | "qrisStatus"
   | "shouldShowEzpayConfirmDialog"
+  | "shouldShowQrisDialog"
   | "shouldShowStripeDialog"
   | "stripeClientSecret"
 >;
@@ -46,6 +52,14 @@ export function PaymentLaunchDialogs({
           onConfirm={launch.handleEzpayConfirm}
         />
       ) : null}
+      {launch.shouldShowQrisDialog && launch.qrisPayment ? (
+        <QrisPaymentDialog
+          payment={launch.qrisPayment}
+          status={launch.qrisStatus}
+          errorMessage={launch.qrisErrorMessage}
+          onClose={launch.handleQrisClose}
+        />
+      ) : null}
       {launch.shouldShowStripeDialog && launch.stripeClientSecret ? (
         <LazyStripePaymentDialog
           clientSecret={launch.stripeClientSecret}
@@ -58,6 +72,102 @@ export function PaymentLaunchDialogs({
   );
 }
 
+interface QrisPaymentDialogProps {
+  errorMessage: string | null;
+  onClose: () => void;
+  payment: NonNullable<PaymentLaunchFlow["qrisPayment"]>;
+  status: PaymentLaunchFlow["qrisStatus"];
+}
+
+function formatQrisAmount(amountCents: number, currency: string): string {
+  const normalizedCurrency = currency.trim().toUpperCase() || "IDR";
+  try {
+    return new Intl.NumberFormat("id-ID", {
+      style: "currency",
+      currency: normalizedCurrency,
+      maximumFractionDigits: normalizedCurrency === "IDR" ? 0 : 2,
+    }).format(amountCents / 100);
+  } catch {
+    return `${normalizedCurrency} ${(amountCents / 100).toFixed(2)}`;
+  }
+}
+
+function qrisStatusMessage(
+  status: PaymentLaunchFlow["qrisStatus"],
+  errorMessage: string | null,
+): string {
+  if (status === "failed") return errorMessage || "Payment failed. Please try again.";
+  if (status === "expired") return errorMessage || "This QRIS order has expired.";
+  return "Waiting for payment";
+}
+
+function QrisPaymentDialog({
+  errorMessage,
+  onClose,
+  payment,
+  status,
+}: QrisPaymentDialogProps) {
+  const titleId = useId();
+  const statusMessage = qrisStatusMessage(status, errorMessage);
+
+  return (
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className={styles.dialog}>
+        <div className={`${styles.header} text-center`}>
+          <h2 id={titleId} className={styles.title}>
+            Scan to pay with QRIS
+          </h2>
+          <p className={styles.content}>
+            Open a QRIS-compatible banking or wallet app and scan this code.
+          </p>
+        </div>
+        <div className="mb-4 flex min-h-64 items-center justify-center rounded-2xl bg-white p-4">
+          {payment.qrData ? (
+            <QRCodeSVG
+              value={payment.qrData}
+              title="QRIS payment QR code"
+              size={256}
+              level="M"
+              marginSize={2}
+              className="h-auto w-full max-w-64"
+            />
+          ) : (
+            <p className={styles.error} role="alert">
+              QRIS data is unavailable. Please close this dialog and try again.
+            </p>
+          )}
+        </div>
+        <div className="mb-4 flex flex-col gap-2 text-center">
+          <p className={styles.content}>Order No. {payment.orderId}</p>
+          <p className="m-0 text-xl font-bold text-text-foreground">
+            {formatQrisAmount(payment.amountCents, payment.currency)}
+          </p>
+          <p
+            className={status === "failed" || status === "expired" ? styles.error : styles.content}
+            role="status"
+          >
+            {statusMessage}
+          </p>
+        </div>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.secondary}`}
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 interface EzpayRedirectConfirmDialogProps {
   description: ReactNode;
   externalCheckoutAnalyticsKey: string;
@@ -87,7 +197,7 @@ function EzpayRedirectConfirmDialog({
       <div className={styles.dialog}>
         <div className={styles.header}>
           <h2 id={titleId} className={styles.title}>
-            Continue to GCash?
+            Continue to payment?
           </h2>
           <p className={styles.content}>{description}</p>
           <p className={styles.content}>Order No. {orderId}</p>

src/app/_components/payment/payment-method-selector.tsx

@@ -44,13 +44,24 @@ export function PaymentMethodSelector({
 }: PaymentMethodSelectorProps) {
   if (!config.showPaymentMethodSelector) return null;
   const isCompact = density === "compact";
+  const ezpayDisplayName = config.ezpayDisplayName ?? "GCash";
+  const configuredPaymentMethods = PAYMENT_METHODS.map((method) =>
+    method.channel === "ezpay"
+      ? {
+          ...method,
+          title: ezpayDisplayName,
+          logoSrc:
+            ezpayDisplayName === "GCash" ? method.logoSrc : undefined,
+        }
+      : method,
+  );
 
   const paymentMethods =
     config.initialPayChannel === "ezpay"
-      ? [...PAYMENT_METHODS].sort((a, b) =>
+      ? [...configuredPaymentMethods].sort((a, b) =>
           a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
         )
-      : PAYMENT_METHODS;
+      : configuredPaymentMethods;
 
   return (
     <section