feat: add razorpay
This commit is contained in:
@@ -1,15 +1,18 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
|
||||
import axios from "axios";
|
||||
import authAxios from "@/utils/axios";
|
||||
import { useRazorpay } from "react-razorpay";
|
||||
|
||||
const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
|
||||
const EXCHANGE_RATE_KEY = "exchange_rate_cache";
|
||||
|
||||
const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
const { error: razorpayError, isLoading, Razorpay } = useRazorpay();
|
||||
const [error, setError] = useState(null);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [usdAmount, setUsdAmount] = useState(null);
|
||||
const [userData, setUserData] = useState({ name: "", email: "", contact: "" });
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchExchangeRate = async () => {
|
||||
@@ -25,7 +28,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
|
||||
const response = await axios.get("https://apilayer.net/api/live", {
|
||||
params: {
|
||||
access_key: "9bcb30907dee1cda9866f7b49f0f8def",
|
||||
access_key: "",
|
||||
currencies: "USD",
|
||||
source: "INR",
|
||||
format: 1,
|
||||
@@ -54,19 +57,57 @@ const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
fetchExchangeRate();
|
||||
}, [amount]);
|
||||
|
||||
const handleApprove = async (data, actions) => {
|
||||
const createOrder = async () => {
|
||||
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);
|
||||
const response = await axios.post("/api/razorpay/order", {
|
||||
amount: amount * 100, // Amount in paise
|
||||
currency: "INR",
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error("Error creating order:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = (response) => {
|
||||
onSuccess?.(response);
|
||||
};
|
||||
|
||||
const handleRazorpayPayment = async () => {
|
||||
try {
|
||||
const order = await createOrder();
|
||||
|
||||
const options = {
|
||||
key: "rzp_test_1SbLmNX2nCKRZA",
|
||||
amount: order.amount,
|
||||
currency: order.currency,
|
||||
name: "Rudraksha",
|
||||
description: "",
|
||||
order_id: order.id,
|
||||
prefill: {
|
||||
name: userData.name,
|
||||
email: userData.email,
|
||||
contact: userData.contact,
|
||||
},
|
||||
handler: (response) => {
|
||||
handlePaymentSuccess(response); // Pass the response to the success handler
|
||||
},
|
||||
};
|
||||
|
||||
const razorpayInstance = new Razorpay(options);
|
||||
razorpayInstance.open();
|
||||
} catch (error) {
|
||||
setError("Payment failed. Please try again.");
|
||||
console.error("Razorpay error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePopupSubmit = () => {
|
||||
setShowPopup(false);
|
||||
handleRazorpayPayment();
|
||||
};
|
||||
|
||||
if (!usdAmount) {
|
||||
return <div className="text-center p-4">Loading exchange rates...</div>;
|
||||
}
|
||||
@@ -78,6 +119,11 @@ const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{razorpayError && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
Error loading Razorpay: {razorpayError}
|
||||
</div>
|
||||
)}
|
||||
<PayPalScriptProvider
|
||||
options={{
|
||||
"client-id": process.env.NEXT_PUBLIC_CLIENT_ID,
|
||||
@@ -86,10 +132,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
<PayPalButtons
|
||||
style={{
|
||||
layout: "horizontal",
|
||||
label: "checkout",
|
||||
label: "checkout",
|
||||
tagline: false,
|
||||
fundingicons: true,
|
||||
|
||||
}}
|
||||
disabled={isProcessing}
|
||||
className="w-full"
|
||||
@@ -108,29 +153,74 @@ const PaymentComponent = ({ amount, onSuccess }) => {
|
||||
},
|
||||
});
|
||||
}}
|
||||
onShippingChange={(data, actions) => {
|
||||
const allowedCountries = ["IN", "MY", "NP"];
|
||||
const shippingCountry = data.shipping_address.country_code;
|
||||
|
||||
if (!allowedCountries.includes(shippingCountry)) {
|
||||
return actions.reject().then(() => {
|
||||
setError(
|
||||
"Shipping is only available for India, Malaysia, and Nepal. Please update your address."
|
||||
);
|
||||
});
|
||||
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);
|
||||
}
|
||||
return actions.resolve();
|
||||
}}
|
||||
onApprove={handleApprove}
|
||||
onError={(err) => {
|
||||
setError("Payment failed. Please try again.");
|
||||
}}
|
||||
/>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600 text-center">
|
||||
Note: We only ship to addresses in India, Malaysia, and Nepal.
|
||||
</p>
|
||||
</PayPalScriptProvider>
|
||||
|
||||
<button
|
||||
onClick={handleRazorpayPayment}
|
||||
disabled={isProcessing || isLoading}
|
||||
className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
|
||||
>
|
||||
{isLoading ? "Loading Razorpay..." : "Pay with Razorpay"}
|
||||
</button>
|
||||
|
||||
{showPopup && (
|
||||
<div className=" fixed inset-0 flex items-center justify-center bg-black bg-opacity-50" style={{ zIndex: 1000 }}>
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg w-96">
|
||||
<h3 className="text-lg font-medium mb-4">Enter Your Details</h3>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
value={userData.name}
|
||||
onChange={(e) => setUserData({ ...userData, name: e.target.value })}
|
||||
className="w-full p-2 mb-4 border border-gray-300 rounded"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={userData.email}
|
||||
onChange={(e) =>
|
||||
setUserData({ ...userData, email: e.target.value })
|
||||
}
|
||||
className="w-full p-2 mb-4 border border-gray-300 rounded"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Contact"
|
||||
value={userData.contact}
|
||||
onChange={(e) =>
|
||||
setUserData({ ...userData, contact: e.target.value })
|
||||
}
|
||||
className="w-full p-2 mb-4 border border-gray-300 rounded"
|
||||
/>
|
||||
<button
|
||||
onClick={handlePopupSubmit}
|
||||
className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600 text-center">
|
||||
Note: We only ship to addresses in India, Malaysia, and Nepal.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -80,19 +80,29 @@ const ShoppingCart = () => {
|
||||
return <EmptyCart />;
|
||||
}
|
||||
|
||||
const handlePaymentSuccess = async (order) => {
|
||||
console.log("Payment SuccessFul", order);
|
||||
const response = await authAxios.post("/orders/payment/", {
|
||||
orderId: order.id,
|
||||
payer_mail: order.payer.email_address,
|
||||
address: order.purchase_units[0].shipping.address,
|
||||
name: order.purchase_units[0].shipping.name.full_name,
|
||||
cartId: cartItems[0].id,
|
||||
});
|
||||
router.push('/accounts/profile/orders')
|
||||
toast.success('You Order Is Successfull!')
|
||||
console.log(response);
|
||||
const handlePaymentSuccess = async (response) => {
|
||||
console.log("Payment Successful", response);
|
||||
|
||||
const { razorpay_payment_id, razorpay_order_id, razorpay_signature } = response;
|
||||
|
||||
try {
|
||||
const paymentData = {
|
||||
paymentId: razorpay_payment_id,
|
||||
orderId: razorpay_order_id,
|
||||
signature: razorpay_signature,
|
||||
cartId: cartItems[0].id,
|
||||
};
|
||||
|
||||
const apiResponse = await authAxios.post("/orders/payment/", paymentData);
|
||||
router.push("/accounts/profile/orders");
|
||||
toast.success("Your Order Is Successful!");
|
||||
console.log(apiResponse);
|
||||
} catch (error) {
|
||||
console.error("Error processing payment:", error);
|
||||
toast.error("Payment processing failed. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
<div className="w-full px-4 md:px-8 max-w-[1600px] mx-auto font-['Inter']">
|
||||
|
||||
Reference in New Issue
Block a user