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);