💳 Razorpay & Stripe Payment Gateway Integration in React Native

আধুনিক অ্যাপগুলোর একটি গুরুত্বপূর্ণ অংশ হলো Online Payment Gateway Integration। React Native-এ সবচেয়ে জনপ্রিয় দুটি অপশন হলো Razorpay এবং Stripe। এই টিউটোরিয়ালে আমরা React Native-এ Razorpay এবং Stripe কিভাবে integrate করতে হয় পুরোটা সহজভাবে শিখবো — বাংলা ভাষায়, teal theme design এ।

---

🔹 Payment Gateway কী?

Payment Gateway হলো একটি secure payment processing system যা ব্যবহারকারীর কার্ড/UPI/wallet এর মাধ্যমে টাকা গ্রহণ করতে সাহায্য করে।

• Card Payment (Visa, MasterCard, Rupay)
• UPI (PhonePe, GPay, Paytm)
• NetBanking
• Wallet (Mobikwik, Freecharge)
• International Payment (Stripe)

---

🟢 Razorpay Integration in React Native

Razorpay মূলত Indian payment system-এর জন্য জনপ্রিয়। এটি UPI + Wallet + Net Banking সাপোর্ট করে।

📌 Step 1: Razorpay SDK Install

npm install react-native-razorpay

📌 Step 2: Android Configuration

Razorpay Android Native Module অটো লিঙ্ক হয়ে যাবে। কিন্তু আপনাকে Razorpay API Key Dashboard থেকে নিতে হবে।

📌 Step 3: Payment Screen Code

import RazorpayCheckout from 'react-native-razorpay';

const payNow = () => {
  var options = {
    description: 'Course Purchase',
    currency: 'INR',
    key: 'YOUR_RAZORPAY_KEY',
    amount: 49900, // 499 INR
    name: 'My Learning App',
    prefill: {
      email: 'user@gmail.com',
      contact: '9999999999',
      name: 'Student Name'
    }
  };

  RazorpayCheckout.open(options)
    .then((data) => {
      console.log("Payment Success: ", data.razorpay_payment_id);
    })
    .catch((error) => {
      console.log("Payment Failed: ", error.description);
    });
};
    

এই কোডটি user-কে Razorpay checkout modal দেখাবে এবং সফল হলে payment ID return করবে।

---

🔵 Stripe Integration in React Native

Stripe আন্তর্জাতিক পেমেন্টের জন্য সবচেয়ে জনপ্রিয় gateway। এটি US/EU/International Card Payment সাপোর্ট করে।

📌 Step 1: Stripe SDK Install

npm install @stripe/stripe-react-native

📌 Step 2: App.js এ Stripe Provider Setup

import { StripeProvider } from '@stripe/stripe-react-native';

export default function App() {
  return (
    <StripeProvider publishableKey="YOUR_STRIPE_PUBLISHABLE_KEY">
        <MainApp />
    </StripeProvider>
  );
}
    

📌 Step 3: Payment Sheet Implementation

import { useStripe } from '@stripe/stripe-react-native';

const Checkout = () => {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  const openPayment = async () => {
    const response = await fetch("https://your-backend/create-payment-intent");
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    await initPaymentSheet({
      merchantDisplayName: "My Learning App",
      paymentIntentClientSecret: paymentIntent,
      customerEphemeralKeySecret: ephemeralKey,
      customerId: customer
    });

    const result = await presentPaymentSheet();

    if (result.error) {
      console.log("Payment failed", result.error.message);
    } else {
      console.log("Payment success!");
    }
  };

  return <Button title="Pay Now" onPress={openPayment} />
};
    

Stripe Payment Sheet একটি highly secure payment UI যা international card payment সাপোর্ট করে।

---

🧾 সার্ভার সাইড Payment Intent (Stripe)

Stripe Payments 100% secure করতে সার্ভার সাইড payment intent create করতে হয়।

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

app.post("/create-payment-intent", async (req, res) => {
  const customer = await stripe.customers.create();
  const ephemeralKey = await stripe.ephemeralKeys.create(
    { customer: customer.id },
    { apiVersion: "2024-01-01" }
  );

  const paymentIntent = await stripe.paymentIntents.create({
    amount: 49900,
    currency: "usd",
    customer: customer.id,
  });

  res.json({
    paymentIntent: paymentIntent.client_secret,
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
  });
});
    

---

✔ কোন Gateway কখন ব্যবহার করবেন?

• Razorpay → India ভিত্তিক অ্যাপ / UPI ভিত্তিক অ্যাপ
• Stripe → International Card Payment / Global App
• Razorpay: খুব সহজ, UPI + Wallet + NetBanking
• Stripe: Highly Secure, Global Credit/Debit Cards
• Subscription Payment: Stripe সেরা
• Fast Checkout UI: Razorpay বেশি polished

---

📌 উপসংহার

React Native-এ Razorpay এবং Stripe integration খুবই সহজ। Proper API Keys, server-side verification এবং secure environment ব্যবহার করলে আপনার অ্যাপ professional-level payment system সাপোর্ট করতে পারবে। India-focused app → Razorpay Global app → Stripe এই দুই টেকনোলজি শেখা থাকলে যেকোনো paid course app / e-commerce app বানানো খুব সহজ।