Checkout

\n\n

\n {/* Customer Information */}\n

Customer Information

\n \n

\n \n Full Name *\n \n handleInputChange('customerName', e.target.value)}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.customerName ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"Enter your full name\"\n />\n {errors.customerName && (\n

{errors.customerName}

\n )}\n

\n\n

\n \n Email Address *\n \n handleInputChange('customerEmail', e.target.value)}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.customerEmail ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"Enter your email address\"\n />\n {errors.customerEmail && (\n

{errors.customerEmail}

\n )}\n

\n\n

\n \n Shipping Address *\n \n handleInputChange('customerAddress', e.target.value)}\n rows={3}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.customerAddress ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"Enter your complete shipping address\"\n />\n {errors.customerAddress && (\n

{errors.customerAddress}

\n )}\n

\n\n {/* Payment Information */}\n

Payment Information

\n \n

\n \n Payment Method\n \n

\n \n handleInputChange('paymentMethod', e.target.value)}\n className=\"mr-2\"\n />\n 💳 Credit/Debit Card\n \n \n handleInputChange('paymentMethod', e.target.value)}\n className=\"mr-2\"\n />\n 🅿️ PayPal\n \n

\n\n {form.paymentMethod === 'card' && (\n <>\n

\n \n Card Number *\n \n handleInputChange('cardNumber', formatCardNumber(e.target.value))}\n maxLength={19}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.cardNumber ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"1234 5678 9012 3456\"\n />\n {errors.cardNumber && (\n

{errors.cardNumber}

\n )}\n

\n\n

\n \n Expiry Date *\n \n handleInputChange('expiryDate', formatExpiryDate(e.target.value))}\n maxLength={5}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.expiryDate ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"MM/YY\"\n />\n {errors.expiryDate && (\n

{errors.expiryDate}

\n )}\n

\n\n

\n \n CVV *\n \n handleInputChange('cvv', e.target.value.replace(/\\D/g, ''))}\n maxLength={4}\n className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${\n errors.cvv ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"123\"\n />\n {errors.cvv && (\n

{errors.cvv}

\n )}\n

\n \n )}\n\n {form.paymentMethod === 'paypal' && (\n

\n You will be redirected to PayPal to complete your payment securely.\n

\n )}\n

\n\n {/* Submit Button */}\n \n {submitting ? (\n \n

\n Processing Order...\n \n ) : (\n `Complete Order - $${cart.total.toFixed(2)}`\n )}\n \n \n

\n\n {/* Order Summary */}\n

Order Summary

\n \n

\n {cart.items.map(item => (\n

{item.product?.name}

Qty: {item.quantity}

\n ${((item.product?.price || 0) * item.quantity).toFixed(2)}\n

\n ))}\n

\n\n

\n Subtotal:\n ${cart.total.toFixed(2)}\n

\n Shipping:\n Free\n

\n Tax:\n $0.00\n

\n Total:\n \n ${cart.total.toFixed(2)}\n \n

\n\n

\n 🔒\n

\n Your payment information is secure and encrypted\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Zee_paul/App/code/frontend/components/Checkout.tsx","extension","actionData","errors"]