diff --git a/components/payment/paymentComponent.jsx b/components/payment/paymentComponent.jsx
index 97abb27..643d5ee 100644
--- a/components/payment/paymentComponent.jsx
+++ b/components/payment/paymentComponent.jsx
@@ -20,6 +20,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
country_code: "",
postal_code: "",
});
+ const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
useEffect(() => {
const fetchExchangeRate = async () => {
@@ -56,7 +57,6 @@ const PaymentComponent = ({ amount, onSuccess }) => {
throw new Error("Failed to fetch exchange rate");
}
} catch (err) {
- // setError("Currency conversion failed. Please try again later.");
console.error("Exchange rate error:", err);
}
};
@@ -80,22 +80,14 @@ const PaymentComponent = ({ amount, onSuccess }) => {
const handlePaymentSuccess = (response) => {
onSuccess?.({
...response,
- shippingData, // Include the shipping data in the success callback
+ address: shippingData, // Include the shipping data in the success callback
});
};
const handleRazorpayPayment = async () => {
- if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
- setError("Please fill in all required fields.");
- return;
- }
-
try {
const order = await createOrder();
- console.log(shippingData)
- // log env varaible NEXT_RAZORPAY_CLIENT_ID in next js
-
- console.log("Razorpay Client ID:", process.env.NEXT_PUBLIC_RAZORPAY_CLIENT_ID);
+
const options = {
key: "rzp_test_Xf4wnkvQQeUnCq",
amount: order.amount,
@@ -109,8 +101,8 @@ const PaymentComponent = ({ amount, onSuccess }) => {
contact: shippingData.city,
},
handler: (response) => {
- response.address = shippingData
- handlePaymentSuccess(response); // Pass the response to the success handler
+ response.address = shippingData;
+ handlePaymentSuccess(response);
},
};
@@ -123,13 +115,23 @@ const PaymentComponent = ({ amount, onSuccess }) => {
};
const handlePopupSubmit = () => {
+ if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
+ setError("Please fill in all required fields.");
+ return;
+ }
+
setShowPopup(false);
- handleRazorpayPayment();
+ setShippingInfoCollected(true);
+ setError(null);
};
- // if (!usdAmount) {
- // return
Loading exchange rates...
;
- // }
+ const validateShippingInfo = () => {
+ if (!shippingInfoCollected) {
+ setShowPopup(true);
+ return false;
+ }
+ return true;
+ };
return (
@@ -143,68 +145,96 @@ const PaymentComponent = ({ amount, onSuccess }) => {
Error loading Razorpay: {razorpayError}
)}
-
- {
- return actions.order.create({
- purchase_units: [
- {
- amount: {
- value: usdAmount,
- currency_code: "USD",
- },
- },
- ],
- application_context: {
- shipping_preference: "GET_FROM_FILE",
- },
- });
- }}
- onApprove={async (data, actions) => {
- try {
- setIsProcessing(true);
- const order = await actions.order.capture();
- onSuccess?.(order);
- } catch (err) {
- setError("Payment failed. Please try again.");
- console.error("Payment error:", err);
- } finally {
- setIsProcessing(false);
- }
- }}
- onError={(err) => {
- setError("Payment failed. Please try again.");
- }}
- />
-
+
+ {/* Show shipping info status */}
+ {shippingInfoCollected && (
+
+ Shipping information collected ✓
+
+
+ )}
-
+ {/* Collect shipping info button */}
+ {!shippingInfoCollected && (
+
+ )}
+
+ {/* Payment options - only enabled after shipping info is collected */}
+
+
+ {
+ return actions.order.create({
+ purchase_units: [
+ {
+ amount: {
+ value: usdAmount,
+ currency_code: "USD",
+ },
+ },
+ ],
+ application_context: {
+ shipping_preference: "GET_FROM_FILE",
+ },
+ });
+ }}
+ onApprove={async (data, actions) => {
+ try {
+ setIsProcessing(true);
+ const order = await actions.order.capture();
+ order.address = shippingData; // Add shipping data to PayPal order
+ handlePaymentSuccess(order);
+ } catch (err) {
+ setError("Payment failed. Please try again.");
+ console.error("Payment error:", err);
+ } finally {
+ setIsProcessing(false);
+ }
+ }}
+ onError={(err) => {
+ setError("Payment failed. Please try again.");
+ }}
+ />
+
+
+
+
{showPopup && (
-
+
Enter Your Shipping Details
setShippingData({ ...shippingData, address_line_1: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -218,7 +248,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
/>
setShippingData({ ...shippingData, city: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -232,24 +262,32 @@ const PaymentComponent = ({ amount, onSuccess }) => {
/>
setShippingData({ ...shippingData, country_code: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded"
/>
setShippingData({ ...shippingData, postal_code: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded"
/>
-
+
+
+
+
)}
diff --git a/components/shopping-cart/shoppingCart.jsx b/components/shopping-cart/shoppingCart.jsx
index 8d7b892..3c31c30 100644
--- a/components/shopping-cart/shoppingCart.jsx
+++ b/components/shopping-cart/shoppingCart.jsx
@@ -112,7 +112,7 @@ const ShoppingCart = () => {
paymentId: order.id,
payerEmail: order.payer.email_address,
cartId: cartItems[0].id,
- address: shippingAddress, // Include the shipping address
+ address: order.address,
};
const apiResponse = await authAxios.post("/orders/payment/", paymentData);