updates

Frontend/src/components/common/PaymentMethodSelector.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { CreditCard, Building2 } from 'lucide-react';
+import { CreditCard } from 'lucide-react';
 
 interface PaymentMethodSelectorProps {
-  value: 'cash' | 'bank_transfer';
-  onChange: (value: 'cash' | 'bank_transfer') => void;
+  value: 'cash' | 'stripe';
+  onChange: (value: 'cash' | 'stripe') => void;
   error?: string;
   disabled?: boolean;
 }
@@ -62,12 +62,12 @@ const PaymentMethodSelector: React.FC<
           </div>
         </label>
 
-        {/* Bank Transfer */}
+        {/* Stripe Payment */}
         <label
           className={`flex items-start p-4 border-2 
             rounded-lg cursor-pointer transition-all
             ${
-              value === 'bank_transfer'
+              value === 'stripe'
                 ? 'border-indigo-500 bg-indigo-50'
                 : 'border-gray-200 hover:border-indigo-300'
             }
@@ -76,37 +76,37 @@ const PaymentMethodSelector: React.FC<
           <input
             type="radio"
             name="payment_method"
-            value="bank_transfer"
-            checked={value === 'bank_transfer'}
+            value="stripe"
+            checked={value === 'stripe'}
             onChange={(e) =>
-              onChange(e.target.value as 'bank_transfer')
+              onChange(e.target.value as 'stripe')
             }
             disabled={disabled}
             className="mt-1 mr-3"
           />
           <div className="flex-1">
             <div className="flex items-center gap-2 mb-1">
-              <Building2 
-                className="w-5 h-5 text-gray-600" 
+              <CreditCard 
+                className="w-5 h-5 text-indigo-600" 
               />
               <span className="font-medium text-gray-900">
-                Bank Transfer
+                Pay with Card (Stripe)
               </span>
-              <span className="text-xs bg-green-100 
-                text-green-700 px-2 py-0.5 rounded-full 
+              <span className="text-xs bg-indigo-100 
+                text-indigo-700 px-2 py-0.5 rounded-full 
                 font-medium"
               >
-                Recommended
+                Instant
               </span>
             </div>
             <p className="text-sm text-gray-600">
-              Transfer via QR code or account number. 
-              Quick confirmation within 24 hours.
+              Secure payment with credit or debit card. 
+              Instant confirmation.
             </p>
             <div className="mt-2 text-xs text-gray-500 
               bg-white rounded px-2 py-1 inline-block"
             >
-              💳 Confirmation after booking
+              💳 Secure card payment
             </div>
           </div>
         </label>
@@ -123,11 +123,10 @@ const PaymentMethodSelector: React.FC<
         border-blue-200 rounded-lg"
       >
         <p className="text-xs text-blue-800">
-          💡 <strong>Note:</strong> You will not be 
-          charged immediately. {' '}
+          💡 <strong>Note:</strong> {' '}
           {value === 'cash'
-            ? 'Payment when checking in.'
-            : 'Transfer after booking confirmation.'}
+            ? 'You will pay when checking in. Cash and card accepted at the hotel.'
+            : 'Your payment will be processed securely through Stripe.'}
         </p>
       </div>
     </div>