PaymentForm.jsx
3.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, { useState } from 'react'
const PaymentForm = ({ onNext, onBack, initialData = {} }) => {
const [formData, setFormData] = useState({
cardNumber: initialData.cardNumber || '',
cardName: initialData.cardName || '',
expiryDate: initialData.expiryDate || '',
cvv: initialData.cvv || '',
saveCard: initialData.saveCard || false
})
const handleChange = (e) => {
const { name, value, type, checked } = e.target
setFormData({
...formData,
[name]: type === 'checkbox' ? checked : value
})
}
const formatCardNumber = (value) => {
const cleaned = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
const matches = cleaned.match(/\d{4,16}/g)
const match = matches ? matches[0] : ''
const parts = []
for (let i = 0; i < match.length; i += 4) {
parts.push(match.substring(i, i + 4))
}
return parts.length ? parts.join(' ') : cleaned
}
const handleCardNumberChange = (e) => {
const formatted = formatCardNumber(e.target.value)
setFormData({
...formData,
cardNumber: formatted
})
}
const handleSubmit = (e) => {
e.preventDefault()
onNext(formData)
}
return (
<div className="payment-form">
<h2>Payment Information</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="cardNumber">Card Number *</label>
<input
type="text"
id="cardNumber"
name="cardNumber"
value={formData.cardNumber}
onChange={handleCardNumberChange}
placeholder="1234 5678 9012 3456"
maxLength="19"
required
/>
</div>
<div className="form-group">
<label htmlFor="cardName">Name on Card *</label>
<input
type="text"
id="cardName"
name="cardName"
value={formData.cardName}
onChange={handleChange}
placeholder="John Doe"
required
/>
</div>
<div className="form-row">
<div className="form-group">
<label htmlFor="expiryDate">Expiry Date *</label>
<input
type="text"
id="expiryDate"
name="expiryDate"
value={formData.expiryDate}
onChange={handleChange}
placeholder="MM/YY"
maxLength="5"
required
/>
</div>
<div className="form-group">
<label htmlFor="cvv">CVV *</label>
<input
type="text"
id="cvv"
name="cvv"
value={formData.cvv}
onChange={handleChange}
placeholder="123"
maxLength="4"
required
/>
</div>
</div>
<div className="form-group checkbox-group">
<input
type="checkbox"
id="saveCard"
name="saveCard"
checked={formData.saveCard}
onChange={handleChange}
/>
<label htmlFor="saveCard">Save card for future purchases</label>
</div>
<div className="form-actions">
<button type="button" onClick={onBack} className="back-button">
Back
</button>
<button type="submit" className="continue-button">
Continue to Review
</button>
</div>
</form>
</div>
)
}
export default PaymentForm