Component: PaymentInfo
Relevant source files
The following files were used as context for generating this wiki page:The PaymentInfo component is a crucial part of the application's multi-step form, serving as the third step in the user data collection process. Its primary responsibility is to capture the user's payment card details, including the card number, expiry date, and CVV. This component is designed as a controlled component, meaning its state is managed by its parent, the MultiStepForm component.
PaymentInfo receives all necessary data and handler functions as props, including the current form data, error states, and navigation functions (handleNext, handleBack). This architecture ensures a clear separation of concerns, where PaymentInfo focuses solely on rendering the payment form UI, while the parent MultiStepForm handles the business logic of state management, validation, and step progression.
Component Architecture
The PaymentInfo component is a functional React component that renders a form for payment details. It is conditionally rendered by the MultiStepForm when the form's current step is 3.
Sources: src/components/formsteps/PaymentInfo.jsx, src/components/MultiStepForm.jsx:188-191
Props
The component's behavior is entirely controlled by the props passed down from MultiStepForm.
| Prop | Type | Description |
|---|---|---|
step | Number | The current active step of the form. Used to control UI visibility and input disabled state. |
formData | Object | An object containing all form data across all steps. PaymentInfo uses cardNumber, expiryDateMonth, expiryDateYear, and cvv. |
handleChange | Function | A callback function to update the formData state in the parent component on user input. |
handleBack | Function | A callback function to navigate to the previous step (Step 2: Address Details). |
handleNext | Function | A callback function to validate the current step's data and navigate to the next step (Step 4: Review & Submit). |
errors | Object | An object containing validation error messages for the form fields. |
Sources: src/components/formsteps/PaymentInfo.jsx:4-12, src/components/MultiStepForm.jsx:188-191
Component Interaction Flow
This diagram illustrates how props are passed from the parent MultiStepForm to the PaymentInfo component.
UI and Form Fields
The component renders a standard form with labels and input fields for collecting payment information. The styling for these elements is defined in src/styles/Form.css.
*Sources: src/components/formsteps/PaymentInfo.jsx:23-108, src/styles/Form.css *
Form Fields
| Field | HTML Element | name Attribute | Description |
|---|---|---|---|
| Card Number | <input type="text"> | cardNumber | Collects the 16-digit credit card number. |
| Expiry Month | <select> | expiryDateMonth | A dropdown for selecting the card's expiry month (01-12). |
| Expiry Year | <select> | expiryDateYear | A dropdown for selecting the card's expiry year. Options are dynamically generated for the current year and the next 20 years. |
| CVV | <input type="text"> | cvv | Collects the 3-digit Card Verification Value. |
Sources: src/components/formsteps/PaymentInfo.jsx:28-103
The expiry date months and years are generated dynamically within the component.
// src/components/formsteps/PaymentInfo.jsx:13-21
const months = Array.from({ length: 12 }, (_, i) => ({
value: (i + 1).toString().padStart(2, "0"),
label: (i + 1).toString().padStart(2, "0"),
}));
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 21 }, (_, i) => ({
value: (currentYear + i).toString(),
label: (currentYear + i).toString(),
}));
Navigation
Two buttons are present for navigation:
- GO BACK: Invokes the
handleBackprop function to return to theAddressDetailsstep. - NEXT: Invokes the
handleNextprop function, which triggers validation and proceeds to theReviewSubmitstep if successful.
Sources: src/components/formsteps/PaymentInfo.jsx:105-111
Data Flow and State Management
PaymentInfo is a controlled component. All user input triggers the handleChange function passed from MultiStepForm, which updates the central formData state.
This sequence diagram shows the flow of data when a user types in the CVV field.
Validation Logic
Validation is not handled within PaymentInfo but is orchestrated by the MultiStepForm component inside the handleNext function. When the user is on step 3 and clicks "NEXT", MultiStepForm executes validateStep(3).
Sources: src/components/MultiStepForm.jsx:32-35, 108-121
Validation Flow
Validation Rules
The following rules are applied for the fields in the PaymentInfo step:
| Field | Validation Rule | Error Message |
|---|---|---|
cardNumber | Must not be empty and must be a 16-digit number. | "Card Number is required" / "Enter 16 Digit Card Number" |
expiryDateMonth | Must be selected. | "Expiry Month is required" |
expiryDateYear | Must be selected. | "Expiry Year is required" |
cvv | Must not be empty and must be a 3-digit number. | "CVV is required" / "CVV is invalid" |
This logic is implemented in the parent component.
// src/components/MultiStepForm.jsx:108-121
if (step === 3) {
if (!formData.cardNumber.trim()) {
newErrors.cardNumber = "Card Number is required";
} else if (!/^\d{16}$/.test(formData.cardNumber)) {
newErrors.cardNumber = "Enter 16 Digit Card Number";
}
if (!formData.expiryDateMonth) {
newErrors.expiryDateMonth = "Expiry Month is required";
}
if (!formData.expiryDateYear) {
newErrors.expiryDateYear = "Expiry Year is required";
}
if (!formData.cvv.trim()) {
newErrors.cvv = "CVV is required";
} else if (!/^\d{3}$/.test(formData.cvv)) {
newErrors.cvv = "CVV is invalid";
}
}
Final Data Handling
After the PaymentInfo step is successfully completed and validated, the user proceeds to the ReviewSubmit component. In this final step, the payment information is displayed in a masked format for security before final submission. The card number is masked to show only the last 4 digits, and the CVV is completely masked.
Sources: src/components/formsteps/ReviewSubmit.jsx:20, 21, 46-51
Upon final submission, the entire formData object, including the unmasked payment details, is sent to a Firebase Firestore database in the formDetails collection.
Sources: src/components/MultiStepForm.jsx:130-133, src/firebase.js:15