💳 React Native (TypeScript) - Razorpay Payment Gateway Integration

এই টিউটোরিয়ালে আমরা দেখব কিভাবে React Native (File-based + TypeScript) অ্যাপে Razorpay Payment Gateway integrate করা যায়। এতে আমরা payment process setup করব এবং real-time output দেখতে পারব।

📌 ধাপ ১: Razorpay Account Setup

প্রথমে Razorpay এ একটি account খুলুন। এরপর API keys (Key ID & Key Secret) তৈরি করুন যা আমাদের React Native অ্যাপে লাগবে।

📌 ধাপ ২: React Native Project তৈরি করা

আমরা file-based structure + TypeScript ব্যবহার করব। Terminal থেকে run করুন:

npx react-native init MyPaymentApp --template react-native-template-typescript
cd MyPaymentApp
  

প্রয়োজনীয় dependencies install করুন:

npm install react-native-razorpay
npx pod-install ios
  

📌 ধাপ ৩: Razorpay Integration Code

আমরা একটি file-based structure ব্যবহার করে PaymentScreen.tsx তৈরি করব:

import React from 'react';
import { View, Button, Alert } from 'react-native';
import RazorpayCheckout from 'react-native-razorpay';

const PaymentScreen: React.FC = () => {

  const handlePayment = () => {
    var options = {
      description: 'Test Payment',
      image: 'https://your-logo-url.com/logo.png',
      currency: 'INR',
      key: 'YOUR_RAZORPAY_KEY_ID',
      amount: 50000, // 500.00 INR
      name: 'My App',
      prefill: {
        email: 'user@example.com',
        contact: '9999999999',
        name: 'John Doe'
      },
      theme: { color: '#008080' } // Teal color theme
    }

    RazorpayCheckout.open(options).then((data: any) => {
      // Success
      Alert.alert('Payment Success', `Payment ID: ${data.razorpay_payment_id}`);
    }).catch((error: any) => {
      // Failure
      Alert.alert('Payment Failed', `${error.description}`);
    });
  }

  return (
    
      
    
  );
}

export default PaymentScreen;
  

📌 ধাপ ৪: File Structure Example

আমাদের ফাইল স্ট্রাকচার দেখতে হতে পারে এমনভাবে:

MyPaymentApp/
├─ src/
│  ├─ screens/
│  │  └─ PaymentScreen.tsx
│  ├─ components/
│  └─ navigation/
├─ App.tsx
└─ package.json
  

📌 ধাপ ৫: Output / Payment Flow

1️⃣ অ্যাপ ওপেন হলে Pay Now বাটন দেখা যাবে।
2️⃣ বাটনে ক্লিক করলে Razorpay Payment Modal খোলা হবে।
3️⃣ Payment successful হলে একটি Alert দেখাবে Payment ID সহ।
4️⃣ Payment failed হলে একটি Alert দেখাবে Error description।

✅ Summary

• React Native + TypeScript project তৈরি করুন।
• Razorpay Checkout package ইনস্টল করুন।
• PaymentScreen.tsx ফাইল তৈরি করে handlePayment function implement করুন।
• File-based structure বজায় রাখুন।
• Output দেখুন: Success এবং Failure Alert।
• UI Theme এর জন্য Teal ব্যবহার করা হয়েছে।

✔ এই ধাপগুলো অনুসরণ করলে আপনি সহজেই React Native TypeScript অ্যাপে Razorpay Payment Integration করতে পারবেন।