مقدس مقدس ادغام پرداخت: یک سافاری بومی React 🎢

// POST /api/wallet/top-up 
// AKA "The Money Maker" 💸
{
    "amount": 2000, // Your wallet's workout plan
    "redirect_url": "https://example.com?amount=200&foo=bar" // Where money goes to rest
}

{
    "message": "Topup initialized", // fancy way of saying "We're cooking!"
    "data": {
        "link": "https://checkout-v2.dev-flutterwave.com/..." // The golden ticket 🎫
    },
    "success": true // Alhamdulillah! 
}

export const CONFIGS = {
    APP_ENV: "development", // AKA "Please don't break in production"
    PAYMENTS_CALLBACK_URL: "https://example.com?foo=bar", // The comeback kid
};

// This function is like a waiter at a fancy restaurant
// It takes your order (amount) and brings back a payment link
async function fetchPaymentLink({ amount }) {
    // Magic happens here... or at least we hope so 🎩✨
    const response = await fetch(`/api/wallet/top-up`...);
    return data.data.link; // The golden ticket to happiness
}

// The component that makes your wallet cry tears of joy
function WalletCardComponent() {
    const balance = 1000; // Probably more than my actual bank account 😭
    const handleTopUp = useCallback(async () => {
        // Time to make it rain! 💸
        const paymentLink = await fetchPaymentLink({ amount: 2000 });
        router.replace({/*... navigation magic ...*/});
        // HINT: You can pass the nextPath as a query param or a pathname
        // router.replace({ pathname: "/wallet/payment", params: { link: paymentLink, nextPath: "/wallet" } });
        // router.replace(`/wallet/payment?link=${paymentLink}&nextPath=/wallet`)
    }, []);

    return (
        <View>
            <Text>Wallet - {balance}</Text>
            <Button title="Make Money Disappear" onPress={handleTopUp} />
        </View>
    );
}

function PaymentScreen() {
    // More params than a Hollywood movie
    const { link, nextPath, amount } = useLocalSearchParams();

    return (
        <WebView
            source={{ uri: link }} // The gateway to emptying your wallet
            startInLoadingState
            renderLoading={() => <ShowLoadingScreen />} // The "please wait" dance
            onNavigationStateChange={({ url }) => {
                if (url.includes("cancelled")) {
                    // When the user chickens out 🐔
                    toast.error("Your money is still safe with you!");
                    return;
                }

                if (url.includes("success")) {
                    // Time to celebrate! 🎉
                    toast.success(`Successfully made money disappear! ✨`);
                    // HINT: you can redirect to the nextPath (Blessed flow 👼🏻) or reload the entire app (Ibliss 🔪👺)
                    // router.replace(nextPath...)
                }
            }}
        />
    );
}