-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
68 lines (62 loc) · 2.02 KB
/
app.js
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
import "./style.css";
import {
CardHolder,
CardNumber,
CardSecurityCode,
ValidThruMonth,
ValidThruYear,
} from "reactjs-credit-card/form";
import Card from "reactjs-credit-card/card";
import { useCardForm } from "reactjs-credit-card";
import { useState } from "react";
function App() {
//useCardForm is a hook which returns a function.If this function calls,function returns credit card form data values and their validations
const getFormData = useCardForm();
const [numberValid, setNumberValid] = useState(true);
function handleSubmit(e) {
e.preventDefault();
const [data, isValid] = getFormData();
console.log(data, isValid);
if (!data.number.isValid) setNumberValid(false); //we'll set a hook to show a error if card number is invalid
if (!isValid)
alert(
`${data.holder.value} form data values invalid :) and holder also ${
data.holder.isValid ? "valid" : "invalid"
}`
);
}
//We can set any form element attribute
function handleFocus() {
setNumberValid(true);
}
return (
<div className="container">
<div className="form-box">
<form onSubmit={handleSubmit}>
<CardNumber
placeholder="Card Number"
className={`input-text${!numberValid ? " error" : ""}`}
onFocus={handleFocus}
/>
<CardHolder placeholder="Card Holder" className="input-text" />
<div className="flex-wrapper">
<div className="semi flex-wrapper">
<ValidThruMonth
placeholder="Card Holder"
className="input-text semi"
/>
<ValidThruYear
placeholder="Card Holder"
className="input-text semi"
/>
</div>
<CardSecurityCode placeholder="CVV" className="input-text semi" />
</div>
<button className="btn">Submit</button>
</form>
</div>
<Card fixClass="fix-new" cardClass="card-new" />
</div>
);
}
export default App;