diff --git a/frontend/src/components/payment/PaymentMethodSelector.vue b/frontend/src/components/payment/PaymentMethodSelector.vue
index ed31578c27..a88f91f2e5 100644
--- a/frontend/src/components/payment/PaymentMethodSelector.vue
+++ b/frontend/src/components/payment/PaymentMethodSelector.vue
@@ -82,8 +82,8 @@ const sortedMethods = computed(() => {
 })
 
 function methodIcon(type: string): string {
-  if (type.includes('alipay')) return METHOD_ICONS.alipay
-  if (type.includes('wxpay')) return METHOD_ICONS.wxpay
+  if (isAlipayMethod(type)) return METHOD_ICONS.alipay
+  if (isWxpayMethod(type)) return METHOD_ICONS.wxpay
   if (type === 'airwallex') return METHOD_ICONS.airwallex
   return METHOD_ICONS[type] || paymentIcon
 }
@@ -93,10 +93,18 @@ function methodLabel(method: PaymentMethodOption): string {
 }
 
 function methodSelectedClass(type: string): string {
-  if (type.includes('alipay')) return 'border-[#02A9F1] bg-blue-50 text-gray-900 shadow-sm dark:bg-blue-950 dark:text-gray-100'
-  if (type.includes('wxpay')) return 'border-[#09BB07] bg-green-50 text-gray-900 shadow-sm dark:bg-green-950 dark:text-gray-100'
+  if (isAlipayMethod(type)) return 'border-[#02A9F1] bg-blue-50 text-gray-900 shadow-sm dark:bg-blue-950 dark:text-gray-100'
+  if (isWxpayMethod(type)) return 'border-[#09BB07] bg-green-50 text-gray-900 shadow-sm dark:bg-green-950 dark:text-gray-100'
   if (type === 'stripe') return 'border-[#676BE5] bg-indigo-50 text-gray-900 shadow-sm dark:bg-indigo-950 dark:text-gray-100'
   if (type === 'airwallex') return 'border-[#FF6B3D] bg-orange-50 text-gray-900 shadow-sm dark:border-[#FF8E3C] dark:bg-orange-950 dark:text-gray-100'
   return 'border-primary-500 bg-primary-50 text-gray-900 shadow-sm dark:bg-primary-950 dark:text-gray-100'
 }
+
+function isAlipayMethod(type: string): boolean {
+  return type === 'alipay' || type === 'alipay_direct'
+}
+
+function isWxpayMethod(type: string): boolean {
+  return type === 'wxpay' || type === 'wxpay_direct'
+}
 </script>
diff --git a/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts b/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
index 3e3bfcc4c0..e481325fe7 100644
--- a/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
+++ b/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
@@ -21,4 +21,17 @@ describe('PaymentMethodSelector', () => {
     expect(wrapper.text()).not.toContain('ldc')
     expect(wrapper.text()).not.toContain('payment.methods.ldc')
   })
+
+  it('uses the generic selected style for custom methods that contain built-in names', () => {
+    const wrapper = mount(PaymentMethodSelector, {
+      props: {
+        selected: 'card_alipay',
+        methods: [{ type: 'card_alipay', display_name: 'Card Pay', fee_rate: 0, available: true }],
+      },
+    })
+
+    const button = wrapper.get('button')
+    expect(button.classes()).toContain('border-primary-500')
+    expect(button.classes()).not.toContain('border-[#02A9F1]')
+  })
 })