2 files changed, 63 insertions, 1 deletions

diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index 53822bb..897b09b 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -3,7 +3,6 @@ import countryList from "react-select-country-list";
 import FieldProperties from "./fields/field_properties";
 import Field from "./fields/field";
 import SelectField from "./fields/select_field";
-import { useEffect } from "react";
 import { setFieldErrorMessages } from "../../lib/form_utils";
 
 function getFieldProperties(address?: any) {
diff --git a/src/components/forms/card_form.tsx b/src/components/forms/card_form.tsx
new file mode 100644
index 0000000..e084b7c
--- /dev/null
+++ b/src/components/forms/card_form.tsx
@@ -0,0 +1,63 @@
+import FieldProperties from "./fields/field_properties";
+import Field from "./fields/field";
+import { setFieldErrorMessages } from "../../lib/form_utils";
+import { Form } from "react-router-dom";
+
+function getFieldProperties(card?: any) {
+  const fields: Array<FieldProperties> = [
+    {
+      id: "number-field",
+      type: "number",
+      name: "number",
+      label: "Número de tarjeta",
+      placeholder: card?.number
+    },
+    {
+      id: "expiration-year-field",
+      type: "number",
+      name: "expiration_year",
+      label: "Año de expiración",
+      placeholder: card?.expiration_year
+    },
+    {
+      id: "expiration-month-field",
+      type: "number",
+      name: "expiration_month",
+      label: "Mes de expiración",
+      placeholder: card?.expiration_month
+    },
+    {
+      id: "expiration-day-field",
+      type: "number",
+      name: "expiration_day",
+      label: "Día de expiración",
+      placeholder: card?.expiration_day
+    },
+    {
+      id: "security-code-field",
+      type: "number",
+      name: "security_code",
+      label: "CVV"
+    }
+  ];
+
+  return fields;
+}
+
+export default function CardForm({ card = null, errors = null }) {
+  let field_properties = getFieldProperties(card);
+
+  if(errors)
+    field_properties = setFieldErrorMessages(field_properties, errors);
+
+  const fields = field_properties.map(prop => 
+    <Field properties={prop}/>
+  );
+
+  return (
+    <Form method="post" id="card-form">
+      {fields}
+      <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button>
+    </Form>
+  );
+}
\ No newline at end of file