create a separate hook to handle the logic of the payment through orange money

src/hooks/useOrangeMoney.tsx

+import { type IorangePaymentStarter, getTransactionsData } from "@/utils/requests/orangePayment";
+
+import { useMutation } from "@tanstack/react-query";
+import * as WebBrowser from "expo-web-browser";
+import { useState } from "react";
+
+const paymentObjectDefault: IorangePaymentStarter = {
+	// biome-ignore lint/style/useNamingConvention: <api expect type_paiement>
+	type_paiement: 1,
+	marchand: "1",
+	service: "1",
+	montant: 0,
+	numero: "0707070707",
+	commentaire: "Un commentaire",
+};
+const useOrangeMoney = () => {
+	const [isBrowserOpen, setIsBrowserOpen] = useState(false);
+
+	const handlePaymentUsingBrowser = async (url: string) => {
+		const result = await WebBrowser.openBrowserAsync(url);
+		// setResult(result);
+		console.log("result", result);
+	};
+
+	const omPaymentMutation = useMutation({
+		mutationFn: (amount: number) =>
+			getTransactionsData({
+				// biome-ignore lint/style/useNamingConvention: <explanation>
+				...paymentObjectDefault,
+				montant: amount,
+			}),
+		onSuccess: async (data) => {
+			await handlePaymentUsingBrowser(data.payment_url);
+			// setResult(result);
+		},
+		onError: (err) => {
+			console.log("om start error ", err);
+		},
+	});
+
+	return { omPaymentMutation, isBrowserOpen };
+};
+
+export default useOrangeMoney;

src/screens/PaymentAmountInputScreen.tsx

@@ -8,6 +8,7 @@ import PaymentOption from "@components/PaymentOption";
 import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import useOrangeMoney from "@hooks/useOrangeMoney";
 import { useMutation } from "@tanstack/react-query";
 import * as WebBrowser from "expo-web-browser";
 import { useCallback, useState } from "react";
@@ -20,6 +21,8 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 	const { paymentType } = route.params;
 	const [amountToPay, setAmountToPay] = useState(0);
 
+	const { omPaymentMutation: orangePaymentMutation } = useOrangeMoney();
+
 	const insets = useSafeAreaInsets();
 
 	const updateAmountToPay = (amount: string) => {
@@ -76,13 +79,13 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 			case "OM":
 				console.log("OM so we stays on screen !!");
 				console.log("Calling api with amount :: ", amountToPay);
-				omPaymentMutation.mutate(amountToPay);
+				orangePaymentMutation.mutate(amountToPay);
 				break;
 			default:
 				navigation.navigate("numberAndOtpForPaymentScreen");
 				break;
 		}
-	}, [amountToPay, omPaymentMutation, paymentType, navigation]);
+	}, [amountToPay, orangePaymentMutation, paymentType, navigation]);
 
 	return (
 		<BackgroundDefault>