@one-payments/web-components 1.7.0 → 1.7.2

package/dist/one-payment.js

@@ -5,9 +5,10 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { PaymentSDK, PAYMENT_METHODS, PAYNOW_ICON_DATA_URL, PROMPTPAY_ICON_DATA_URL, DUITNOW_ICON_DATA_URL, GOPAY_ICON_DATA_URL, BOOST_ICON_DATA_URL, SHOPEEPAY_ICON_DATA_URL, ATOM_ICON_DATA_URL, DANA_ICON_DATA_URL, TNG_ICON_DATA_URL, ALIPAYCN_ICON_DATA_URL, ALIPAYHK_ICON_DATA_URL, GCASH_ICON_DATA_URL, KONBINI_ICON_DATA_URL, PAYEASY_ICON_DATA_URL } from '@one-payments/core';
+import { PaymentSDK, PAYMENT_METHODS, PAYNOW_ICON_DATA_URL, PROMPTPAY_ICON_DATA_URL, DUITNOW_ICON_DATA_URL, GOPAY_ICON_DATA_URL, BOOST_ICON_DATA_URL, SHOPEEPAY_ICON_DATA_URL, ATOM_ICON_DATA_URL, DANA_ICON_DATA_URL, TNG_ICON_DATA_URL, ALIPAYCN_ICON_DATA_URL, ALIPAYHK_ICON_DATA_URL, GCASH_ICON_DATA_URL, KONBINI_ICON_DATA_URL, PAYEASY_ICON_DATA_URL, GRABPAY_ICON_DATA_URL, FPX_ICON_DATA_URL, } from '@one-payments/core';
 import CleaveConstructor from 'cleave.js';
 import QRCode from 'qrcode';
+import { AsYouType, isValidPhoneNumber, parsePhoneNumber, } from 'libphonenumber-js';
 /**
  * Main payment component - framework-agnostic web component with EXACT original design
  *
@@ -74,6 +75,15 @@ let OnePayment = class OnePayment extends LitElement {
         this.qrCodeDataUrl = null; // Generated QR image
         this.qrAutoResumeTimer = null;
         this.qrPollingInProgress = false; // Track if QR polling is in progress
+        // Bank selection state for FPX and similar methods
+        this.availableBanks = [];
+        this.selectedBank = null;
+        this.banksLoading = false;
+        this.bankSearchQuery = '';
+        // Phone number input state for methods that require phone entry
+        this.phoneInputValue = '';
+        this.phoneInputError = '';
+        this.selectedCountry = 'SG'; // Default to Singapore
         this.sdk = null;
         this.isInitialized = false;
         this.cardNumberCleave = null;
@@ -122,6 +132,33 @@ let OnePayment = class OnePayment extends LitElement {
                 }
             }
         };
+        // --- Phone Number Helper Methods ---
+        /**
+         * Minimum phone number length (digits only)
+         */
+        this.MIN_PHONE_LENGTH = 8;
+        /**
+         * Japan-only payment methods - phone must start with +81
+         * These methods require the country selector to be locked to Japan
+         */
+        this.JAPAN_ONLY_PHONE_METHODS = [
+            PAYMENT_METHODS.KONBINI,
+            PAYMENT_METHODS.PAYEASY,
+        ];
+        /**
+         * Country options for phone number selection
+         * Uses ISO 3166-1 alpha-2 country codes (uppercase for libphonenumber-js)
+         */
+        this.COUNTRY_OPTIONS = [
+            { code: 'JP', name: 'Japan', flag: '🇯🇵', dialCode: '+81' },
+            { code: 'SG', name: 'Singapore', flag: '🇸🇬', dialCode: '+65' },
+            { code: 'MY', name: 'Malaysia', flag: '🇲🇾', dialCode: '+60' },
+            { code: 'ID', name: 'Indonesia', flag: '🇮🇩', dialCode: '+62' },
+            { code: 'TH', name: 'Thailand', flag: '🇹🇭', dialCode: '+66' },
+            { code: 'PH', name: 'Philippines', flag: '🇵🇭', dialCode: '+63' },
+            { code: 'HK', name: 'Hong Kong', flag: '🇭🇰', dialCode: '+852' },
+            { code: 'CN', name: 'China', flag: '🇨🇳', dialCode: '+86' },
+        ];
     }
     /**
      * Check if all required props are present and valid.
@@ -145,7 +182,9 @@ let OnePayment = class OnePayment extends LitElement {
         if (!this.email || typeof this.email !== 'string' || this.email.trim() === '') {
             return false;
         }
-        if (!this.phoneNumber || typeof this.phoneNumber !== 'string' || this.phoneNumber.trim() === '') {
+        if (!this.phoneNumber ||
+            typeof this.phoneNumber !== 'string' ||
+            this.phoneNumber.trim() === '') {
             return false;
         }
         return true;
@@ -323,11 +362,12 @@ let OnePayment = class OnePayment extends LitElement {
     }
     // --- Methods ---
     /**
-     * Get filtered and validated payment methods
-     * Applies three layers of filtering:
-     * 1. API availability (from available-methods endpoint)
+     * Get filtered payment methods
+     * Applies filtering:
+     * 1. API availability (from available-methods endpoint with currency filtering)
      * 2. User exclusions (excludePaymentMethods prop)
-     * 3. Currency validation (PayNow only for SGD)
+     *
+     * Note: Currency validation is now handled server-side by the available-methods API
      */
     getFilteredPaymentMethods() {
         // Get available methods from SDK state (from API)
@@ -342,7 +382,7 @@ let OnePayment = class OnePayment extends LitElement {
         if (availableMethods.length === 0) {
             return [];
         }
-        // Filter by exclusions and currency
+        // Filter by user exclusions only - currency filtering is done server-side
         return availableMethods
             .filter((method) => {
             // Apply user exclusions
@@ -351,180 +391,10 @@ let OnePayment = class OnePayment extends LitElement {
             }
             return true;
         })
-            .map((method) => {
-            // Check currency validation for PayNow
-            if (method.id === PAYMENT_METHODS.PAYNOW) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'SGD') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'PayNow is only available for SGD currency',
-                    };
-                }
-            }
-            // Check currency validation for Prompt Pay
-            if (method.id === PAYMENT_METHODS.PROMPTPAY) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'THB') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'PromptPay is only available for THB currency',
-                    };
-                }
-            }
-            // Check currency validation for DuitNow
-            if (method.id === PAYMENT_METHODS.DUITNOW) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'MYR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'DuitNow is only available for MYR currency',
-                    };
-                }
-            }
-            // Check currency validation for GoPay
-            if (method.id === PAYMENT_METHODS.GOPAY) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'IDR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'GoPay is only available for IDR currency',
-                    };
-                }
-            }
-            // Check currency validation for Boost
-            if (method.id === PAYMENT_METHODS.BOOST) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'MYR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Boost is only available for MYR currency',
-                    };
-                }
-            }
-            // Check currency validation for ShopeePay
-            if (method.id === PAYMENT_METHODS.SHOPEEPAY) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'MYR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'ShopeePay is only available for MYR currency',
-                    };
-                }
-            }
-            // Check currency validation for Atom (SGD or MYR only)
-            if (method.id === PAYMENT_METHODS.ATOM) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'SGD' && currency !== 'MYR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Atom is only available for SGD and MYR currencies',
-                    };
-                }
-            }
-            // Check currency validation for Dana (IDR only)
-            if (method.id === PAYMENT_METHODS.DANA) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'IDR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Dana is only available for IDR currency',
-                    };
-                }
-            }
-            // Check currency validation for Touch 'n Go (MYR only)
-            if (method.id === PAYMENT_METHODS.TNG) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'MYR') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: "Touch 'n Go is only available for MYR currency",
-                    };
-                }
-            }
-            // Check currency validation for Alipay CN (CNY only)
-            if (method.id === PAYMENT_METHODS.ALIPAYCN) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'CNY') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Alipay is only available for CNY currency',
-                    };
-                }
-            }
-            // Check currency validation for Alipay HK (HKD only)
-            if (method.id === PAYMENT_METHODS.ALIPAYHK) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'HKD') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'AlipayHK is only available for HKD currency',
-                    };
-                }
-            }
-            // Check currency validation for GCash (PHP only)
-            if (method.id === PAYMENT_METHODS.GCASH) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'PHP') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'GCash is only available for PHP currency',
-                    };
-                }
-            }
-            // Check currency validation for Konbini (JPY only)
-            if (method.id === PAYMENT_METHODS.KONBINI) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'JPY') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Konbini is only available for JPY currency',
-                    };
-                }
-            }
-            // Check currency validation for Pay-Easy (JPY only)
-            if (method.id === PAYMENT_METHODS.PAYEASY) {
-                const transactionData = this.getTransactionData();
-                const currency = transactionData.currency;
-                if (currency !== 'JPY') {
-                    return {
-                        id: method.id,
-                        enabled: false,
-                        disabledReason: 'Pay-Easy is only available for JPY currency',
-                    };
-                }
-            }
-            return {
-                id: method.id,
-                enabled: true,
-            };
-        });
+            .map((method) => ({
+            id: method.id,
+            enabled: true,
+        }));
     }
     initializeSDK() {
         // Validate required configuration props
@@ -782,6 +652,22 @@ let OnePayment = class OnePayment extends LitElement {
                 window.location.href = redirectUrl;
             }
         });
+        // Handle GrabPay SG redirect
+        this.sdk.on('grabpay_sg_redirect', (event) => {
+            const { redirectUrl } = event.payload;
+            if (redirectUrl) {
+                // Redirect the entire page to the GrabPay payment page
+                window.location.href = redirectUrl;
+            }
+        });
+        // Handle FPX redirect
+        this.sdk.on('fpx_redirect', (event) => {
+            const { redirectUrl } = event.payload;
+            if (redirectUrl) {
+                // Redirect the entire page to the bank's payment page
+                window.location.href = redirectUrl;
+            }
+        });
         this.sdk.initialize({
             amount: this.amount,
             currency: this.currency,
@@ -976,13 +862,15 @@ let OnePayment = class OnePayment extends LitElement {
         const expiryMonth = (expiryParts[0] || '').trim();
         const expiryYearShort = (expiryParts[1] || '').trim().substring(0, 2); // Take only first 2 digits
         const expiryYear = `20${expiryYearShort}`; // Convert to 4-digit year
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
         this.sdk.submitPayment(PAYMENT_METHODS.CARD, {
             cardNumber: this.cardFormData.cardNumber.replace(/\s/g, ''),
             expiryMonth,
             expiryYear,
             cvv: this.cardFormData.cvv,
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
@@ -993,10 +881,12 @@ let OnePayment = class OnePayment extends LitElement {
         }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
         // Use customer info from props
         this.sdk.submitPayment(PAYMENT_METHODS.PAYNOW, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
@@ -1008,11 +898,13 @@ let OnePayment = class OnePayment extends LitElement {
         }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
         // Use customer info from props
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.PROMPTPAY, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
@@ -1023,11 +915,13 @@ let OnePayment = class OnePayment extends LitElement {
         }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
         // Use customer info from props
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.DUITNOW, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
@@ -1038,11 +932,13 @@ let OnePayment = class OnePayment extends LitElement {
         }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
         // Use customer info from props
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.GOPAY, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
@@ -1051,152 +947,499 @@ let OnePayment = class OnePayment extends LitElement {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.BOOST);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.BOOST, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleShopeePayPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.SHOPEEPAY);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.SHOPEEPAY, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleAtomPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.ATOM);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.ATOM, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleDanaPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.DANA);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.DANA, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleTngPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.TNG);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.TNG, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleAlipayCNPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.ALIPAYCN);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.ALIPAYCN, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleAlipayHKPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.ALIPAYHK);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.ALIPAYHK, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleGCashPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input if filled, otherwise use prop
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.GCASH);
         // SDK will redirect to external payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.GCASH, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handleKonbiniPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input - required for Japan method
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use phone from input (formatted for Japan: +81 -> 0) or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.KONBINI);
         // SDK will redirect to convenience store payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.KONBINI, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
-            phoneNumber: this.phoneNumber,
+            phoneNumber,
         });
     }
     handlePayEasyPayment() {
         if (!this.sdk || this.currentState.status !== 'ready') {
             return;
         }
+        // Validate phone input - required for Japan method
+        if (this.phoneInputValue && !this.validatePhoneInput()) {
+            return;
+        }
         // Lock payment methods to prevent switching
         this.paymentLocked = true;
-        // Use customer info from props
+        // Use phone from input (formatted for Japan: +81 -> 0) or prop
+        const phoneNumber = this.getEffectivePhoneNumber(PAYMENT_METHODS.PAYEASY);
+        // Format names for Pay-easy (max 9 chars combined)
+        const formattedNames = this.formatNamesForPayEasy(this.firstName, this.lastName);
         // SDK will redirect to bank transfer/ATM payment page when nextActionUrl is received
         this.sdk.submitPayment(PAYMENT_METHODS.PAYEASY, {
-            firstName: this.firstName,
-            lastName: this.lastName,
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
+            email: this.email,
+            phoneNumber,
+        });
+    }
+    handleGrabPaySGPayment() {
+        if (!this.sdk || this.currentState.status !== 'ready') {
+            return;
+        }
+        // Lock payment methods to prevent switching
+        this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use customer info from props
+        // SDK will redirect to GrabPay payment page when nextActionUrl is received
+        this.sdk.submitPayment(PAYMENT_METHODS.GRABPAY_SG, {
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
             email: this.email,
             phoneNumber: this.phoneNumber,
         });
     }
+    handleFPXPayment() {
+        if (!this.sdk || this.currentState.status !== 'ready') {
+            return;
+        }
+        // Validate bank selection
+        if (!this.selectedBank) {
+            return;
+        }
+        // Lock payment methods to prevent switching
+        this.paymentLocked = true;
+        // Format names to UPPERCASE for API
+        const formattedNames = this.formatNamesUppercase();
+        // Use customer info from props plus selected bank
+        // SDK will redirect to bank's payment page when nextActionUrl is received
+        this.sdk.submitPayment(PAYMENT_METHODS.FPX, {
+            firstName: formattedNames.firstName,
+            lastName: formattedNames.lastName,
+            email: this.email,
+            phoneNumber: this.phoneNumber,
+            bankName: this.selectedBank.bankName,
+        });
+    }
+    /**
+     * Fetch available banks for a payment method
+     */
+    async fetchBanks(paymentMethodType) {
+        if (!this.sdk)
+            return;
+        this.banksLoading = true;
+        this.availableBanks = [];
+        this.selectedBank = null;
+        this.bankSearchQuery = '';
+        try {
+            const banks = await this.sdk.getBanks(paymentMethodType);
+            this.availableBanks = banks;
+        }
+        catch (error) {
+            console.error('Error fetching banks:', error);
+            this.availableBanks = [];
+        }
+        finally {
+            this.banksLoading = false;
+        }
+    }
+    /**
+     * Handle bank selection
+     */
+    handleBankSelect(bank) {
+        this.selectedBank = bank;
+        this.bankSearchQuery = bank.displayName;
+    }
+    /**
+     * Get filtered banks based on search query
+     */
+    getFilteredBanks() {
+        if (!this.bankSearchQuery.trim()) {
+            return this.availableBanks;
+        }
+        const query = this.bankSearchQuery.toLowerCase();
+        return this.availableBanks.filter((bank) => bank.displayName.toLowerCase().includes(query) ||
+            bank.bankName.toLowerCase().includes(query));
+    }
+    /**
+     * Check if payment method requires Japan-only phone
+     */
+    isJapanOnlyPhoneMethod(methodId) {
+        return this.JAPAN_ONLY_PHONE_METHODS.includes(methodId);
+    }
+    /**
+     * Get the full phone number with country code in international format
+     * For display: "+81 90 1234 5678"
+     * For API: depends on payment method
+     */
+    getFormattedPhoneWithCountryCode() {
+        if (!this.phoneInputValue.trim())
+            return '';
+        try {
+            const parsed = parsePhoneNumber(this.phoneInputValue, this.selectedCountry);
+            if (parsed) {
+                return parsed.formatInternational();
+            }
+        }
+        catch {
+            // Fallback: prepend dial code
+        }
+        const country = this.COUNTRY_OPTIONS.find((c) => c.code === this.selectedCountry);
+        const dialCode = country?.dialCode || '+65';
+        const digits = this.phoneInputValue.replace(/\D/g, '');
+        return `${dialCode} ${digits}`;
+    }
+    /**
+     * Get effective phone number for API submission
+     * - Japan methods (konbini, payeasy): Convert +81 to local format (0XXXXXXXXXX)
+     * - Other methods: Keep international format (+XX XXXX XXXX)
+     */
+    getEffectivePhoneNumber(methodId) {
+        // If phone input is filled, use it
+        if (this.phoneInputValue.trim()) {
+            const internationalPhone = this.getFormattedPhoneWithCountryCode();
+            // For Japan methods, convert +81 to local 0 format
+            if (this.isJapanOnlyPhoneMethod(methodId)) {
+                return this.formatPhoneForJapan(internationalPhone);
+            }
+            // For other methods, keep international format as-is
+            return internationalPhone;
+        }
+        // Otherwise use prop (already formatted)
+        return this.phoneNumber || '';
+    }
+    /**
+     * Format phone number for Japan (convert +81 to 0)
+     * The Airwallex API for Japanese payment methods expects local format:
+     * - Input:  "+81 90 1234 5678" (international format)
+     * - Output: "09012345678" (local format, no spaces)
+     */
+    formatPhoneForJapan(phoneNumber) {
+        if (!phoneNumber)
+            return '';
+        if (phoneNumber.startsWith('+81')) {
+            // Remove +81 prefix and replace with 0
+            // Also remove all spaces for clean format
+            return '0' + phoneNumber.slice(3).replace(/\s/g, '');
+        }
+        // If already local format or other format, just remove spaces
+        return phoneNumber.replace(/\s/g, '');
+    }
+    /**
+     * Format names for Pay-Easy (max 9 chars combined)
+     * Pay-easy has a unique requirement: combined first name + last name must be maximum 9 characters
+     */
+    formatNamesForPayEasy(firstName, lastName) {
+        const MAX_LENGTH = 9;
+        const firstUpper = firstName.toUpperCase();
+        const lastUpper = lastName.toUpperCase();
+        const total = firstUpper.length + lastUpper.length;
+        // Within limit - return as-is (uppercase)
+        if (total <= MAX_LENGTH) {
+            return { firstName: firstUpper, lastName: lastUpper };
+        }
+        // Need to truncate - distribute evenly
+        const half = Math.floor(MAX_LENGTH / 2); // = 4
+        let truncFirst = firstUpper;
+        let truncLast = lastUpper;
+        if (firstUpper.length <= half) {
+            // First name fits in half, give remaining to last name
+            truncLast = lastUpper.slice(0, MAX_LENGTH - firstUpper.length);
+        }
+        else if (lastUpper.length <= half) {
+            // Last name fits in half, give remaining to first name
+            truncFirst = firstUpper.slice(0, MAX_LENGTH - lastUpper.length);
+        }
+        else {
+            // Both longer than half - split evenly
+            truncFirst = firstUpper.slice(0, half); // 4 chars
+            truncLast = lastUpper.slice(0, MAX_LENGTH - half); // 5 chars
+        }
+        return { firstName: truncFirst, lastName: truncLast };
+    }
+    /**
+     * Format names for API submission (default: uppercase conversion)
+     * All payment methods require names to be UPPERCASE
+     */
+    formatNamesUppercase() {
+        return {
+            firstName: this.firstName.toUpperCase(),
+            lastName: this.lastName.toUpperCase(),
+        };
+    }
+    /**
+     * Validate phone number input
+     * Rules:
+     * 1. Required - phone number cannot be empty
+     * 2. Min 8 digits - must have at least 8 digits
+     * 3. Japan prefix - for konbini/payeasy, must validate as Japan number
+     * 4. Format - must be valid phone format
+     */
+    validatePhoneInput() {
+        const phone = this.phoneInputValue.trim();
+        // Rule 1: Required
+        if (!phone) {
+            this.phoneInputError = 'Phone number is required';
+            return false;
+        }
+        // Rule 2: Minimum 8 digits
+        const digitsOnly = phone.replace(/\D/g, '');
+        if (digitsOnly.length < this.MIN_PHONE_LENGTH) {
+            this.phoneInputError = `Phone number must be at least ${this.MIN_PHONE_LENGTH} digits`;
+            return false;
+        }
+        // Rule 3 & 4: Use libphonenumber-js for proper validation
+        try {
+            const isValid = isValidPhoneNumber(phone, this.selectedCountry);
+            if (!isValid) {
+                this.phoneInputError = 'Please enter a valid phone number';
+                return false;
+            }
+        }
+        catch {
+            this.phoneInputError = 'Please enter a valid phone number';
+            return false;
+        }
+        this.phoneInputError = '';
+        return true;
+    }
+    /**
+     * Handle phone input change with auto-formatting
+     * Uses libphonenumber-js AsYouType formatter to format as user types
+     */
+    handlePhoneInputChange(e) {
+        const input = e.target;
+        const rawValue = input.value;
+        // Extract only digits from input (reject all non-digits)
+        let digits = rawValue.replace(/\D/g, '');
+        // Country-specific max digits for national numbers
+        const maxDigitsMap = {
+            JP: 11, // 0X0-XXXX-XXXX (11 digits with leading 0)
+            CN: 11, // 1XX-XXXX-XXXX
+            SG: 8, // XXXX XXXX
+            MY: 10, // 1X-XXX XXXX
+            ID: 12, // 8XX-XXXX-XXXX
+            TH: 9, // X XXXX XXXX
+            PH: 10, // 9XX XXX XXXX
+            HK: 8, // XXXX XXXX
+        };
+        const maxDigits = maxDigitsMap[this.selectedCountry] || 15;
+        // Limit digits to max
+        if (digits.length > maxDigits) {
+            digits = digits.slice(0, maxDigits);
+        }
+        // For Japan, auto-prepend 0 if user starts with 9 (common mobile prefix)
+        // Japanese mobile numbers start with 090, 080, 070
+        if (this.selectedCountry === 'JP' && digits.length > 0 && !digits.startsWith('0')) {
+            digits = '0' + digits;
+            if (digits.length > maxDigits) {
+                digits = digits.slice(0, maxDigits);
+            }
+        }
+        // Use AsYouType formatter from libphonenumber-js
+        const formatter = new AsYouType(this.selectedCountry);
+        const formatted = formatter.input(digits);
+        // Update state
+        this.phoneInputValue = formatted;
+        // IMPORTANT: Directly set input value to enforce formatting
+        // This ensures the input field shows the formatted value, not the raw input
+        input.value = formatted;
+        // Clear error while typing
+        if (this.phoneInputError) {
+            this.phoneInputError = '';
+        }
+    }
+    /**
+     * Handle country change
+     */
+    handleCountryChange(e) {
+        const select = e.target;
+        this.selectedCountry = select.value;
+        // Reset phone input when country changes
+        this.phoneInputValue = '';
+        this.phoneInputError = '';
+    }
     // --- Render Methods ---
     /**
      * Get the formatted pay amount for buttons (net amount including fees)
@@ -1685,12 +1928,74 @@ let OnePayment = class OnePayment extends LitElement {
       </div>
     `;
     }
+    /**
+     * Render phone number input for payment methods that require it
+     * Matches react-phone-input-2 behavior:
+     * - Country dropdown with flags and dial codes
+     * - Auto-formatting based on country
+     * - Japan-only lock for konbini/payeasy
+     */
+    renderPhoneInput(methodId) {
+        const isJapanOnly = this.isJapanOnlyPhoneMethod(methodId);
+        // For Japan-only methods, lock country to Japan
+        if (isJapanOnly && this.selectedCountry !== 'JP') {
+            this.selectedCountry = 'JP';
+        }
+        return html `
+      <div class="phone-input-section">
+        <label class="phone-input-label">
+          ${isJapanOnly ? 'Phone number (Japan)' : 'Phone number'}
+          <span style="color: var(--op-color-danger);">*</span>
+        </label>
+        <div class="phone-input-wrapper">
+          <select
+            class="country-code-select"
+            .value=${this.selectedCountry}
+            @change=${this.handleCountryChange}
+            ?disabled=${isJapanOnly}
+          >
+            ${isJapanOnly
+            ? html `<option value="JP">🇯🇵 +81</option>`
+            : this.COUNTRY_OPTIONS.map((country) => html `
+                    <option value=${country.code} ?selected=${this.selectedCountry === country.code}>
+                      ${country.flag} ${country.dialCode}
+                    </option>
+                  `)}
+          </select>
+          <input
+            type="tel"
+            class="phone-input-field ${this.phoneInputError ? 'error' : ''}"
+            placeholder=${isJapanOnly
+            ? 'Enter your Japanese phone number'
+            : 'Enter your phone number'}
+            .value=${this.phoneInputValue}
+            @input=${this.handlePhoneInputChange}
+            @blur=${() => this.validatePhoneInput()}
+          />
+        </div>
+        ${this.phoneInputError
+            ? html `<div class="phone-input-error">${this.phoneInputError}</div>`
+            : ''}
+        ${isJapanOnly
+            ? html `<div class="phone-japan-note">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 16v-4M12 8h.01"/>
+              </svg>
+              Phone number must be a valid Japanese number (+81)
+            </div>`
+            : ''}
+      </div>
+    `;
+    }
     renderBoostContent() {
         return html `
       <div class="paynow-container">
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Boost:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.BOOST)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1734,6 +2039,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with ShopeePay:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.SHOPEEPAY)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1777,6 +2084,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Atome:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.ATOM)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1820,6 +2129,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Dana:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.DANA)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1863,6 +2174,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Touch 'n Go:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.TNG)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1906,6 +2219,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Alipay:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.ALIPAYCN)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1949,6 +2264,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with AlipayHK:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.ALIPAYHK)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -1992,6 +2309,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with GCash:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.GCASH)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -2035,6 +2354,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Konbini:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.KONBINI)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -2078,6 +2399,8 @@ let OnePayment = class OnePayment extends LitElement {
         <div class="paynow-instructions">
           <h3 class="instructions-title">How to Pay with Pay-Easy:</h3>
 
+          ${this.renderPhoneInput(PAYMENT_METHODS.PAYEASY)}
+
           <div class="instruction-steps">
             <div class="instruction-step">
               <div class="step-number">1</div>
@@ -2086,7 +2409,9 @@ let OnePayment = class OnePayment extends LitElement {
 
             <div class="instruction-step">
               <div class="step-number">2</div>
-              <p class="step-text">Use your bank's ATM or online banking to complete the transfer.</p>
+              <p class="step-text">
+                Use your bank's ATM or online banking to complete the transfer.
+              </p>
             </div>
 
             <div class="instruction-step">
@@ -2115,6 +2440,194 @@ let OnePayment = class OnePayment extends LitElement {
       </div>
     `;
     }
+    renderGrabPaySGContent() {
+        return html `
+      <div class="paynow-container">
+        <div class="paynow-instructions">
+          <h3 class="instructions-title">How to Pay with GrabPay:</h3>
+
+          <div class="instruction-steps">
+            <div class="instruction-step">
+              <div class="step-number">1</div>
+              <p class="step-text">Click <strong>"Pay"</strong> to open GrabPay.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">2</div>
+              <p class="step-text">Log in to your GrabPay account.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">3</div>
+              <p class="step-text">Confirm and complete your payment.</p>
+            </div>
+          </div>
+
+          <div class="submit-section">
+            <button
+              class="pay-button ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'loading'
+            : ''}"
+              @click=${this.handleGrabPaySGPayment}
+              ?disabled=${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'}
+            >
+              ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'Redirecting...'
+            : `Pay ${this.getPayButtonAmount()}`}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderFPXContent() {
+        // Fetch banks when component is first rendered for FPX
+        if (this.availableBanks.length === 0 && !this.banksLoading) {
+            this.fetchBanks('fpx');
+        }
+        const filteredBanks = this.getFilteredBanks();
+        const isProcessing = this.currentState.status === 'processing' || this.currentState.status === 'requires_action';
+        return html `
+      <div class="fpx-container">
+        <div class="fpx-instructions">
+          <h3 class="instructions-title">Pay with FPX Online Banking</h3>
+          <p class="fpx-description">
+            Select your bank below and you'll be redirected to complete the payment securely.
+          </p>
+        </div>
+
+        <div class="bank-selection-wrapper">
+          <label class="form-label">Select Your Bank</label>
+          <div class="bank-search-container">
+            <input
+              type="text"
+              class="input bank-search-input"
+              placeholder="Search for your bank..."
+              .value=${this.bankSearchQuery}
+              @input=${(e) => {
+            const target = e.target;
+            this.bankSearchQuery = target.value;
+            // Clear selection if user is typing
+            if (this.selectedBank && target.value !== this.selectedBank.displayName) {
+                this.selectedBank = null;
+            }
+        }}
+              @focus=${() => {
+            // Show all banks when focused
+            if (this.selectedBank) {
+                this.bankSearchQuery = '';
+                this.selectedBank = null;
+            }
+        }}
+            />
+            <div class="bank-search-icon">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+
+          ${this.banksLoading
+            ? html `
+                <div class="bank-loading">
+                  <div class="bank-loading-spinner"></div>
+                  <span>Loading banks...</span>
+                </div>
+              `
+            : html `
+                <div class="bank-grid">
+                  ${filteredBanks.map((bank) => html `
+                      <div
+                        class="bank-card ${this.selectedBank?.bankName === bank.bankName
+                ? 'selected'
+                : ''}"
+                        @click=${() => this.handleBankSelect(bank)}
+                      >
+                        <div class="bank-logo-wrapper">
+                          ${bank.logoUrl
+                ? html `<img
+                                class="bank-logo"
+                                src="${bank.logoUrl}"
+                                alt="${bank.displayName}"
+                                @error=${(e) => {
+                    // Hide image and show fallback on error
+                    const img = e.target;
+                    img.style.display = 'none';
+                    const parent = img.parentElement;
+                    if (parent) {
+                        parent.innerHTML = `<div class="bank-logo-fallback">${bank.displayName.charAt(0)}</div>`;
+                    }
+                }}
+                              />`
+                : html `<div class="bank-logo-fallback">
+                                ${bank.displayName.charAt(0)}
+                              </div>`}
+                        </div>
+                        <span class="bank-name">${bank.displayName}</span>
+                        ${this.selectedBank?.bankName === bank.bankName
+                ? html `<div class="bank-check">
+                              <svg
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M20 6L9 17L4 12"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                              </svg>
+                            </div>`
+                : ''}
+                      </div>
+                    `)}
+                </div>
+
+                ${filteredBanks.length === 0 && this.bankSearchQuery
+                ? html `
+                      <div class="bank-no-results">
+                        <p>No banks found matching "${this.bankSearchQuery}"</p>
+                      </div>
+                    `
+                : ''}
+              `}
+        </div>
+
+        <div class="submit-section">
+          <button
+            class="pay-button ${isProcessing ? 'loading' : ''}"
+            @click=${this.handleFPXPayment}
+            ?disabled=${isProcessing || !this.selectedBank}
+          >
+            ${isProcessing
+            ? 'Redirecting to bank...'
+            : !this.selectedBank
+                ? 'Select a bank to continue'
+                : `Pay ${this.getPayButtonAmount()}`}
+          </button>
+        </div>
+      </div>
+    `;
+    }
     render3DSModal() {
         if (!this.show3DSModal || !this.nextActionUrl) {
             return null;
@@ -2222,6 +2735,10 @@ let OnePayment = class OnePayment extends LitElement {
                     return 'Konbini';
                 case PAYMENT_METHODS.PAYEASY:
                     return 'Pay-Easy';
+                case PAYMENT_METHODS.GRABPAY_SG:
+                    return 'GrabPay';
+                case PAYMENT_METHODS.FPX:
+                    return 'FPX Online Banking';
                 default:
                     return id;
             }
@@ -2255,7 +2772,11 @@ let OnePayment = class OnePayment extends LitElement {
             else if (id === PAYMENT_METHODS.PROMPTPAY) {
                 return html `
           <div class="method-icon-right">
-            <img src="${PROMPTPAY_ICON_DATA_URL}" alt="PromptPay" style="width: 45px; height: auto;" />
+            <img
+              src="${PROMPTPAY_ICON_DATA_URL}"
+              alt="PromptPay"
+              style="width: 45px; height: auto;"
+            />
           </div>
         `;
             }
@@ -2283,7 +2804,11 @@ let OnePayment = class OnePayment extends LitElement {
             else if (id === PAYMENT_METHODS.SHOPEEPAY) {
                 return html `
           <div class="method-icon-right">
-            <img src="${SHOPEEPAY_ICON_DATA_URL}" alt="ShopeePay" style="width: 45px; height: auto;" />
+            <img
+              src="${SHOPEEPAY_ICON_DATA_URL}"
+              alt="ShopeePay"
+              style="width: 45px; height: auto;"
+            />
           </div>
         `;
             }
@@ -2318,7 +2843,11 @@ let OnePayment = class OnePayment extends LitElement {
             else if (id === PAYMENT_METHODS.ALIPAYHK) {
                 return html `
           <div class="method-icon-right">
-            <img src="${ALIPAYHK_ICON_DATA_URL}" alt="AlipayHK" style="width: 45px; height: auto;" />
+            <img
+              src="${ALIPAYHK_ICON_DATA_URL}"
+              alt="AlipayHK"
+              style="width: 45px; height: auto;"
+            />
           </div>
         `;
             }
@@ -2341,6 +2870,24 @@ let OnePayment = class OnePayment extends LitElement {
           <div class="method-icon-right">
             <img src="${PAYEASY_ICON_DATA_URL}" alt="Pay-Easy" style="width: 45px; height: auto;" />
           </div>
+        `;
+            }
+            else if (id === PAYMENT_METHODS.GRABPAY_SG) {
+                return html `
+          <div class="method-icon-right">
+            <img src="${GRABPAY_ICON_DATA_URL}" alt="GrabPay" style="width: 45px; height: auto;" />
+          </div>
+        `;
+            }
+            else if (id === PAYMENT_METHODS.FPX) {
+                return html `
+          <div class="method-icon-right">
+            <img
+              src="${FPX_ICON_DATA_URL}"
+              alt="FPX Online Banking"
+              style="width: 45px; height: auto;"
+            />
+          </div>
         `;
             }
             return null;
@@ -2421,7 +2968,11 @@ let OnePayment = class OnePayment extends LitElement {
                                                                             ? this.renderKonbiniContent()
                                                                             : method.id === PAYMENT_METHODS.PAYEASY
                                                                                 ? this.renderPayEasyContent()
-                                                                                : null}
+                                                                                : method.id === PAYMENT_METHODS.GRABPAY_SG
+                                                                                    ? this.renderGrabPaySGContent()
+                                                                                    : method.id === PAYMENT_METHODS.FPX
+                                                                                        ? this.renderFPXContent()
+                                                                                        : null}
                           </div>`
                     : ''}
                     </div>
@@ -3760,6 +4311,332 @@ OnePayment.styles = css `
         transform: translateX(-50%) translateY(0);
       }
     }
+
+    /* ═══════════════════════════════════════════════════════════════
+       FPX BANK SELECTION STYLES
+       ═══════════════════════════════════════════════════════════════ */
+
+    .fpx-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .fpx-instructions {
+      text-align: left;
+    }
+
+    .fpx-description {
+      color: var(--op-color-text-secondary);
+      font-size: var(--op-font-size-sm);
+      margin: 0.5rem 0 0 0;
+      line-height: 1.5;
+    }
+
+    .bank-selection-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .bank-search-container {
+      position: relative;
+      width: 100%;
+    }
+
+    .bank-search-input {
+      padding-right: 2.75rem;
+    }
+
+    .bank-search-icon {
+      position: absolute;
+      right: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--op-color-text-secondary);
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .bank-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      gap: 1rem;
+      color: var(--op-color-text-secondary);
+      font-size: var(--op-font-size-sm);
+    }
+
+    .bank-loading-spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid var(--op-color-border);
+      border-top-color: var(--op-color-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    .bank-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 0.75rem;
+      max-height: 320px;
+      overflow-y: auto;
+      padding: 0.25rem;
+      margin: -0.25rem;
+    }
+
+    .bank-grid::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .bank-grid::-webkit-scrollbar-track {
+      background: var(--op-color-surface);
+      border-radius: 3px;
+    }
+
+    .bank-grid::-webkit-scrollbar-thumb {
+      background: var(--op-color-border);
+      border-radius: 3px;
+    }
+
+    .bank-grid::-webkit-scrollbar-thumb:hover {
+      background: var(--op-color-text-secondary);
+    }
+
+    .bank-card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 1rem 0.75rem;
+      background: var(--op-color-background);
+      border: 2px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      gap: 0.625rem;
+      min-height: 100px;
+    }
+
+    .bank-card:hover {
+      border-color: var(--op-color-text-secondary);
+      background: var(--op-color-surface);
+      transform: translateY(-2px);
+      box-shadow: var(--op-box-shadow);
+    }
+
+    .bank-card.selected {
+      border-color: var(--op-color-primary);
+      background: var(--op-color-surface);
+      box-shadow: 0 0 0 3px rgba(42, 35, 39, 0.1);
+    }
+
+    :host([data-theme='dark']) .bank-card.selected {
+      box-shadow: 0 0 0 3px rgba(255, 190, 50, 0.15);
+    }
+
+    .bank-logo-wrapper {
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .bank-logo {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 4px;
+    }
+
+    .bank-logo-fallback {
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, var(--op-color-primary) 0%, var(--op-color-primary-hover) 100%);
+      color: var(--op-color-primary-text);
+      font-size: 1.25rem;
+      font-weight: 700;
+      border-radius: var(--op-border-radius);
+    }
+
+    .bank-name {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--op-color-text);
+      text-align: center;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      word-break: break-word;
+    }
+
+    .bank-check {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 20px;
+      height: 20px;
+      background: var(--op-color-primary);
+      color: var(--op-color-primary-text);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: scaleIn 0.2s ease;
+    }
+
+    .bank-no-results {
+      text-align: center;
+      padding: 2rem;
+      color: var(--op-color-text-secondary);
+      font-size: var(--op-font-size-sm);
+    }
+
+    .bank-no-results p {
+      margin: 0;
+    }
+
+    /* Mobile responsiveness for bank grid */
+    @media (max-width: 480px) {
+      .bank-grid {
+        grid-template-columns: repeat(2, 1fr);
+        max-height: 280px;
+      }
+
+      .bank-card {
+        padding: 0.75rem 0.5rem;
+        min-height: 90px;
+      }
+
+      .bank-logo-wrapper {
+        width: 40px;
+        height: 40px;
+      }
+
+      .bank-logo-fallback {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+      }
+
+      .bank-name {
+        font-size: 0.6875rem;
+      }
+    }
+
+    /* ═══════════════════════════════════════════════════════════════
+       PHONE NUMBER INPUT STYLES
+       ═══════════════════════════════════════════════════════════════ */
+
+    .phone-input-section {
+      margin-bottom: 1rem;
+    }
+
+    .phone-input-label {
+      display: block;
+      font-size: var(--op-font-size-sm);
+      font-weight: 500;
+      color: var(--op-color-text);
+      margin-bottom: 0.5rem;
+    }
+
+    .phone-input-wrapper {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .country-code-select {
+      flex-shrink: 0;
+      width: 100px;
+      padding: 0.75rem;
+      font-size: var(--op-font-size-base);
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
+      background: var(--op-color-background);
+      color: var(--op-color-text);
+      cursor: pointer;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .country-code-select:focus {
+      outline: none;
+      border-color: var(--op-color-border-focus);
+      box-shadow: 0 0 0 3px rgba(42, 35, 39, 0.1);
+    }
+
+    .country-code-select:disabled {
+      background: var(--op-color-surface);
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    .phone-input-field {
+      flex: 1;
+      padding: 0.75rem;
+      font-size: var(--op-font-size-base);
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
+      background: var(--op-color-background);
+      color: var(--op-color-text);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .phone-input-field:focus {
+      outline: none;
+      border-color: var(--op-color-border-focus);
+      box-shadow: 0 0 0 3px rgba(42, 35, 39, 0.1);
+    }
+
+    .phone-input-field::placeholder {
+      color: var(--op-color-text-secondary);
+    }
+
+    .phone-input-field.error {
+      border-color: var(--op-color-danger);
+    }
+
+    .phone-input-field.error:focus {
+      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
+    }
+
+    .phone-input-error {
+      color: var(--op-color-danger);
+      font-size: 0.75rem;
+      margin-top: 0.375rem;
+    }
+
+    .phone-japan-note {
+      font-size: 0.75rem;
+      color: var(--op-color-text-secondary);
+      margin-top: 0.375rem;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    /* Mobile responsiveness for phone input */
+    @media (max-width: 480px) {
+      .phone-input-wrapper {
+        flex-direction: column;
+      }
+
+      .country-code-select {
+        width: 100%;
+      }
+    }
   `;
 __decorate([
     property({ type: Object })
@@ -3848,6 +4725,27 @@ __decorate([
 __decorate([
     state()
 ], OnePayment.prototype, "qrPollingInProgress", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "availableBanks", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "selectedBank", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "banksLoading", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "bankSearchQuery", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "phoneInputValue", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "phoneInputError", void 0);
+__decorate([
+    state()
+], OnePayment.prototype, "selectedCountry", void 0);
 OnePayment = __decorate([
     customElement('one-payment')
 ], OnePayment);