refactor: add phone field in payment form

components/payment/paymentComponent.jsx

@@ -19,6 +19,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     city: "",
     country_code: "",
     postal_code: "",
+    phone_number: "", 
   });
   const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
 
@@ -98,7 +99,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         prefill: {
           name: shippingData.address_line_1,
           email: shippingData.address_line_2,
-          contact: shippingData.city,
+          contact: shippingData.phone_number || shippingData.city,
         },
         handler: (response) => {
           response.address = shippingData;
@@ -115,11 +116,18 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   };
 
   const handlePopupSubmit = () => {
-    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
+    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code || !shippingData.phone_number) {
       setError("Please fill in all required fields.");
       return;
     }
     
+    // Validate phone number
+    const phoneRegex = /^\+?[0-9]{10,15}$/;
+    if (!phoneRegex.test(shippingData.phone_number)) {
+      setError("Please enter a valid phone number (10-15 digits).");
+      return;
+    }
+    
     setShowPopup(false);
     setShippingInfoCollected(true);
     setError(null);
@@ -272,6 +280,13 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })}
               className="w-full p-2 mb-4 border border-gray-300 rounded"
             />
+            <input
+              type="tel"
+              placeholder="Phone Number *"
+              value={shippingData.phone_number}
+              onChange={(e) => setShippingData({ ...shippingData, phone_number: e.target.value })}
+              className="w-full p-2 mb-4 border border-gray-300 rounded"
+            />
             <div className="flex gap-2">
               <button
                 onClick={() => setShowPopup(false)}