diff --git a/components/payment/paymentComponent.jsx b/components/payment/paymentComponent.jsx index 1fff627..77cc228 100644 --- a/components/payment/paymentComponent.jsx +++ b/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" /> + setShippingData({ ...shippingData, phone_number: e.target.value })} + className="w-full p-2 mb-4 border border-gray-300 rounded" + />