Skip to content
My Docs

Billing Details Form

The BillingDetailsForm component in React is designed for collecting and submitting billing details. It uses several states to manage form data and submission status. The form includes input fields for first name, last name, email, phone, address, city, state, postal code, and country. The country selector dynamically sets the state code based on the selected country.

Key features include:

  1. Form Validation: Checks if all required fields are filled in before submission.
  2. Dynamic State Handling: Updates form data state on input changes.
  3. Country and State Selection: Dynamically sets state codes based on the country selected from a predefined list.
  4. Submission Status: Indicates form submission status using a loading spinner and disables the submit button during submission.
  5. Error Handling: Displays error messages using toasts if submission fails or form validation is not met.
  6. API Integration: Submits data to a backend service through createBillingDetails function.

Upon successful submission, a success toast is displayed, and the form is hidden. If the submission fails, an error toast displays the error message. The component also provides a cancel button to hide the form without submitting.