feat(payment): support Indonesia QRIS checkout

2026-07-22 18:57:22 +08:00
parent a0b2d44ec6
commit 1e25279e8f
19 changed files with 806 additions and 42 deletions
@@ -7,6 +7,7 @@ import {
  getStripeClientSecret,
  isEzpayPayment,
  launchEzpayRedirect,
+  resolveEzpayLaunchTarget,
 } from "@/lib/payment/payment_launch";
 import { behaviorAnalytics } from "@/lib/analytics";
 import type {
@@ -46,15 +47,55 @@ export interface PaymentLaunchFlow {
  ezpayPaymentUrl: string | null;
  handleEzpayCancel: () => void;
  handleEzpayConfirm: () => void;
+  handleQrisClose: () => void;
  handleStripeClose: () => void;
  handleStripeConfirmed: () => void;
  isConfirmingEzpay: boolean;
+  qrisErrorMessage: string | null;
+  qrisPayment: QrisPaymentDetails | null;
+  qrisStatus: PaymentContextState["orderStatus"];
  resetLaunchState: () => void;
  shouldShowEzpayConfirmDialog: boolean;
+  shouldShowQrisDialog: boolean;
  shouldShowStripeDialog: boolean;
  stripeClientSecret: string | null;
 }

+export interface QrisPaymentDetails {
+  amountCents: number;
+  currency: string;
+  orderId: string;
+  qrData: string;
+}
+
+function paymentParamString(
+  payParams: Record<string, unknown>,
+  ...keys: string[]
+): string | null {
+  for (const key of keys) {
+    const value = payParams[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return null;
+}
+
+function paymentParamAmountCents(
+  payParams: Record<string, unknown>,
+): number | null {
+  for (const key of [
+    "firstChargeAmountCents",
+    "first_charge_amount_cents",
+    "amountCents",
+    "amount_cents",
+  ]) {
+    const value = payParams[key];
+    if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+      return value;
+    }
+  }
+  return null;
+}
+
 function trackPaymentCheckoutOpened(
  payment: PaymentContextState,
  checkoutUrl: string,
@@ -118,12 +159,40 @@ export function usePaymentLaunchFlow({
    string | null
  >(null);
  const [isConfirmingEzpay, setIsConfirmingEzpay] = useState(false);
+  const [hiddenQrisOrderId, setHiddenQrisOrderId] = useState<string | null>(
+    null,
+  );
  const stripeClientSecret = payment.payParams
    ? getStripeClientSecret(payment.payParams)
    : null;
-  const ezpayPaymentUrl = payment.payParams
-    ? getPaymentUrl(payment.payParams)
-    : null;
+  const ezpayLaunchTarget =
+    payment.payParams && isEzpayPayment(payment.payParams)
+      ? resolveEzpayLaunchTarget(payment.payParams)
+      : null;
+  const ezpayPaymentUrl =
+    ezpayLaunchTarget?.kind === "url"
+      ? ezpayLaunchTarget.paymentUrl
+      : null;
+  const selectedPlan = payment.plans.find(
+    (item) => item.planId === payment.selectedPlanId,
+  );
+  const qrisPayment: QrisPaymentDetails | null =
+    payment.payParams &&
+    payment.currentOrderId &&
+    ezpayLaunchTarget?.kind === "qr"
+      ? {
+          amountCents:
+            paymentParamAmountCents(payment.payParams) ??
+            selectedPlan?.amountCents ??
+            0,
+          currency:
+            paymentParamString(payment.payParams, "currency") ??
+            selectedPlan?.currency ??
+            "IDR",
+          orderId: payment.currentOrderId,
+          qrData: ezpayLaunchTarget.qrData,
+        }
+      : null;
  useEffect(() => {
    if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
      return;
@@ -136,11 +205,33 @@ export function usePaymentLaunchFlow({
      return;
    }

-    const paymentUrl = getPaymentUrl(payment.payParams);
-    if (paymentUrl) {
-      const isEzpay = isEzpayPayment(payment.payParams);
+    const isEzpay = isEzpayPayment(payment.payParams);
+    if (isEzpay) {
+      const target = resolveEzpayLaunchTarget(payment.payParams);
+      if (target.kind === "error") {
+        trackPaymentCheckoutFailed(payment, "missing_checkout_url");
+        paymentDispatch({
+          type: "PaymentLaunchFailed",
+          errorMessage: target.errorMessage,
+        });
+        return;
+      }

-      if (!AppEnvUtil.isProduction() && isEzpay) {
+      if (target.kind === "qr") {
+        if (!payment.currentOrderId) {
+          trackPaymentCheckoutFailed(payment, "missing_checkout_url");
+          paymentDispatch({
+            type: "PaymentLaunchFailed",
+            errorMessage: "Missing order id before showing QRIS.",
+          });
+          return;
+        }
+        trackPaymentCheckoutOpened(payment, "qris_embedded");
+        return;
+      }
+
+      const paymentUrl = target.paymentUrl;
+      if (!AppEnvUtil.isProduction()) {
        log.debug(`[${logScope}] ezpay confirmation required`, {
          orderId: payment.currentOrderId,
          paymentUrl,
@@ -149,24 +240,25 @@ export function usePaymentLaunchFlow({
        return;
      }

-      if (isEzpay) {
-        void launchEzpayRedirect({
-          orderId: payment.currentOrderId,
-          paymentUrl,
-          subscriptionType,
-          giftCategory,
-          giftPlanId,
-          ...(returnTo ? { returnTo } : {}),
-          ...(characterSlug ? { characterSlug } : {}),
-          onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
-          onFailed: (errorMessage) => {
-            trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
-            paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
-          },
-        });
-        return;
-      }
+      void launchEzpayRedirect({
+        orderId: payment.currentOrderId,
+        paymentUrl,
+        subscriptionType,
+        giftCategory,
+        giftPlanId,
+        ...(returnTo ? { returnTo } : {}),
+        ...(characterSlug ? { characterSlug } : {}),
+        onOpened: () => trackPaymentCheckoutOpened(payment, paymentUrl),
+        onFailed: (errorMessage) => {
+          trackPaymentCheckoutFailed(payment, "payment_redirect_failed");
+          paymentDispatch({ type: "PaymentLaunchFailed", errorMessage });
+        },
+      });
+      return;
+    }

+    const paymentUrl = getPaymentUrl(payment.payParams);
+    if (paymentUrl) {
      try {
        window.location.href = paymentUrl;
        trackPaymentCheckoutOpened(payment, paymentUrl);
@@ -213,10 +305,16 @@ export function usePaymentLaunchFlow({
    payParams: payment.payParams,
    paymentUrl: ezpayPaymentUrl,
  });
+  const shouldShowQrisDialog = Boolean(
+    qrisPayment &&
+      qrisPayment.orderId !== hiddenQrisOrderId &&
+      !payment.isPaid,
+  );

  function resetLaunchState(): void {
    setIsConfirmingEzpay(false);
    setHiddenStripeClientSecret(null);
+    setHiddenQrisOrderId(null);
  }

  function handleStripeClose(): void {
@@ -263,15 +361,28 @@ export function usePaymentLaunchFlow({
    paymentDispatch({ type: "PaymentReset" });
  }

+  function handleQrisClose(): void {
+    log.debug(`[${logScope}] qris dialog closed`, {
+      orderId: qrisPayment?.orderId ?? payment.currentOrderId,
+      subscriptionType,
+    });
+    setHiddenQrisOrderId(qrisPayment?.orderId ?? payment.currentOrderId);
+  }
+
  return {
    ezpayPaymentUrl,
    handleEzpayCancel,
    handleEzpayConfirm,
+    handleQrisClose,
    handleStripeClose,
    handleStripeConfirmed,
    isConfirmingEzpay,
+    qrisErrorMessage: payment.errorMessage,
+    qrisPayment,
+    qrisStatus: payment.orderStatus,
    resetLaunchState,
    shouldShowEzpayConfirmDialog,
+    shouldShowQrisDialog,
    shouldShowStripeDialog,
    stripeClientSecret,
  };