Booking Summary

\n \n

\n Journey Type:\n {bookingData.type}\n

\n \n

\n Route:\n {bookingData.from} → {bookingData.to}\n

\n \n

\n Date:\n {new Date(bookingData.departureDate).toLocaleDateString()}\n

\n \n

\n Passengers:\n {bookingData.passengers}\n

\n \n

\n Total Amount:\n ₹{bookingData.price.toLocaleString()}\n

\n );\n\n const renderPaymentMethods = () => (\n

Select Payment Method

\n \n

\n {paymentMethods.map((method: any, index) => (\n setSelectedMethod(method.id)}\n className={`p-4 border-2 rounded-lg text-left transition-all duration-200 card-entrance ${\n selectedMethod === method.id\n ? 'border-purple-500 bg-purple-50'\n : 'border-gray-200 hover:border-purple-300'\n }`}\n style={{ animationDelay: `${index * 0.1}s` }}\n >\n

{method.icon}

{method.name}

{method.description}

Fees: {method.fees}

\n \n ))}\n

\n );\n\n const renderPaymentForm = () => {\n if (!selectedMethod) return null;\n\n return (\n

Payment Details

\n \n {selectedMethod === 'card' && (\n

\n Card Number\n {\n const formatted = formatCardNumber(e.target.value);\n setPaymentDetails(prev => ({ ...prev, cardNumber: formatted }));\n }}\n placeholder=\"1234 5678 9012 3456\"\n maxLength={19}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n

\n \n

\n Expiry Date\n \n

\n \n

\n CVV\n \n

\n \n

\n Cardholder Name\n \n

\n )}\n \n {selectedMethod === 'upi' && (\n

\n UPI ID\n \n

\n )}\n \n {selectedMethod === 'wallet' && (\n

\n Select Wallet\n \n \n \n \n \n \n

\n )}\n \n {selectedMethod === 'netbanking' && (\n

🏦

You will be redirected to your bank's website to complete the payment

\n )}\n

\n );\n };\n\n const renderSecurityInfo = () => (\n

🔒

Secure Payment

• 256-bit SSL encryption for all transactions
• PCI DSS compliant payment processing
• Your card details are never stored on our servers
• 100% secure and trusted by millions of users

\n );\n\n if (!bookingData) {\n return (\n

❌

No Booking Found

Please create a booking first to proceed with payment.

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n Complete Your Payment 💳\n

\n Secure and fast payment processing\n

\n\n

\n {/* Left Column - Payment Form */}\n

\n {renderPaymentMethods()}\n {renderPaymentForm()}\n {renderSecurityInfo()}\n \n {/* Pay Button */}\n \n {processing ? (\n

\n Processing Payment...\n

\n ) : (\n `Pay ₹${bookingData.price.toLocaleString()}`\n )}\n \n

\n\n {/* Right Column - Booking Summary */}\n

\n {renderBookingSummary()}\n \n {/* Support */}\n

💬

Need Help?

\n Our support team is available 24/7 to assist you\n

\n \n

\n\n {/* Processing Overlay */}\n {processing && (\n

Processing Payment

Please don't close this window...

\n )}\n

\n );\n}","deleted","label",[168,169,152],"frontend","components","permalink","https://www.val.town/x/Tarunkumar/Tarun/code/frontend/components/Payment.tsx","extension","actionData","errors"]