110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
import { createPaymentIntentApi } from "@/utils/api";
|
|
import { useState } from "react";
|
|
import { useRazorpay } from "react-razorpay";
|
|
import RazorpayLogo from "../../../public/assets/ic_razorpay.png";
|
|
import { FaAngleRight } from "react-icons/fa";
|
|
import { useSelector } from "react-redux";
|
|
import { toast } from "sonner";
|
|
import { t } from "@/utils";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
const RazorpayPayment = ({
|
|
packageSettings,
|
|
selectedPackage,
|
|
setShowPaymentModal,
|
|
setToggleApiAfterPaymentSuccess
|
|
}) => {
|
|
const { Razorpay } = useRazorpay();
|
|
const { data: settingsData } = useSelector((state) => state.Settings);
|
|
const { data: user } = useSelector((state) => state.UserSignup);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
let rzpay;
|
|
|
|
const PayWithRazorPay = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const res = await createPaymentIntentApi.createIntent({
|
|
package_id: selectedPackage.id,
|
|
payment_method: packageSettings.Razorpay.payment_method,
|
|
});
|
|
if (res.data.error) {
|
|
toast.error(res.data.message);
|
|
return;
|
|
}
|
|
setShowPaymentModal(false);
|
|
const paymentIntent = res.data.data.payment_intent;
|
|
const options = {
|
|
key: packageSettings.Razorpay.api_key,
|
|
name: settingsData.company_name,
|
|
description: settingsData.company_name,
|
|
image: settingsData.company_logo,
|
|
order_id: paymentIntent.id,
|
|
handler: function (response) {
|
|
toast.success(t("paymentSuccess"));
|
|
setToggleApiAfterPaymentSuccess((prev) => !prev)
|
|
},
|
|
prefill: {
|
|
name: user.name,
|
|
email: user.email,
|
|
contact: user.mobile,
|
|
},
|
|
notes: {
|
|
address: user.address,
|
|
user_id: user.id,
|
|
package_id: selectedPackage.id,
|
|
},
|
|
theme: {
|
|
color: settingsData.web_theme_color,
|
|
},
|
|
};
|
|
|
|
rzpay = new Razorpay(options); // Assign rzpay outside the function
|
|
|
|
rzpay.on("payment.failed", function (response) {
|
|
console.error(response.error.description);
|
|
if (rzpay) {
|
|
rzpay?.close();
|
|
}
|
|
});
|
|
|
|
rzpay.open();
|
|
} catch (error) {
|
|
console.error("Error during payment", error);
|
|
toast.error(t("errorProcessingPayment"));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={PayWithRazorPay} className="w-full p-2">
|
|
<div className="flex items-center gap-2 justify-between ">
|
|
<div className="flex gap-3 items-center">
|
|
<div className="w-8 h-8">
|
|
<CustomImage
|
|
src={RazorpayLogo.src}
|
|
alt="Razorpay"
|
|
width={32}
|
|
height={32}
|
|
className="w-full h-full "
|
|
/>
|
|
</div>
|
|
<p className="text-lg font-semibold">{t("razorPay")}</p>
|
|
</div>
|
|
<div>
|
|
{isLoading ? (
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
) : (
|
|
<FaAngleRight size={18} className="rtl:scale-x-[-1]" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RazorpayPayment;
|