Merge pull request #1327 from Tria-plc/alpha

fix: ( supplementary-charges ) pay in the selected method's currency,…

apps/edr-passenger-api/src/modules/payments/internal-payments.controller.ts

@@ -58,6 +58,11 @@ export class InternalPaymentsController {
     if (request.referenceType === PaymentReferenceType.EXCESS_BAGGAGE) {
       return this.paymentsService.billQueryExcessBaggage(request.referenceId);
     }
+    if (request.referenceType === PaymentReferenceType.SUPPLEMENTARY_CHARGE) {
+      return this.paymentsService.billQuerySupplementaryCharge(
+        request.referenceId,
+      );
+    }
     return this.paymentsService.billQuery(request.referenceId);
   }
 }

apps/edr-passenger-api/src/modules/payments/payments.controller.ts

@@ -57,6 +57,18 @@ class WaiveSupplementaryChargeDto {
 class PaySupplementaryChargeDto {
   @ApiProperty({ enum: PaymentMethodTypeEnum, example: 'TELEBIRR' }) @IsEnum(PaymentMethodTypeEnum) method: PaymentMethodTypeEnum;
   @ApiPropertyOptional({ enum: ['web', 'mobile', 'inapp'], default: 'web' }) @IsOptional() @IsIn(['web', 'mobile', 'inapp']) platform?: PaymentPlatformDto;
+  @ApiPropertyOptional({
+    description:
+      'Payer account / mobile number. Required for the push-debit methods: CAC_BANK (the bank ' +
+      'SMSes a one-time password to it) and EBIRR (the wallet pushes a USSD PIN prompt to it).',
+    example: '77123456',
+  })
+  @IsOptional() @IsString() payerAccount?: string;
+}
+
+class ConfirmSupplementaryOtpDto {
+  @ApiProperty({ description: 'One-time password the payer received by SMS (CAC Bank).', example: '4530' })
+  @IsString() otp: string;
 }
 
 @ApiTags("Payment")
@@ -420,6 +432,52 @@ export class PaymentsController {
     return this.supplementaryService.getByToken(token);
   }
 
+  @Get('supplementary/by-token/:token/amount')
+  @SetMetadata('isPublic', true)
+  @ApiOperation({
+    summary: 'Quote a supplementary charge in a payment method’s settlement currency (public)',
+    description:
+      'Returns what the given method would debit, converted from the charge’s stored ETB amount ' +
+      'to that method’s settlement currency (WAAFI/DMONEY settle in DJF, CARD in USD, Ethiopian ' +
+      'wallets in ETB). The self-pay page quotes this before the payer commits; paying recomputes ' +
+      'it identically.',
+  })
+  @ApiQuery({ name: 'method', required: true, example: 'WAAFI' })
+  quoteSupplementaryAmount(
+    @Param('token') token: string,
+    @Query('method') method: string,
+  ) {
+    return this.supplementaryService.quoteAmount(token, method);
+  }
+
+  @Get('supplementary/by-token/:token/status')
+  @SetMetadata('isPublic', true)
+  @ApiOperation({
+    summary: 'Poll a supplementary charge’s settlement status (public)',
+    description:
+      'Reports the charge’s current status without the payability gate on the by-token lookup, ' +
+      'so a page can watch for settlement that happens out of band (a CBE bill paid at a branch, ' +
+      'or a redirect payment confirmed by webhook).',
+  })
+  getSupplementaryStatus(@Param('token') token: string) {
+    return this.supplementaryService.getStatus(token);
+  }
+
+  @Post('supplementary/by-token/:token/confirm')
+  @SetMetadata('isPublic', true)
+  @ApiOperation({
+    summary: 'Confirm an OTP-debit balance payment (CAC Bank, public — self-pay)',
+    description:
+      'Submits the one-time password the payer received by SMS. A wrong or expired OTP returns ' +
+      '400 and the payment stays open for retry.',
+  })
+  confirmSupplementaryOtp(
+    @Param('token') token: string,
+    @Body() dto: ConfirmSupplementaryOtpDto,
+  ) {
+    return this.supplementaryService.confirmOtp(token, dto.otp);
+  }
+
   @Post('supplementary/by-token/:token/pay')
   @SetMetadata('isPublic', true)
   @ApiOperation({ summary: 'Initiate payment for a supplementary charge (public — self-pay)' })
@@ -437,6 +495,7 @@ export class PaymentsController {
       dto.method,
       dto.platform,
       resolveAllowedOrigin(origin, referer, frontendBaseUrl),
+      dto.payerAccount,
     );
   }
 

apps/edr-passenger-api/src/modules/payments/payments.service.spec.ts

@@ -50,6 +50,10 @@ describe("PaymentsService", () => {
       findUnique: jest.fn(),
       update: jest.fn(),
     },
+    supplementaryCharge: {
+      findUnique: jest.fn(),
+      update: jest.fn(),
+    },
     currencyExchangeRate: {
       findFirst: jest.fn(),
     },
@@ -758,4 +762,76 @@ describe("PaymentsService", () => {
       ).resolves.toEqual({ stillPayable: false, reason: "NOT_FOUND" });
     });
   });
+  /**
+   * The live hop CBE makes while a teller is on the line, for a balance bill. Same
+   * double-payment guard as bookings and baggage: anything other than stillPayable=true makes
+   * CBE refuse the debit.
+   */
+  describe("billQuerySupplementaryCharge", () => {
+    const payable = {
+      id: "sc-1",
+      amountMinor: 100_000,
+      status: "PENDING",
+      expiresAt: new Date(Date.now() + 60 * 60 * 1000),
+      booking: {
+        bookingRef: "BAL-001",
+        seats: [{ leg: 1, passengerName: "Abebe Kebede" }],
+        passenger: { user: { fullName: "Account Holder" } },
+      },
+    };
+
+    it("reports a pending charge as payable, in ETB, with the passenger name", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue(payable);
+      const result = await service.billQuerySupplementaryCharge("sc-1");
+      expect(result).toMatchObject({
+        stillPayable: true,
+        currency: "ETB",
+        currentAmountMinor: 1000,
+        payerName: "Abebe Kebede",
+      });
+      expect(result.paymentReason).toContain("BAL-001");
+    });
+
+    it("refuses an already paid charge", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue({ ...payable, status: "PAID" });
+      await expect(service.billQuerySupplementaryCharge("sc-1")).resolves.toMatchObject({
+        stillPayable: false,
+        reason: "ALREADY_PAID",
+      });
+    });
+
+    it("refuses a waived charge", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue({ ...payable, status: "WAIVED" });
+      await expect(service.billQuerySupplementaryCharge("sc-1")).resolves.toMatchObject({
+        stillPayable: false,
+        reason: "CANCELLED",
+      });
+    });
+
+    it("refuses within the settle margin so a debit cannot land after expiry", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue({
+        ...payable,
+        expiresAt: new Date(Date.now() + 5_000),
+      });
+      await expect(service.billQuerySupplementaryCharge("sc-1")).resolves.toMatchObject({
+        stillPayable: false,
+        reason: "EXPIRED",
+      });
+    });
+
+    it("treats a null expiry as an open-ended debt, still payable", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue({ ...payable, expiresAt: null });
+      await expect(service.billQuerySupplementaryCharge("sc-1")).resolves.toMatchObject({
+        stillPayable: true,
+      });
+    });
+
+    it("reports NOT_FOUND for a bill whose charge is gone", async () => {
+      mockPrisma.supplementaryCharge.findUnique.mockResolvedValue(null);
+      await expect(service.billQuerySupplementaryCharge("sc-1")).resolves.toEqual({
+        stillPayable: false,
+        reason: "NOT_FOUND",
+      });
+    });
+  });
 });

apps/edr-passenger-api/src/modules/payments/payments.service.ts

@@ -611,6 +611,72 @@ export class PaymentsService {
     return { ...base, stillPayable: true, reason: null };
   }
 
+  /**
+   * Bill-query for a supplementary charge — the same live "still payable?" hop as bookings,
+   * against `SupplementaryCharge`. This is the double-payment guard for balance bills: once the
+   * charge is paid, waived or lapsed, CBE is told to refuse the debit.
+   *
+   * The charge's own 72-hour `expiresAt` is the deadline. It is nullable — a charge raised with
+   * no expiry is an open-ended debt and stays payable indefinitely, which is the intended reading
+   * of a null here rather than an immediate refusal.
+   */
+  async billQuerySupplementaryCharge(
+    chargeId: string,
+  ): Promise<BillQueryResponseDto> {
+    const charge = await this.prisma.supplementaryCharge.findUnique({
+      where: { id: chargeId },
+      include: {
+        booking: {
+          include: { seats: true, passenger: { include: { user: true } } },
+        },
+      },
+    });
+    // A bill reference we issued whose charge has since been deleted — a data problem, not a
+    // customer-facing cancellation.
+    if (!charge) return { stillPayable: false, reason: "NOT_FOUND" };
+
+    const base = {
+      payerName:
+        charge.booking?.seats?.find((s) => s.leg === 1)?.passengerName ??
+        charge.booking?.seats?.[0]?.passengerName ??
+        charge.booking?.passenger?.user?.fullName ??
+        null,
+      // The charge is raised in ETB and CBE settles ETB only, so no conversion applies.
+      currentAmountMinor: this.currencyService.displayMinorToChargeMajor(
+        charge.amountMinor,
+        "ETB",
+      ),
+      currency: "ETB",
+      // Rendered beside the amount on CBE's confirmation screen. The booking ref is on the
+      // passenger's ticket, so they can match the two before confirming.
+      paymentReason: `Outstanding balance — booking ${
+        charge.booking?.bookingRef ?? ""
+      }`.trim(),
+    };
+
+    if (charge.status === "PAID") {
+      return { ...base, stillPayable: false, reason: "ALREADY_PAID" };
+    }
+    // Staff wrote the balance off; from the payer's side the debt is gone.
+    if (charge.status === "WAIVED") {
+      return { ...base, stillPayable: false, reason: "CANCELLED" };
+    }
+    // Confirmed CBE debits land in seconds, but must not be accepted so close to the deadline
+    // that the sweep expires the intent before the capture is registered.
+    if (
+      charge.status === "EXPIRED" ||
+      (charge.expiresAt &&
+        charge.expiresAt.getTime() - PAYMENT_SETTLE_MARGIN_SECONDS * 1000 <
+          Date.now())
+    ) {
+      return { ...base, stillPayable: false, reason: "EXPIRED" };
+    }
+    if (charge.status !== "PENDING") {
+      return { ...base, stillPayable: false, reason: "NOT_PAYABLE" };
+    }
+    return { ...base, stillPayable: true, reason: null };
+  }
+
   /**
    * The booking's payment deadline, resolved exactly like the auto-cancel job: the booking's
    * origin-segment time and that stop's own check-in window, falling back to the route default.

apps/edr-passenger-api/src/modules/payments/supplementary-charges.service.ts

@@ -4,11 +4,35 @@ import { AuditService } from '../../common/audit.service';
 import { SmsClientService } from '../notifications/sms-client.service';
 import { EmailClientService } from '../notifications/email-client.service';
 import { PaymentClientService } from './payment-client.service';
-import { PaymentReferenceType, PaymentService as PaymentServiceEnum, ProviderMethod } from '@edr/types';
+import { CurrencyService } from '../currency/currency.service';
+import {
+  PaymentReferenceType,
+  PaymentService as PaymentServiceEnum,
+  ProviderMethod,
+  ProviderPaymentStatus,
+} from '@edr/types';
 import { PaymentPlatformDto } from './payments.dto';
+import { PaymentMethodType } from '@prisma/client';
 
 const CHARGE_TTL_MS = 72 * 60 * 60 * 1000; // 72 hours
 
+/**
+ * WALLET is an internal balance debit handled inside this app, not a provider — the payment
+ * microservice rejects it as one. Supplementary charges have no wallet path, so it is refused up
+ * front with a message the payer can act on rather than a 502 from the gateway layer.
+ */
+const UNSUPPORTED_METHODS = new Set<string>([PaymentMethodType.WALLET]);
+
+/**
+ * Push-debit methods charge an account we must be told up front — CAC Bank SMSes a one-time
+ * password to it, eBirr pushes a USSD PIN prompt to it. Neither opens a hosted page that could
+ * collect the number later (mirrors PaymentsService and ExcessBaggageService).
+ */
+const METHODS_REQUIRING_PAYER_ACCOUNT = new Set<string>([
+  PaymentMethodType.CAC_BANK,
+  PaymentMethodType.EBIRR,
+]);
+
 @Injectable()
 export class SupplementaryChargesService {
   private readonly logger = new Logger(SupplementaryChargesService.name);
@@ -19,6 +43,7 @@ export class SupplementaryChargesService {
     private smsClient: SmsClientService,
     private emailClient: EmailClientService,
     private paymentClient: PaymentClientService,
+    private currencyService: CurrencyService,
   ) {}
 
   async create(dto: {
@@ -117,14 +142,161 @@ export class SupplementaryChargesService {
     return updated;
   }
 
+  /**
+   * What the payer is actually charged when settling this charge with `method`.
+   *
+   * The charge is raised in ETB, but the selected method settles in its own currency — WAAFI and
+   * D-Money in DJF, CARD in USD, the Ethiopian wallets in ETB — recorded on the PaymentMethod row.
+   * The payment microservice is currency-agnostic and hands whatever it is given straight to the
+   * gateway, so the ETB->settlement conversion has to happen here or the provider is asked to
+   * debit an ETB number labelled as its own currency.
+   *
+   * Both the quote shown to the payer and the amount sent to the provider come through this one
+   * method, so the price on the button and the price debited cannot drift apart.
+   */
+  private async resolveChargeAmount(
+    charge: { amountMinor: number; currency: string },
+    method: string,
+  ): Promise<{ amount: number; currency: string }> {
+    if (UNSUPPORTED_METHODS.has(method)) {
+      throw new BadRequestException(
+        `${method} is not available for balance payments`,
+      );
+    }
+
+    const paymentMethod = await this.prisma.paymentMethod.findUnique({
+      where: { type: method as PaymentMethodType },
+    });
+    // CBE settles ETB only (docs/cbe/CBE_IMPLEMENTATION_PLAN.md D8) — never converted.
+    const chargeCurrency =
+      method === PaymentMethodType.CBE_BILL
+        ? 'ETB'
+        : (paymentMethod?.currency ?? charge.currency).toUpperCase();
+
+    // Applies the target currency's own precision — DJF rounds to whole francs, ETB/USD to cents.
+    const amount = await this.currencyService.convertMinorToChargeMajor(
+      charge.amountMinor,
+      charge.currency,
+      chargeCurrency,
+    );
+    return { amount, currency: chargeCurrency };
+  }
+
+  /**
+   * Price quote for the pay page: what `method` would debit, in that method's settlement
+   * currency. The payer sees this before committing, and pay() recomputes it the same way.
+   */
+  async quoteAmount(token: string, method: string) {
+    const charge = await this.getByToken(token);
+    const { amount, currency } = await this.resolveChargeAmount(charge, method);
+    return { chargeId: charge.id, method, currency, amount };
+  }
+
+  /**
+   * Bare status for the pay/result pages to poll. Unlike getByToken this does NOT reject a paid,
+   * expired or waived charge — reporting those states is the entire point. A CBE bill can settle
+   * long after the payer closed the tab, and redirect methods only converge when the settlement
+   * event lands, so the page needs something it can watch.
+   */
+  async getStatus(token: string) {
+    const charge = await this.prisma.supplementaryCharge.findUnique({
+      where: { paymentToken: token },
+      select: {
+        id: true,
+        status: true,
+        paidAt: true,
+        amountMinor: true,
+        currency: true,
+        expiresAt: true,
+      },
+    });
+    if (!charge) throw new NotFoundException('Payment link not found');
+    return {
+      chargeId: charge.id,
+      status: charge.status,
+      paid: charge.status === 'PAID',
+      paidAt: charge.paidAt,
+      amountMinor: charge.amountMinor,
+      currency: charge.currency,
+      expiresAt: charge.expiresAt,
+    };
+  }
+
+  /**
+   * Full_Name for CBE's confirmation screen — mandatory in its envelope. The traveller the balance
+   * is owed against: lead passenger on the booking, falling back to the account holder.
+   */
+  private async resolvePayerName(bookingId: string): Promise<string | null> {
+    const booking = await this.prisma.booking.findUnique({
+      where: { id: bookingId },
+      include: { seats: true, passenger: { include: { user: true } } },
+    });
+    if (!booking) return null;
+    return (
+      booking.seats?.find((s: any) => s.leg === 1)?.passengerName ??
+      booking.seats?.[0]?.passengerName ??
+      booking.passenger?.user?.fullName ??
+      null
+    );
+  }
+
+  /**
+   * Submit the one-time password for a COLLECT_OTP provider (CAC Bank). The bank SMSed it to the
+   * payerAccount given at pay(); this forwards it to the payment service and marks the charge paid
+   * when the debit settles. A wrong or expired OTP bubbles up as a 400 and the intent stays open,
+   * so the payer can simply re-enter it.
+   *
+   * Deliberately reads the charge directly rather than through getByToken: the bank is already
+   * holding a debit against this payer, and refusing to submit their OTP because the link TTL
+   * lapsed while they read the SMS would strand a payment that is mid-flight.
+   */
+  async confirmOtp(token: string, otp: string) {
+    const charge = await this.prisma.supplementaryCharge.findUnique({
+      where: { paymentToken: token },
+    });
+    if (!charge) throw new NotFoundException('Payment link not found');
+    if (charge.status === 'PAID') {
+      return { chargeId: charge.id, status: 'SUCCEEDED', alreadyPaid: true };
+    }
+
+    const snapshot = await this.paymentClient.getIntentByReference(
+      PaymentReferenceType.SUPPLEMENTARY_CHARGE,
+      charge.id,
+    );
+    if (!snapshot) {
+      throw new NotFoundException('No active payment to confirm for this charge');
+    }
+
+    const confirmed = await this.paymentClient.confirmOtp(
+      snapshot.intentId,
+      otp,
+    );
+    if (confirmed.status === ProviderPaymentStatus.SUCCEEDED) {
+      await this.markPaid(charge.id, confirmed.providerTxnId);
+    }
+
+    return {
+      chargeId: charge.id,
+      status: confirmed.status,
+      alreadyPaid: false,
+    };
+  }
+
   async pay(
     token: string,
     method: string,
     platform?: PaymentPlatformDto,
     requestOrigin?: string | null,
+    payerAccount?: string,
   ) {
     const charge = await this.getByToken(token); // validates status/expiry
 
+    if (METHODS_REQUIRING_PAYER_ACCOUNT.has(method) && !payerAccount?.trim()) {
+      throw new BadRequestException(
+        `payerAccount (mobile number) is required for ${method}`,
+      );
+    }
+
     const paymentMethod = method as ProviderMethod;
     // Self-pay links are opened on whichever portal domain the recipient used
     // (bookingedr.et vs passenger.edrsc.com), so the return pages must live on
@@ -135,15 +307,38 @@ export class SupplementaryChargesService {
     const returnUrl = `${portalUrl}/pay-balance/${token}/success`;
     const failureUrl = `${portalUrl}/pay-balance/${token}/failed`;
 
+    const { amount, currency } = await this.resolveChargeAmount(charge, method);
+
+    // CBE_BILL is inbound-only: no provider session is opened, the bill simply sits in CBE's
+    // system until someone pays it. It needs a real deadline and a payer name (Full_Name is
+    // mandatory in CBE's envelope) rather than the redirect flow's session semantics.
+    //
+    // Unlike an excess baggage charge (30-minute link TTL), this charge already carries a 72-hour
+    // deadline of its own, which is a sane bill lifetime — so it is passed straight through with
+    // no extension. That deadline is what stops the reconciliation sweep from expiring the intent
+    // early (CBE_IMPLEMENTATION_PLAN.md §6.4). A charge with no expiry at all yields no intent
+    // expiry either, which is correct: an open-ended debt backs an open-ended bill.
+    let payerName: string | undefined;
+    let expiresAt: string | undefined;
+    if (method === PaymentMethodType.CBE_BILL) {
+      expiresAt = charge.expiresAt?.toISOString();
+      payerName = (await this.resolvePayerName(charge.bookingId)) ?? undefined;
+    }
+
     const snapshot = await this.paymentClient.initiate({
       service: PaymentServiceEnum.PASSENGER,
       referenceType: PaymentReferenceType.SUPPLEMENTARY_CHARGE,
       referenceId: charge.id,
       orderRef: `SC-${charge.id.substring(0, 8)}`,
-      amountMinor: charge.amountMinor / 100,
+      // `amountMinor` is the contract's name but its value is MAJOR units — the provider layer
-      currency: charge.currency,
+      // charges it verbatim at the currency's own precision (see PaymentIntentSnapshot).
+      amountMinor: amount,
+      currency,
       provider: paymentMethod,
       platform,
+      payerAccount: payerAccount?.trim() || undefined,
+      payerName,
+      expiresAt,
       returnUrl,
       failureUrl,
     });

apps/edr-passenger-api/src/modules/payments/supplementary-charges.spec.ts

@@ -0,0 +1,245 @@
+import { BadRequestException } from '@nestjs/common';
+import { PaymentMethodType } from '@prisma/client';
+import { SupplementaryChargesService } from './supplementary-charges.service';
+import { CurrencyService } from '../currency/currency.service';
+
+/**
+ * A supplementary charge is raised in ETB, but each payment method settles in its own currency and
+ * the payment microservice forwards whatever it is given straight to the gateway. These cover the
+ * ETB->settlement conversion, plus the two methods that could not complete at all before: CAC Bank
+ * (OTP debit) and CBE (inbound bill).
+ */
+describe('SupplementaryChargesService — payment methods', () => {
+  const CHARGE_ID = 'sc-1';
+  const TOKEN = 'tok-1';
+
+  let prisma: Record<string, any>;
+  let paymentClient: Record<string, jest.Mock>;
+  let service: SupplementaryChargesService;
+  let charge: any;
+
+  const build = (rate?: { rate: number }) => {
+    charge = {
+      id: CHARGE_ID,
+      bookingId: 'booking-1',
+      amountMinor: 100_000,
+      currency: 'ETB',
+      status: 'PENDING',
+      expiresAt: new Date(Date.now() + 72 * 60 * 60 * 1000),
+      booking: { bookingRef: 'BAL-001' },
+    };
+    prisma = {
+      supplementaryCharge: {
+        findUnique: jest.fn().mockResolvedValue(charge),
+        update: jest.fn().mockResolvedValue({ ...charge, status: 'PAID' }),
+      },
+      booking: {
+        findUnique: jest.fn().mockResolvedValue({
+          seats: [{ leg: 1, passengerName: 'Abebe Kebede' }],
+          passenger: { user: { fullName: 'Account Holder' } },
+        }),
+      },
+      paymentMethod: { findUnique: jest.fn() },
+      currencyExchangeRate: {
+        findFirst: jest.fn().mockResolvedValue(rate ?? null),
+      },
+    };
+    paymentClient = {
+      initiate: jest.fn().mockResolvedValue({
+        intentId: 'intent-1',
+        status: 'REQUIRES_ACTION',
+        clientAction: { type: 'REDIRECT', url: 'https://gw.test/pay' },
+      }),
+      getIntentByReference: jest
+        .fn()
+        .mockResolvedValue({ intentId: 'intent-1', status: 'REQUIRES_ACTION' }),
+      confirmOtp: jest.fn().mockResolvedValue({
+        intentId: 'intent-1',
+        status: 'SUCCEEDED',
+        providerTxnId: 'CAC-77',
+      }),
+    };
+    service = new SupplementaryChargesService(
+      prisma as any,
+      { log: jest.fn() } as any,
+      {} as any,
+      {} as any,
+      paymentClient as any,
+      new CurrencyService(prisma as any),
+    );
+  };
+
+  const withMethod = (type: string, currency: string) =>
+    prisma.paymentMethod.findUnique.mockResolvedValue({ type, currency });
+
+  describe('currency', () => {
+    it('charges an Ethiopian wallet in ETB, unconverted', async () => {
+      build();
+      withMethod(PaymentMethodType.TELEBIRR, 'ETB');
+      const quote = await service.quoteAmount(TOKEN, PaymentMethodType.TELEBIRR);
+      expect(quote).toMatchObject({ currency: 'ETB', amount: 1000 });
+      expect(prisma.currencyExchangeRate.findFirst).not.toHaveBeenCalled();
+    });
+
+    it('converts to DJF and rounds to whole francs', async () => {
+      build({ rate: 3.25 });
+      withMethod(PaymentMethodType.DMONEY, 'DJF');
+      const quote = await service.quoteAmount(TOKEN, PaymentMethodType.DMONEY);
+      expect(quote).toMatchObject({ currency: 'DJF', amount: 3250 });
+      expect(Number.isInteger(quote.amount)).toBe(true);
+    });
+
+    it('sends the provider the converted amount, not the stored ETB total', async () => {
+      build({ rate: 0.018 });
+      withMethod(PaymentMethodType.CARD, 'USD');
+      await service.pay(TOKEN, PaymentMethodType.CARD, 'web' as any, null);
+      expect(paymentClient.initiate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          referenceType: 'SUPPLEMENTARY_CHARGE',
+          amountMinor: 18,
+          currency: 'USD',
+        }),
+      );
+    });
+
+    it('quotes and charges the same figure', async () => {
+      build({ rate: 3.25 });
+      withMethod(PaymentMethodType.WAAFI, 'DJF');
+      const quote = await service.quoteAmount(TOKEN, PaymentMethodType.WAAFI);
+      await service.pay(TOKEN, PaymentMethodType.WAAFI, 'web' as any, null);
+      const sent = paymentClient.initiate.mock.calls[0][0];
+      expect(quote.amount).toBe(sent.amountMinor);
+      expect(quote.currency).toBe(sent.currency);
+    });
+
+    it('refuses WALLET, which has no supplementary-charge path', async () => {
+      build();
+      await expect(
+        service.quoteAmount(TOKEN, PaymentMethodType.WALLET),
+      ).rejects.toBeInstanceOf(BadRequestException);
+      expect(paymentClient.initiate).not.toHaveBeenCalled();
+    });
+
+    it('fails closed when no exchange rate is configured', async () => {
+      build();
+      withMethod(PaymentMethodType.WAAFI, 'DJF');
+      await expect(
+        service.pay(TOKEN, PaymentMethodType.WAAFI, 'web' as any, null),
+      ).rejects.toBeInstanceOf(BadRequestException);
+      expect(paymentClient.initiate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('CAC Bank OTP debit', () => {
+    beforeEach(() => {
+      build({ rate: 3.25 });
+      withMethod(PaymentMethodType.CAC_BANK, 'DJF');
+    });
+
+    it('rejects pay() without a payer mobile', async () => {
+      await expect(
+        service.pay(TOKEN, PaymentMethodType.CAC_BANK, 'web' as any, null),
+      ).rejects.toBeInstanceOf(BadRequestException);
+      expect(paymentClient.initiate).not.toHaveBeenCalled();
+    });
+
+    it('forwards the trimmed payer mobile', async () => {
+      await service.pay(
+        TOKEN,
+        PaymentMethodType.CAC_BANK,
+        'web' as any,
+        null,
+        ' 77123456 ',
+      );
+      expect(paymentClient.initiate).toHaveBeenCalledWith(
+        expect.objectContaining({ payerAccount: '77123456', currency: 'DJF' }),
+      );
+    });
+
+    it('submits the OTP against the active intent and marks the charge paid', async () => {
+      const result = await service.confirmOtp(TOKEN, '4530');
+      expect(paymentClient.getIntentByReference).toHaveBeenCalledWith(
+        'SUPPLEMENTARY_CHARGE',
+        CHARGE_ID,
+      );
+      expect(paymentClient.confirmOtp).toHaveBeenCalledWith('intent-1', '4530');
+      expect(prisma.supplementaryCharge.update).toHaveBeenCalledWith(
+        expect.objectContaining({
+          data: expect.objectContaining({
+            status: 'PAID',
+            providerTxnId: 'CAC-77',
+          }),
+        }),
+      );
+      expect(result).toMatchObject({ status: 'SUCCEEDED', alreadyPaid: false });
+    });
+
+    it('leaves the charge unpaid when the OTP does not settle', async () => {
+      paymentClient.confirmOtp.mockResolvedValue({
+        intentId: 'intent-1',
+        status: 'REQUIRES_ACTION',
+      });
+      await service.confirmOtp(TOKEN, '0000');
+      expect(prisma.supplementaryCharge.update).not.toHaveBeenCalled();
+    });
+
+    it('is idempotent once already paid', async () => {
+      prisma.supplementaryCharge.findUnique.mockResolvedValue({
+        ...charge,
+        status: 'PAID',
+      });
+      await expect(service.confirmOtp(TOKEN, '4530')).resolves.toMatchObject({
+        alreadyPaid: true,
+      });
+      expect(paymentClient.confirmOtp).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('CBE bill', () => {
+    beforeEach(() => {
+      build({ rate: 3.25 });
+      withMethod(PaymentMethodType.CBE_BILL, 'DJF'); // misconfigured row must not win
+    });
+
+    it('forces ETB regardless of the PaymentMethod row', async () => {
+      const quote = await service.quoteAmount(TOKEN, PaymentMethodType.CBE_BILL);
+      expect(quote).toMatchObject({ currency: 'ETB', amount: 1000 });
+    });
+
+    it('passes the charge own 72h deadline as the intent expiry', async () => {
+      await service.pay(TOKEN, PaymentMethodType.CBE_BILL, 'web' as any, null);
+      const sent = paymentClient.initiate.mock.calls[0][0];
+      expect(sent.currency).toBe('ETB');
+      expect(sent.expiresAt).toBe(charge.expiresAt.toISOString());
+      // Comfortably longer than a browser-session TTL, so the sweep cannot kill the bill early.
+      expect(new Date(sent.expiresAt).getTime()).toBeGreaterThan(
+        Date.now() + 24 * 60 * 60 * 1000,
+      );
+    });
+
+    it('sends the lead passenger as Full_Name, which CBE requires', async () => {
+      await service.pay(TOKEN, PaymentMethodType.CBE_BILL, 'web' as any, null);
+      expect(paymentClient.initiate.mock.calls[0][0].payerName).toBe(
+        'Abebe Kebede',
+      );
+    });
+
+    it('leaves the intent expiry unset for an open-ended charge', async () => {
+      charge.expiresAt = null;
+      await service.pay(TOKEN, PaymentMethodType.CBE_BILL, 'web' as any, null);
+      expect(paymentClient.initiate.mock.calls[0][0].expiresAt).toBeUndefined();
+    });
+
+    it('reports a paid charge through getStatus without the payability gate', async () => {
+      prisma.supplementaryCharge.findUnique.mockResolvedValue({
+        ...charge,
+        status: 'PAID',
+        paidAt: new Date(),
+      });
+      await expect(service.getStatus(TOKEN)).resolves.toMatchObject({
+        status: 'PAID',
+        paid: true,
+      });
+    });
+  });
+});

apps/edr-passenger-web/portal/src/app/pay-balance/[token]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api-client";
@@ -8,7 +8,10 @@ import { resolvePaymentRedirectUrl } from "@/lib/payment-redirect";
 import { PaymentMethod } from "@/types";
 import {
   Loader2,
+  Check,
+  Copy,
   CreditCard,
+  KeyRound,
   Smartphone,
   Wallet,
   Landmark,
@@ -23,6 +26,28 @@ const getIconForMethod = (methodId: string) => {
   return Smartphone;
 };
 
+// WALLET is an internal balance debit with no supplementary-charge path — the API refuses it, so
+// it is never offered here.
+const UNSUPPORTED_METHODS = ["WALLET"];
+
+// Push-debit methods charge an account we must know before initiating: CAC Bank SMSes a one-time
+// password to it, eBirr pushes a USSD PIN prompt to it. Neither opens a hosted page that could
+// collect the number afterwards, so it is asked for up front.
+const requiresPayerMobile = (method: string | null) =>
+  method === "CAC_BANK" || method === "EBIRR";
+
+// DJF has no minor unit; ETB and USD are quoted to cents. Matches the API's charge-side rounding,
+// so the quote renders exactly the figure the provider will debit.
+const formatAmount = (amount: number, currency: string) =>
+  amount.toFixed(currency.toUpperCase() === "DJF" ? 0 : 2);
+
+interface AmountQuote {
+  chargeId: string;
+  method: string;
+  currency: string;
+  amount: number;
+}
+
 export default function PayBalancePage() {
   const { token } = useParams<{ token: string }>();
   const router = useRouter();
@@ -30,6 +55,26 @@ export default function PayBalancePage() {
   const [isProcessing, setIsProcessing] = useState(false);
   const [paymentError, setPaymentError] = useState<string | null>(null);
 
+  // Push-debit (CAC Bank / eBirr): collect the payer's mobile before initiating, then — for CAC —
+  // the OTP the bank SMSes to it.
+  const [phoneModalOpen, setPhoneModalOpen] = useState(false);
+  const [payerMobile, setPayerMobile] = useState("");
+  const [phoneError, setPhoneError] = useState<string | null>(null);
+  const [otpModalOpen, setOtpModalOpen] = useState(false);
+  const [otpCode, setOtpCode] = useState("");
+  const [otpMessage, setOtpMessage] = useState<string | null>(null);
+  const [otpError, setOtpError] = useState<string | null>(null);
+  const [pushMessage, setPushMessage] = useState<string | null>(null);
+
+  // CBE bill: no redirect and no OTP — the payer walks away with a bill number and pays it at a
+  // branch/app later, so the page shows the number and watches for settlement.
+  const [billAction, setBillAction] = useState<{
+    billReference: string;
+    instructions?: string;
+    expiresAt?: string;
+  } | null>(null);
+  const [billCopied, setBillCopied] = useState(false);
+
   const { data: charge, isLoading: loadingCharge, error: chargeError } = useQuery({
     queryKey: ["supplementary-charge", token],
     queryFn: () => apiClient.get<any>(`/payments/supplementary/by-token/${token}`),
@@ -45,18 +90,102 @@ export default function PayBalancePage() {
     enabled: !!charge,
   });
 
+  const availableMethods = useMemo(
+    () =>
+      paymentMethods.filter(
+        (m) => m.enabled && !UNSUPPORTED_METHODS.includes(m.type),
+      ),
+    [paymentMethods],
+  );
+
+  // The charge is raised in ETB; this is what it costs before a method is chosen.
+  const chargeCurrency = charge?.currency ?? "ETB";
+  const chargeAmount = useMemo(
+    () => Number(charge?.amountMinor ?? 0) / 100,
+    [charge],
+  );
+
+  // Each method settles in its own currency (WAAFI/DMONEY in DJF, CARD in USD, Ethiopian wallets
+  // in ETB), so the price has to be re-quoted server-side whenever the selection changes — the
+  // stored ETB amount is not what a Djiboutian wallet would debit.
+  const {
+    data: quote,
+    isFetching: fetchingQuote,
+    error: quoteError,
+  } = useQuery<AmountQuote>({
+    queryKey: ["supplementaryAmount", token, selectedMethod],
+    queryFn: () =>
+      apiClient.get<AmountQuote>(
+        `/payments/supplementary/by-token/${token}/amount?method=${selectedMethod}`,
+      ),
+    enabled: !!token && !!selectedMethod,
+    retry: false,
+    staleTime: 30_000,
+  });
+
+  // A quote is only usable once it belongs to the method currently selected — otherwise it is a
+  // leftover from the previous selection and would price the payment in the wrong currency.
+  const quoteReady = !fetchingQuote && quote?.method === selectedMethod;
+  const displayCurrency = selectedMethod ? (quote?.currency ?? "") : chargeCurrency;
+  const displayAmount = selectedMethod ? quote?.amount : chargeAmount;
+  const amountLabel =
+    quoteReady && displayAmount != null
+      ? `${displayCurrency} ${formatAmount(displayAmount, displayCurrency)}`
+      : !selectedMethod && displayAmount != null
+        ? `${chargeCurrency} ${formatAmount(displayAmount, chargeCurrency)}`
+        : null;
+
+  // Never let Pay fire against a price the payer has not been shown.
+  const awaitingQuote = !!selectedMethod && !quoteReady;
+
   const payMutation = useMutation({
-    mutationFn: (method: string) =>
+    mutationFn: (vars: { method: string; payerAccount?: string }) =>
       apiClient.post<any>(`/payments/supplementary/by-token/${token}/pay`, {
-        method,
+        method: vars.method,
         platform: "web",
+        ...(vars.payerAccount ? { payerAccount: vars.payerAccount } : {}),
       }),
     onSuccess: (data: any) => {
-      if (data?.clientAction?.type === "REDIRECT") {
+      const action = data?.clientAction;
-        window.location.href = resolvePaymentRedirectUrl(data.clientAction.url);
+
+      if (action?.type === "REDIRECT") {
+        window.location.href = resolvePaymentRedirectUrl(action.url);
         return;
       }
-      // Immediate success (e.g. wallet)
+
+      // CAC Bank: no redirect — the bank SMS'd an OTP. Collect it here and confirm.
+      if (action?.type === "COLLECT_OTP") {
+        setOtpMessage(action.message ?? "Enter the OTP sent to your phone");
+        setOtpCode("");
+        setOtpError(null);
+        setOtpModalOpen(true);
+        setIsProcessing(false);
+        return;
+      }
+
+      // CBE: the bill now exists in CBE's system. Nothing to navigate to — show the number.
+      if (action?.type === "SHOW_BILL_REFERENCE") {
+        setBillAction({
+          billReference: action.billReference,
+          instructions: action.instructions,
+          expiresAt: action.expiresAt,
+        });
+        setBillCopied(false);
+        setIsProcessing(false);
+        return;
+      }
+
+      // eBirr: the PIN prompt was pushed to the payer's handset; there is nothing to navigate to.
+      if (action?.type === "AWAIT_PUSH") {
+        setPushMessage(
+          action.message ??
+            `Approve the payment on your phone${action.payerAccountMasked ? ` (${action.payerAccountMasked})` : ""}.`,
+        );
+        setIsProcessing(false);
+        return;
+      }
+
+      // Immediate success
       router.push(`/pay-balance/${token}/success`);
     },
     onError: (err: any) => {
@@ -67,11 +196,90 @@ export default function PayBalancePage() {
     },
   });
 
-  const handlePay = () => {
+  // CAC Bank OTP confirmation. A 200 means the debit settled; a 400 is a wrong/expired OTP —
+  // keep the modal open so the payer can re-enter it (the intent stays open).
+  const otpMutation = useMutation({
+    mutationFn: (otp: string) =>
+      apiClient.post<any>(`/payments/supplementary/by-token/${token}/confirm`, { otp }),
+    onSuccess: () => {
+      setOtpModalOpen(false);
+      router.push(`/pay-balance/${token}/success`);
+    },
+    onError: (err: any) => {
+      setOtpError(
+        err?.response?.data?.message ??
+          err?.message ??
+          "Invalid or expired OTP. Please try again.",
+      );
+    },
+  });
+
+  const startPayment = (mobile?: string) => {
     if (!selectedMethod) return;
     setIsProcessing(true);
     setPaymentError(null);
-    payMutation.mutate(selectedMethod);
+    payMutation.mutate({
+      method: selectedMethod,
+      payerAccount: requiresPayerMobile(selectedMethod) ? mobile?.trim() : undefined,
+    });
+  };
+
+  const handlePay = () => {
+    if (!selectedMethod || awaitingQuote) return;
+    setPaymentError(null);
+
+    if (requiresPayerMobile(selectedMethod)) {
+      // Prefill with the number the charge was raised against, but leave it editable — the
+      // handset paying is often not the one the booking was made under.
+      if (!payerMobile.trim() && charge?.booking?.contactPhone) {
+        setPayerMobile(charge.booking.contactPhone);
+      }
+      setPhoneError(null);
+      setPhoneModalOpen(true);
+      return;
+    }
+
+    startPayment();
+  };
+
+  const submitPhone = () => {
+    if (!payerMobile.trim()) {
+      setPhoneError("Please enter your mobile number");
+      return;
+    }
+    setPhoneModalOpen(false);
+    startPayment(payerMobile);
+  };
+
+  // While a bill or a pushed PIN prompt is outstanding, watch the charge. Settlement happens
+  // server-side — a CBE teller, or the provider's webhook — so the browser has no other signal.
+  // Success is only ever claimed from this, never from a client-side guess.
+  const watching = !!billAction || !!pushMessage;
+  const { data: liveStatus } = useQuery<{ status: string; paid: boolean }>({
+    queryKey: ["supplementaryStatus", token],
+    queryFn: () =>
+      apiClient.get<{ status: string; paid: boolean }>(
+        `/payments/supplementary/by-token/${token}/status`,
+      ),
+    enabled: !!token && watching,
+    refetchInterval: 5_000,
+  });
+
+  useEffect(() => {
+    if (watching && liveStatus?.paid) {
+      router.push(`/pay-balance/${token}/success`);
+    }
+  }, [watching, liveStatus?.paid, router, token]);
+
+  const copyBillReference = async () => {
+    if (!billAction) return;
+    try {
+      await navigator.clipboard.writeText(billAction.billReference);
+      setBillCopied(true);
+      setTimeout(() => setBillCopied(false), 2000);
+    } catch {
+      /* clipboard unavailable — the number is still shown on screen */
+    }
   };
 
   if (loadingCharge) {
@@ -95,8 +303,6 @@ export default function PayBalancePage() {
     );
   }
 
-  const amountDisplay = (charge.amountMinor / 100).toFixed(2);
-  const currency = charge.currency ?? "ETB";
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-start justify-center px-4 py-10">
       <div className="w-full max-w-md space-y-4">
@@ -122,8 +328,25 @@ export default function PayBalancePage() {
           )}
           <div className="border-t border-gray-100 dark:border-gray-800 pt-3 flex justify-between items-center">
             <span className="font-bold text-gray-900 dark:text-gray-100">Amount due</span>
-            <span className="text-2xl font-bold text-primary">{currency} {amountDisplay}</span>
+            {amountLabel ? (
+              <span className="text-2xl font-bold text-primary">{amountLabel}</span>
+            ) : quoteError ? (
+              <span className="text-2xl font-bold text-gray-400">—</span>
+            ) : (
+              <Loader2 className="w-6 h-6 text-primary animate-spin" />
+            )}
           </div>
+          {selectedMethod && quoteReady && displayCurrency !== chargeCurrency && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 text-right">
+              Converted from {chargeCurrency} {formatAmount(chargeAmount, chargeCurrency)} at today&apos;s rate
+            </p>
+          )}
+          {quoteError && (
+            <p className="text-xs text-red-600 dark:text-red-400 text-right">
+              {(quoteError as any)?.response?.data?.message ??
+                "This payment method is unavailable right now. Please choose another."}
+            </p>
+          )}
         </div>
 
         {/* Payment methods */}
@@ -136,7 +359,7 @@ export default function PayBalancePage() {
             </div>
           ) : (
             <div className="space-y-2">
-              {paymentMethods.filter((m) => m.enabled).map((method) => {
+              {availableMethods.map((method) => {
                 const Icon = getIconForMethod(method.type);
                 const isSelected = selectedMethod === method.type;
                 return (
@@ -173,19 +396,180 @@ export default function PayBalancePage() {
 
         <button
           onClick={handlePay}
-          disabled={!selectedMethod || isProcessing}
+          disabled={!selectedMethod || isProcessing || awaitingQuote}
           className="btn-primary w-full py-3 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {isProcessing ? (
             <span className="flex items-center justify-center gap-2">
               <Loader2 className="w-4 h-4 animate-spin" /> Processing...
             </span>
+          ) : quoteError ? (
+            "Choose another payment method"
+          ) : awaitingQuote ? (
+            <span className="flex items-center justify-center gap-2">
+              <Loader2 className="w-4 h-4 animate-spin" /> Calculating amount...
+            </span>
           ) : (
-            `Pay ${currency} ${amountDisplay}`
+            `Pay ${amountLabel ?? ""}`.trim()
           )}
         </button>
 
         <p className="text-xs text-gray-400 dark:text-gray-500 text-center">🔒 Secure & encrypted payment</p>
+
+        {/* CBE bill — show the number; confirmation only ever comes from the status poll */}
+        {billAction && (
+          <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full shadow-2xl">
+              <div className="flex items-center gap-2 mb-1">
+                <Landmark className="w-5 h-5 text-primary" />
+                <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100">Pay at CBE</h3>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {billAction.instructions ??
+                  "Pay this bill at any CBE branch, the CBE Birr app, mobile banking or USSD."}
+              </p>
+              <div className="flex items-center justify-between gap-2 bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3">
+                <span className="font-mono text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100 select-all">
+                  {billAction.billReference}
+                </span>
+                <button
+                  onClick={copyBillReference}
+                  className="btn-secondary px-3 py-2 flex items-center gap-1 text-sm"
+                  title="Copy bill number"
+                >
+                  {billCopied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
+                  {billCopied ? "Copied" : "Copy"}
+                </button>
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-300 mt-3 space-y-1">
+                <p>
+                  Amount: <span className="font-semibold">ETB {formatAmount(chargeAmount, "ETB")}</span>
+                </p>
+                {billAction.expiresAt && (
+                  <p>
+                    Pay before:{" "}
+                    <span className="font-semibold">
+                      {new Date(billAction.expiresAt).toLocaleString()}
+                    </span>
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center gap-2 mt-4 text-xs text-gray-500 dark:text-gray-400">
+                <Loader2 className="w-4 h-4 animate-spin flex-shrink-0" />
+                Waiting for payment confirmation — this page updates automatically once CBE
+                confirms your payment.
+              </div>
+              <button
+                onClick={() => setBillAction(null)}
+                className="btn-secondary w-full py-2.5 mt-4"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* eBirr: the PIN prompt is on the payer's handset — nothing to navigate to. */}
+        {pushMessage && (
+          <div className="card flex items-start gap-3">
+            <Smartphone className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
+            <div className="space-y-1">
+              <p className="font-semibold text-gray-900 dark:text-gray-100">Check your phone</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{pushMessage}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Push-debit methods (CAC Bank, eBirr) — collect payer mobile before initiating */}
+        {phoneModalOpen && (
+          <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-sm w-full shadow-2xl">
+              <div className="flex items-center gap-2 mb-1">
+                <Smartphone className="w-5 h-5 text-primary" />
+                <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100">Your mobile number</h3>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {selectedMethod === "EBIRR"
+                  ? "eBirr will prompt this number for your PIN to authorize the payment. Make sure it's the phone you have with you."
+                  : "CAC Bank will send a one-time password to this number to authorize the payment."}
+              </p>
+              <input
+                type="tel"
+                inputMode="numeric"
+                autoFocus
+                value={payerMobile}
+                onChange={(e) => { setPayerMobile(e.target.value); setPhoneError(null); }}
+                onKeyDown={(e) => { if (e.key === "Enter") submitPhone(); }}
+                placeholder={selectedMethod === "EBIRR" ? "09XX XXX XXX" : "77 XX XX XX"}
+                className="w-full px-3 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              />
+              {phoneError && (
+                <p className="text-red-600 dark:text-red-400 text-xs mt-2">⚠️ {phoneError}</p>
+              )}
+              <div className="flex gap-2 mt-4">
+                <button onClick={() => setPhoneModalOpen(false)} className="btn-secondary flex-1 py-2.5">
+                  Cancel
+                </button>
+                <button
+                  onClick={submitPhone}
+                  disabled={!payerMobile.trim()}
+                  className="btn-primary flex-1 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Continue
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* CAC Bank OTP entry */}
+        {otpModalOpen && (
+          <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-sm w-full shadow-2xl">
+              <div className="flex items-center gap-2 mb-1">
+                <KeyRound className="w-5 h-5 text-primary" />
+                <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100">Enter OTP</h3>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{otpMessage}</p>
+              <input
+                type="text"
+                inputMode="numeric"
+                autoFocus
+                value={otpCode}
+                onChange={(e) => { setOtpCode(e.target.value.replace(/\D/g, "")); setOtpError(null); }}
+                onKeyDown={(e) => { if (e.key === "Enter" && otpCode.trim() && !otpMutation.isPending) otpMutation.mutate(otpCode.trim()); }}
+                placeholder="Enter code"
+                maxLength={10}
+                className="w-full text-center tracking-[0.4em] text-lg font-semibold px-3 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              />
+              {otpError && (
+                <p className="text-red-600 dark:text-red-400 text-xs mt-2">⚠️ {otpError}</p>
+              )}
+              <div className="flex gap-2 mt-4">
+                <button
+                  onClick={() => setOtpModalOpen(false)}
+                  disabled={otpMutation.isPending}
+                  className="btn-secondary flex-1 py-2.5"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => otpCode.trim() && otpMutation.mutate(otpCode.trim())}
+                  disabled={otpMutation.isPending || !otpCode.trim()}
+                  className="btn-primary flex-1 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {otpMutation.isPending ? (
+                    <span className="flex items-center justify-center gap-2">
+                      <Loader2 className="w-4 h-4 animate-spin" /> Verifying...
+                    </span>
+                  ) : (
+                    "Confirm payment"
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );