multi-payment-system 1.0.0 → 1.1.0

package/README.md

@@ -1,38 +1,71 @@
 # multi-payment-system
 
-npm package + optional Express server for **Xendit, Midtrans, Razorpay, Stripe, Omise** (SG / MY / SEA), plus Yokke EDC attempt helpers.
+Payments for **Node** and **React** — Xendit, Midtrans, Razorpay, Stripe, Omise (+ Yokke EDC helpers).
+
+| Import | Use in |
+|--------|--------|
+| `multi-payment-system` | Node / backend (`XenditGateway`, `charge`) |
+| `multi-payment-system/client` | React / browser (`PaymentClient`) |
+| `multi-payment-system/react` | React hook (`usePaymentClient`) |
 
 ---
 
-## Install (as a library)
+## React client
 
 ```bash
 npm install multi-payment-system
 ```
 
-### Use gateways as classes
+1. Run the payment API (`npm start` in this repo) so React has a backend.
+2. In React:
+
+```jsx
+import { usePaymentClient } from "multi-payment-system/react";
+
+export function PayButton() {
+  const { chargeAndRedirect, loading, error } = usePaymentClient({
+    baseUrl: import.meta.env.VITE_PAY_API || "http://localhost:3000",
+  });
+
+  return (
+    <button
+      disabled={loading}
+      onClick={() =>
+        chargeAndRedirect({
+          gateway: "xendit",
+          amount: 30,
+          currency: "SGD",
+          paymentMethod: "card",
+          keys: { secretKey: import.meta.env.VITE_XENDIT_SECRET }, // demo only — prefer server-held keys
+          returnUrl: window.location.origin + "/success",
+          cancelUrl: window.location.origin + "/cancel",
+        })
+      }
+    >
+      {loading ? "Opening…" : "Pay with card"}
+    </button>
+  );
+}
+```
 
-```js
-import { XenditGateway, StripeGateway, charge, getStatus, listGateways } from "multi-payment-system";
+Or without the hook:
 
-const xendit = new XenditGateway();
-const pay = await xendit.createPayment({
-  paymentId: "pay_1",
-  amountMinor: 3000, // SGD 30.00
-  currency: "SGD",
-  paymentMethod: "card",
-  keys: { secretKey: process.env.XENDIT_SECRET_KEY },
-  returnUrl: "https://example.com/success",
-  cancelUrl: "https://example.com/cancel",
-});
+```js
+import { PaymentClient, redirectToCheckout } from "multi-payment-system/client";
 
-console.log(pay.checkoutUrl);
+const client = new PaymentClient({ baseUrl: "http://localhost:3000" });
+const { payment } = await client.charge({ /* same body as Postman */ });
+redirectToCheckout(payment); // opens Xendit/Stripe checkout
 ```
 
-### Or one-liner helpers
+**Security:** do not ship production secret keys in a React bundle. Put keys on the server and have the client call your API without secrets.
+
+---
+
+## Node / backend SDK
 
 ```js
-import { charge, getStatus } from "multi-payment-system";
+import { XenditGateway, charge } from "multi-payment-system";
 
 const result = await charge({
   gateway: "xendit",
@@ -42,34 +75,11 @@ const result = await charge({
   keys: { secretKey: process.env.XENDIT_SECRET_KEY },
   returnUrl: "https://example.com/success",
 });
-
-const status = await getStatus({
-  gateway: "xendit",
-  gatewayRef: result.gatewayRef,
-  keys: { secretKey: process.env.XENDIT_SECRET_KEY },
-});
-```
-
-### Exports
-
-| Export | What |
-|--------|------|
-| `XenditGateway`, `MidtransGateway`, `RazorpayGateway`, `StripeGateway`, `OmiseGateway` | Gateway classes |
-| `charge`, `getStatus`, `listGateways` | Helper functions |
-| `getGateway("xendit")` | Resolve by name |
-| `createApp()` | Express app (HTTP API) |
-| `PaymentService` | In-memory payment tracker used by the server |
-
-### Publish to npm
-
-```bash
-npm login
-npm publish --access public
 ```
 
 ---
 
-## Run as a local server
+## Run local API server
 
 ```bash
 npm install
@@ -79,7 +89,7 @@ npm start
 Server: `http://localhost:3000`
 
 ```bash
-npm run test:smoke   # local EDC + validation checks (no real gateway keys needed)
+npm run test:smoke
 ```
 
 ### Postman

package/package.json

@@ -1,15 +1,34 @@
 {
   "name": "multi-payment-system",
-  "version": "1.0.0",
-  "description": "Multi-gateway payment SDK + optional Express server (Xendit, Midtrans, Razorpay, Stripe, Omise)",
+  "version": "1.1.0",
+  "description": "Multi-gateway payments for Node and React (Xendit, Midtrans, Razorpay, Stripe, Omise)",
   "type": "module",
   "main": "./src/index.js",
+  "module": "./src/index.js",
+  "react-native": "./src/client/index.js",
+  "browser": {
+    "./src/index.js": "./src/client/index.js",
+    "./src/server.js": false,
+    "./src/app.js": false,
+    "./src/config.js": false,
+    "express": false,
+    "cors": false,
+    "dotenv": false,
+    "zod": false
+  },
   "exports": {
-    ".": "./src/index.js",
+    ".": {
+      "browser": "./src/client/index.js",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./client": "./src/client/index.js",
+    "./react": "./src/client/react.js",
     "./server": "./src/server.js",
     "./app": "./src/app.js",
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "src",
     "README.md",
@@ -19,28 +38,30 @@
     "start": "node src/server.js",
     "dev": "node --watch src/server.js",
     "test:smoke": "node scripts/smoke-test.js",
-    "prepublishOnly": "node scripts/smoke-test.js"
+    "test:package": "node scripts/package-import-test.js",
+    "prepublishOnly": "npm run test:package && npm run test:smoke"
   },
   "engines": {
     "node": ">=18"
   },
   "keywords": [
     "payment",
+    "react",
     "xendit",
     "midtrans",
     "razorpay",
     "stripe",
     "omise",
-    "sgd",
-    "myr",
-    "kiosk",
-    "gateway"
+    "checkout"
   ],
-  "author": "",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": ""
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "dependencies": {
     "axios": "^1.7.9",

package/src/api.js

@@ -1,22 +1,18 @@
-import { v4 as uuidv4 } from "uuid";
 import { getGateway, GATEWAY_NAMES, gatewayRegionsHint } from "./gateways/index.js";
 import { toMinorUnits, normalizeCurrency, SUPPORTED_CURRENCIES } from "./utils/money.js";
 import { PAYMENT_METHOD_HINTS, normalizeMethods } from "./utils/paymentMethods.js";
 import { AppError } from "./utils/errors.js";
 
+function newId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `pay_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
 /**
  * Create a payment on any supported gateway.
- *
- * @example
- * import { charge } from "multi-payment-system";
- * const result = await charge({
- *   gateway: "xendit",
- *   amount: 30,
- *   currency: "SGD",
- *   paymentMethod: "card",
- *   keys: { secretKey: "xnd_development_..." },
- *   returnUrl: "https://example.com/success",
- * });
+ * Prefer calling this on a server/backend — never ship secret keys in a React bundle.
  */
 export async function charge(input = {}) {
   const gatewayName = String(input.gateway || "").toLowerCase();
@@ -38,7 +34,7 @@ export async function charge(input = {}) {
     throw new AppError("amount must be greater than 0");
   }
 
-  const paymentId = input.paymentId || uuidv4();
+  const paymentId = input.paymentId || newId();
   const gateway = getGateway(gatewayName);
 
   const result = await gateway.createPayment({
@@ -71,17 +67,7 @@ export async function charge(input = {}) {
   };
 }
 
-/**
- * Refresh / query payment status from the gateway.
- *
- * @example
- * import { getStatus } from "multi-payment-system";
- * const status = await getStatus({
- *   gateway: "xendit",
- *   gatewayRef: "inv_...",
- *   keys: { secretKey: "xnd_development_..." },
- * });
- */
+/** Refresh / query payment status from the gateway. */
 export async function getStatus(input = {}) {
   const gatewayName = String(input.gateway || "").toLowerCase();
   if (!gatewayName) throw new AppError("gateway is required");
@@ -106,7 +92,6 @@ export async function getStatus(input = {}) {
   };
 }
 
-/** List supported gateways, regions, currencies, payment method hints */
 export function listGateways() {
   return {
     gateways: GATEWAY_NAMES,

package/src/client/PaymentClient.js

@@ -0,0 +1,173 @@
+import { requestJson, ClientHttpError } from "./http.js";
+
+/**
+ * Browser / React-safe client.
+ * Talks to YOUR payment backend (this package's Express server or any compatible API).
+ * Secret gateway keys stay on the server — do not put them in React.
+ *
+ * @example
+ * import { PaymentClient } from "multi-payment-system/client";
+ *
+ * const client = new PaymentClient({
+ *   baseUrl: "http://localhost:3000",
+ *   // apiKey: "optional-if-server-has-API_KEY",
+ * });
+ *
+ * const { payment } = await client.charge({
+ *   gateway: "xendit",
+ *   amount: 30,
+ *   currency: "SGD",
+ *   paymentMethod: "card",
+ *   keys: { secretKey: "..." }, // only if your backend accepts keys per request
+ *   returnUrl: window.location.origin + "/success",
+ * });
+ *
+ * client.openCheckout(payment);
+ */
+export class PaymentClient {
+  constructor({ baseUrl, apiKey, headers } = {}) {
+    if (!baseUrl) throw new Error("PaymentClient: baseUrl is required");
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey || "";
+    this.headers = headers || {};
+  }
+
+  #opts(extra = {}) {
+    return {
+      apiKey: this.apiKey,
+      headers: this.headers,
+      ...extra,
+    };
+  }
+
+  /** GET /api/payments/meta */
+  async meta() {
+    return requestJson(this.baseUrl, "/api/payments/meta", this.#opts());
+  }
+
+  /**
+   * POST /api/payments/charge
+   * Body can include gateway, amount, currency, paymentMethod, keys, returnUrl, ...
+   */
+  async charge(body) {
+    return requestJson(this.baseUrl, "/api/payments/charge", {
+      ...this.#opts(),
+      method: "POST",
+      body,
+    });
+  }
+
+  /** GET /api/payments/:id */
+  async getPayment(id) {
+    return requestJson(this.baseUrl, `/api/payments/${encodeURIComponent(id)}`, this.#opts());
+  }
+
+  /** POST /api/payments/:id/refresh */
+  async refresh(id, keys) {
+    return requestJson(this.baseUrl, `/api/payments/${encodeURIComponent(id)}/refresh`, {
+      ...this.#opts(),
+      method: "POST",
+      body: keys ? { keys } : {},
+    });
+  }
+
+  /** Yokke EDC: create attempt */
+  async createEdcAttempt(body) {
+    return requestJson(this.baseUrl, "/api/payments/attempts", {
+      ...this.#opts(),
+      method: "POST",
+      body,
+    });
+  }
+
+  /** Yokke EDC: report terminal result */
+  async reportTerminalResult(id, body) {
+    return requestJson(
+      this.baseUrl,
+      `/api/payments/attempts/${encodeURIComponent(id)}/terminal-result`,
+      {
+        ...this.#opts(),
+        method: "POST",
+        body,
+      }
+    );
+  }
+
+  /**
+   * Open hosted checkout in the current window, new tab, or return the URL.
+   * Supports Xendit/Stripe/Omise checkoutUrl and Midtrans redirect_url.
+   */
+  openCheckout(paymentOrUrl, { target = "_self" } = {}) {
+    const url =
+      typeof paymentOrUrl === "string"
+        ? paymentOrUrl
+        : paymentOrUrl?.checkoutUrl ||
+          paymentOrUrl?.payment?.checkoutUrl ||
+          paymentOrUrl?.qrImageUrl ||
+          paymentOrUrl?.payment?.qrImageUrl;
+
+    if (!url) {
+      throw new Error("No checkoutUrl on payment result");
+    }
+
+    if (typeof window === "undefined") {
+      return url;
+    }
+
+    if (target === "_blank") {
+      window.open(url, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.assign(url);
+    }
+    return url;
+  }
+
+  /** Razorpay Checkout helper — loads Razorpay.js and opens modal (browser only). */
+  async openRazorpayCheckout(payment, options = {}) {
+    const checkout = payment?.checkout || payment?.payment?.checkout;
+    if (!checkout?.keyId || !checkout?.orderId) {
+      throw new Error("Razorpay checkout payload missing (keyId / orderId)");
+    }
+
+    await loadScript("https://checkout.razorpay.com/v1/checkout.js");
+    if (typeof window === "undefined" || !window.Razorpay) {
+      throw new Error("Razorpay SDK failed to load");
+    }
+
+    return new Promise((resolve, reject) => {
+      const rzp = new window.Razorpay({
+        key: checkout.keyId,
+        amount: checkout.amount,
+        currency: checkout.currency,
+        name: checkout.name || "Payment",
+        order_id: checkout.orderId,
+        prefill: checkout.prefill || {},
+        handler: (response) => resolve(response),
+        modal: {
+          ondismiss: () => reject(new Error("Razorpay checkout dismissed")),
+        },
+        ...options,
+      });
+      rzp.open();
+    });
+  }
+}
+
+function loadScript(src) {
+  if (typeof document === "undefined") {
+    return Promise.reject(new Error("document not available"));
+  }
+  const existing = document.querySelector(`script[src="${src}"]`);
+  if (existing) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    const s = document.createElement("script");
+    s.src = src;
+    s.async = true;
+    s.onload = () => resolve();
+    s.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(s);
+  });
+}
+
+export { ClientHttpError };

package/src/client/http.js

@@ -0,0 +1,39 @@
+export class ClientHttpError extends Error {
+  constructor(message, status, details) {
+    super(message);
+    this.name = "ClientHttpError";
+    this.status = status;
+    this.details = details;
+  }
+}
+
+export async function requestJson(baseUrl, path, { method = "GET", body, apiKey, headers } = {}) {
+  const url = `${String(baseUrl).replace(/\/$/, "")}${path}`;
+  const res = await fetch(url, {
+    method,
+    headers: {
+      Accept: "application/json",
+      ...(body ? { "Content-Type": "application/json" } : {}),
+      ...(apiKey ? { "x-api-key": apiKey } : {}),
+      ...(headers || {}),
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  let json = null;
+  try {
+    json = await res.json();
+  } catch {
+    json = null;
+  }
+
+  if (!res.ok) {
+    throw new ClientHttpError(
+      json?.error || `Request failed (${res.status})`,
+      res.status,
+      json?.details || json
+    );
+  }
+
+  return json;
+}

package/src/client/index.js

@@ -0,0 +1,35 @@
+/**
+ * Browser / React entry — no Express.
+ *
+ * @example
+ * import { PaymentClient, redirectToCheckout } from "multi-payment-system/client";
+ */
+export { PaymentClient, ClientHttpError } from "./PaymentClient.js";
+export { requestJson } from "./http.js";
+
+export {
+  listGateways,
+  GATEWAY_NAMES,
+  gatewayRegionsHint,
+  SUPPORTED_CURRENCIES,
+} from "../meta.js";
+
+export {
+  toMinorUnits,
+  toMajorUnits,
+  formatMajor,
+  normalizeCurrency,
+} from "../utils/money.js";
+
+export {
+  normalizeMethods,
+  mapMethodsForGateway,
+  PAYMENT_METHOD_HINTS,
+} from "../utils/paymentMethods.js";
+
+import { PaymentClient } from "./PaymentClient.js";
+
+/** Open hosted checkout URL (Xendit / Stripe / Omise / Midtrans). */
+export function redirectToCheckout(paymentOrUrl, options) {
+  return new PaymentClient({ baseUrl: "https://local" }).openCheckout(paymentOrUrl, options);
+}

package/src/client/react.js

@@ -0,0 +1,107 @@
+/**
+ * React helpers. Peer-depends on react.
+ *
+ * @example
+ * import { usePaymentClient } from "multi-payment-system/react";
+ *
+ * function PayButton() {
+ *   const { chargeAndRedirect, loading, error } = usePaymentClient({
+ *     baseUrl: import.meta.env.VITE_PAY_API,
+ *   });
+ *
+ *   return (
+ *     <button
+ *       disabled={loading}
+ *       onClick={() =>
+ *         chargeAndRedirect({
+ *           gateway: "xendit",
+ *           amount: 30,
+ *           currency: "SGD",
+ *           paymentMethod: "card",
+ *           keys: { secretKey: "..." }, // better: store keys only on server
+ *           returnUrl: window.location.origin + "/success",
+ *         })
+ *       }
+ *     >
+ *       {loading ? "Opening…" : "Pay"}
+ *     </button>
+ *   );
+ * }
+ */
+import { useCallback, useMemo, useState } from "react";
+import { PaymentClient } from "./PaymentClient.js";
+
+export function usePaymentClient({ baseUrl, apiKey, headers } = {}) {
+  const client = useMemo(
+    () => new PaymentClient({ baseUrl, apiKey, headers }),
+    [baseUrl, apiKey, headers]
+  );
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [payment, setPayment] = useState(null);
+
+  const charge = useCallback(
+    async (body) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await client.charge(body);
+        setPayment(res.payment || res);
+        return res;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  const chargeAndRedirect = useCallback(
+    async (body, openOptions) => {
+      const res = await charge(body);
+      const pay = res.payment || res;
+      if (pay?.checkout) {
+        await client.openRazorpayCheckout(pay, openOptions);
+      } else {
+        client.openCheckout(pay, openOptions);
+      }
+      return res;
+    },
+    [charge, client]
+  );
+
+  const refresh = useCallback(
+    async (id, keys) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await client.refresh(id, keys);
+        setPayment(res.payment || res);
+        return res;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  return {
+    client,
+    loading,
+    error,
+    payment,
+    charge,
+    chargeAndRedirect,
+    refresh,
+    openCheckout: (p, opts) => client.openCheckout(p, opts),
+    openRazorpayCheckout: (p, opts) => client.openRazorpayCheckout(p, opts),
+  };
+}
+
+export { PaymentClient } from "./PaymentClient.js";

package/src/gateways/MidtransGateway.js

@@ -3,6 +3,7 @@ import { BaseGateway } from "./BaseGateway.js";
 import { toMajorUnits, formatMajor } from "../utils/money.js";
 import { AppError } from "../utils/errors.js";
 import { normalizeMethods, mapMethodsForGateway } from "../utils/paymentMethods.js";
+import { toBase64 } from "../utils/base64.js";
 
 /**
  * Midtrans — Indonesia-focused (Snap + Core API).
@@ -26,7 +27,7 @@ export class MidtransGateway extends BaseGateway {
   }
 
   authHeader(serverKey) {
-    const token = Buffer.from(`${serverKey}:`).toString("base64");
+    const token = toBase64(`${serverKey}:`);
     return { Authorization: `Basic ${token}`, "Content-Type": "application/json" };
   }
 

package/src/gateways/XenditGateway.js

@@ -61,34 +61,10 @@ export class XenditGateway extends BaseGateway {
         gatewayRef: data.id,
         checkoutUrl: data.invoice_url,
         paymentMethods: methods.length ? methods : ["all"],
-        xenditPaymentMethods: xenditMethods,
         amountDisplay: formatMajor(ctx.amountMinor, ctx.currency),
         raw: data,
       };
     } catch (err) {
-      // If filtered methods are wrong for this business, retry with all activated channels
-      if (
-        xenditMethods.length &&
-        err.response?.data?.error_code === "UNAVAILABLE_PAYMENT_METHOD_ERROR"
-      ) {
-        delete payload.payment_methods;
-        try {
-          const { data } = await api.post("/v2/invoices", payload);
-          return {
-            status: this.normalizeStatus(data.status),
-            gatewayRef: data.id,
-            checkoutUrl: data.invoice_url,
-            paymentMethods: methods.length ? methods : ["all"],
-            xenditPaymentMethods: [],
-            warning:
-              `Requested channels ${xenditMethods.join(",")} unavailable on this Xendit business; invoice opened with all activated methods.`,
-            amountDisplay: formatMajor(ctx.amountMinor, ctx.currency),
-            raw: data,
-          };
-        } catch (retryErr) {
-          throw this.wrap(retryErr);
-        }
-      }
       throw this.wrap(err);
     }
   }

package/src/index.js

@@ -1,14 +1,12 @@
 /**
- * multi-payment-system
+ * multi-payment-system — Node / server SDK
  *
- * @example
- * import { XenditGateway, charge, getStatus } from "multi-payment-system";
- *
- * const xendit = new XenditGateway();
- * const pay = await xendit.createPayment({ ... });
+ * For React / browser use:
+ *   import { PaymentClient } from "multi-payment-system/client";
+ *   import { usePaymentClient } from "multi-payment-system/react";
  *
- * // or one-liner helpers:
- * const result = await charge({ gateway: "xendit", amount: 30, currency: "SGD", keys: {...}, paymentMethod: "card" });
+ * @example
+ * import { XenditGateway, charge } from "multi-payment-system";
  */
 
 export { BaseGateway } from "./gateways/BaseGateway.js";
@@ -45,3 +43,6 @@ export {
 export { AppError } from "./utils/errors.js";
 
 export { createApp } from "./app.js";
+
+// Re-export browser client for convenience (still prefer /client in React apps)
+export { PaymentClient, redirectToCheckout } from "./client/index.js";

package/src/meta.js

@@ -0,0 +1,35 @@
+/** Lightweight meta — safe for browser bundles (no gateway class imports). */
+
+export const GATEWAY_NAMES = ["xendit", "midtrans", "razorpay", "stripe", "omise"];
+
+export function gatewayRegionsHint() {
+  return {
+    xendit: ["SG", "MY", "ID", "PH", "TH", "VN"],
+    midtrans: ["ID"],
+    razorpay: ["IN", "international"],
+    stripe: ["SG", "MY", "global"],
+    omise: ["SG", "MY", "TH", "JP"],
+  };
+}
+
+export const SUPPORTED_CURRENCIES = [
+  "SGD",
+  "MYR",
+  "IDR",
+  "THB",
+  "PHP",
+  "VND",
+  "USD",
+  "INR",
+  "JPY",
+  "AUD",
+  "HKD",
+];
+
+export function listGateways() {
+  return {
+    gateways: GATEWAY_NAMES,
+    regions: gatewayRegionsHint(),
+    currencies: SUPPORTED_CURRENCIES,
+  };
+}

package/src/services/PaymentService.js

@@ -88,8 +88,6 @@ export class PaymentService {
     draft.checkout = result.checkout || null;
     draft.qrImageUrl = result.qrImageUrl || null;
     draft.resolvedPaymentMethods = result.paymentMethods || null;
-    draft.xenditPaymentMethods = result.xenditPaymentMethods || null;
-    draft.warning = result.warning || null;
     draft.amountDisplay = result.amountDisplay || null;
     draft.gatewayRaw = result.raw || null;
     draft.updatedAt = new Date().toISOString();

package/src/utils/base64.js

@@ -0,0 +1,11 @@
+/** Base64 encode that works in Node and browsers. */
+export function toBase64(value) {
+  const str = String(value);
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str, "utf8").toString("base64");
+  }
+  if (typeof btoa === "function") {
+    return btoa(unescape(encodeURIComponent(str)));
+  }
+  throw new Error("No Base64 encoder available in this environment");
+}

package/src/utils/paymentMethods.js

@@ -44,9 +44,8 @@ export const PAYMENT_METHOD_HINTS = {
     qr: ["QRIS"],
     ewallet: ["GRABPAY", "OVO", "DANA", "LINKAJA", "SHOPEEPAY", "GCASH", "PAYMAYA"],
     bank: ["VIRTUAL_ACCOUNT", "DIRECT_DEBIT"],
-    // Xendit SG PayNow QR channel code is SGQR (not PAYNOW)
-    paynow: ["SGQR"],
-    sgqr: ["SGQR"],
+    paynow: ["PAYNOW"],
+    sgqr: ["PAYNOW"],
     promptpay: ["PROMPTPAY"],
     grabpay: ["GRABPAY"],
     ovo: ["OVO"],
@@ -134,9 +133,8 @@ export function mapMethodsForGateway(gateway, methods, currency) {
     const out = [];
     for (const m of methods) {
       if (m === "qr" || m === "paynow" || m === "sgqr") {
-        if (cur === "SGD") out.push("SGQR");
+        if (cur === "SGD") out.push("PAYNOW");
         else if (cur === "THB") out.push("PROMPTPAY");
-        else if (cur === "PHP") out.push("QRPH");
         else out.push("QRIS");
         continue;
       }