'use client'; import { Card, CardContent, CardFooter, CardHeader } from '@/src/components/Card/Card'; import { FormSection, FormField, FormLabel } from '@/src/components/Form/Form'; import { RadioGroup, RadioItem } from '@/src/components/Radio/Radio'; import Button from '@/src/components/Button/Button'; import Input from '@/src/components/Input/Input'; import { useState } from 'react'; export default function CheckoutForm() { const [email, setEmail] = useState(''); const [fullName, setFullName] = useState(''); const [paymentMethod, setPaymentMethod] = useState('card'); const [cardNumber, setCardNumber] = useState(''); const [expiry, setExpiry] = useState(''); const [cvc, setCvc] = useState(''); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const canPay = !!email && !!fullName && (paymentMethod !== 'card' || (!!cardNumber && !!expiry && !!cvc)); const handlePay = () => { setLoading(true); setTimeout(() => { setLoading(false); setSuccess(true); }, 900); }; return (

Checkout

Complete your purchase.

{success ? (

Payment complete. A receipt has been sent to {email}.

) : ( <> Email setEmail(e.target.value)} /> Full name setFullName(e.target.value)} /> {paymentMethod === 'card' ? (

Card number setCardNumber(e.target.value)} />

Expiry (MM/YY) setExpiry(e.target.value)} /> CVC setCvc(e.target.value)} />

) : (

You'll be redirected to PayPal to complete your payment.

)} Total: $49.00 )} ); }

Checkout form

Installation

Demo

Checkout