The Holy Grail of Payment Integration: A React Native Safari 🎢

#reactnative #mobile #programming #ramadancoding

Bismillah! As we journey through Ramadan (yes, we're fasting AND coding 😅), let's dive into the world of payment gateways. Don't worry, this implementation is easier than resisting samosas at iftar!

The Batman and Robin of Web Development 🦹‍♂️

Ever wondered why frontend and backend developers are like hot suya and yaji? They're better together!

Just like how Batman needs Robin (or how developers need coffee ☕️), our frontend needs the backend for payment processing. The backend is like that friend who keeps all your secrets safe (API keys, we're looking at you 👀), while the frontend is the charming face that users actually see.

Backend Magic: Where Money Goes to Party 🎉

Warning: No actual money was harmed during the writing of this code!

Remember when your mom said "money doesn't grow on trees"? Well, it now flows through APIs! We've got payment gateways galore:

Stripe (for the fancy folks 🎩)
Paystack (African excellence 🌍)
Flutterwave (making waves, get it? 🌊)
Squad (not related to Suicide Squad, promise! 😅)

Here's our magical money-moving endpoint:

// 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
}

The response (if the money gods are pleased 🙏):

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

Frontend Shenanigans: Where The Magic Happens ✨

Fun fact: This code was written while dreaming about iftar buffets!

Configuration: The Boring-But-Important Part 🥱

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

The Wallet Component: Money's Best Friend 💰

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

The WebView: Where Dreams (and Transactions) Come True 🌈

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...)
                }
            }}
        />
    );
}

Conclusion: The End of Our Money Adventure 🎬

Like breaking fast with dates, every good implementation needs a sweet ending!

As we navigate through Ramadan (trying not to think about food while coding 😅), remember that implementing payments is like fasting - it requires patience, attention to detail, and a good sense of humor when things go wrong!

May your transactions be successful, your bugs be minimal, and your iftar be delicious! 🙏

Written while dreaming about iftar, powered by dates and coffee (not at the same time, obviously!) 🌙

P.S. If this code works, congratulations! If it doesn't, well... there's always next Ramadan! 😉

Remember: In software development, like in Ramadan, patience is not just a virtue - it's a requirement! 💫