অ্যান্ড্রয়েডে রিঅ্যাক্ট নেটিভের জন্য গুগল পে এপিআই

১. ভূমিকা

আপনি যা তৈরি করবেন

এই কোডল্যাবটি সম্পন্ন করার পর, আপনার কাছে অ্যান্ড্রয়েডের জন্য একটি কার্যকরী গুগল পে ইন্টিগ্রেশন সহ একটি ন্যূনতম কার্যকর রিয়্যাক্ট নেটিভ অ্যাপ থাকবে। এই প্রজেক্টটি একটি পেমেন্ট টোকেন সংগ্রহ করে, যা প্রসেসিংয়ের জন্য কোনো পেমেন্ট সার্ভিস প্রোভাইডারের কাছে পাঠানো যেতে পারে।

আপনি যা শিখবেন

• গুগল পে রিয়্যাক্ট নেটিভ লাইব্রেরি কীভাবে ইনস্টল এবং কনফিগার করবেন
• গুগল পে বাটন কীভাবে প্রদর্শন করবেন এবং ক্লিকগুলো কীভাবে সামলাবেন
• গুগল পে থেকে কীভাবে পেমেন্ট টোকেনের জন্য অনুরোধ করবেন

আপনার যা যা লাগবে

• জাভাস্ক্রিপ্ট ফাইল সম্পাদনা করার জন্য আপনার পছন্দের একটি টেক্সট এডিটর।
• অ্যান্ড্রয়েডের জন্য তৈরি একটি রিয়্যাক্ট নেটিভ ডেভেলপমেন্ট এনভায়রনমেন্ট।
• প্রোডাকশনের জন্য আপনার একটি Google Pay merchantId লাগবে। Google Pay ও ওয়ালেট কনসোলে এটি রেজিস্টার করতে মাত্র এক মিনিট সময় লাগে, তাই এখনই করে ফেলা ভালো।

২. রিয়্যাক্ট নেটিভ প্রজেক্টটি তৈরি করুন।

প্রজেক্ট ফাইল তৈরি করুন

1. googlepayrn নামে একটি নতুন React Native প্রজেক্ট তৈরি করুন।

   npx @react-native-community/cli@latest init googlepayrn
   

2. Google Pay React Native লাইব্রেরিটি ইনস্টল করুন।

   cd googlepayrn
   npm install @google/react-native-make-payment
   

3. আপনার পছন্দের IDE-তে App.tsx খুলুন এবং এর ভেতরের লেখাগুলো নিচের কোড দিয়ে প্রতিস্থাপন করুন:

   import React from 'react';
   import {
     SafeAreaView,
     StatusBar,
     StyleSheet,
     Text,
     useColorScheme,
     View,
   } from 'react-native';
   
   const App = () => {
     const isDarkMode = useColorScheme() === 'dark';
   
     const backgroundStyle = {
       backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
     };
   
     return (
       <SafeAreaView style={backgroundStyle}>
         <StatusBar
           barStyle={isDarkMode ? 'light-content' : 'dark-content'}
           backgroundColor={backgroundStyle.backgroundColor}
         />
         <View style={styles.container}>
           <Text style={styles.title}>Google Pay Codelab</Text>
           <View id="gpay-container" />
           <Text>Transaction info and errors will be logged to the console.</Text>
         </View>
       </SafeAreaView>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       padding: 24,
     },
     title: {
       fontSize: 24,
       fontWeight: '600',
       marginBottom: 24,
     },
   });
   
   export default App;
   

৩. গুগল পে কনফিগার করুন

একটি গুগল পে পেমেন্ট অনুরোধের জন্য একটি রিকোয়েস্ট অবজেক্ট প্রয়োজন। এখানে baseGooglePayRequest হিসেবে সংজ্ঞায়িত অবজেক্টটিতে সমস্ত অনুরোধের জন্য ন্যূনতম সাধারণ সেটিংস থাকে। অনুরোধের ধরনের ওপর নির্ভর করে অতিরিক্ত সেটিংস যোগ করা হবে, যা আমরা এই কোডল্যাবে পর্যালোচনা করব।

App.tsx এ Google Pay কনফিগারেশন কনস্ট্যান্টগুলো যোগ করুন:

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ]
};

সম্পদ

• এপিআই রেফারেন্স : গুগল পে এপিআই অনুরোধ অবজেক্টের ডকুমেন্টেশন
• এপিআই রেফারেন্স : অনুমোদিত অনুমোদন পদ্ধতি, অনুমোদিত কার্ড নেটওয়ার্ক এবং সঠিক গেটওয়ে মান সহ টোকেনাইজেশন স্পেসিফিকেশন সম্পর্কে আরও তথ্যের জন্য PaymentMethod দেখুন।

TEST এনভায়রনমেন্টে merchantId এবং merchantName প্রয়োজন নেই। তবে, PRODUCTION এনভায়রনমেন্টের জন্য এটির প্রয়োজন হবে। এক মিনিট সময় নিয়ে Google Pay & Wallet Console-এ গিয়ে এখনই আপনারটি সংগ্রহ করুন।

৪. অর্থপ্রদানের অনুরোধ করুন

গুগল পে বাটনটি চাপলে একটি পেমেন্ট রিকোয়েস্ট তৈরি হয়ে প্রদর্শিত হয়।

App.tsx এ পেমেন্টের বিবরণ এবং পেমেন্ট পদ্ধতি যোগ করুন:

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

৫. গুগল পে বাটনটি যোগ করুন

react-native-make-payment লাইব্রেরিতে একটি নেটিভ গুগল পে বাটন কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে।

1. App.tsx ফাইলের শীর্ষে ইম্পোর্টটি যোগ করুন:

import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';

2. App কম্পোনেন্টের ভিতরে ক্লিক হ্যান্ডলারটি যোগ করুন:

const checkCanMakePayment = () => {
  const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
  paymentRequest.canMakePayment().then((canMakePayment) => {
    if (canMakePayment) {
      paymentRequest.show().then((response) => {
        console.log(response);
      });
    } else {
      console.log('Google Pay unavailable');
    }
  });
};

3. JSX এবং এর স্টাইলে বাটন ও স্টাইলটি যোগ করুন:

<GooglePayButton
  style={styles.googlepaybutton}
  onPress={checkCanMakePayment}
  allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
  theme={GooglePayButtonConstants.Themes.Dark}
  type={GooglePayButtonConstants.Types.Buy}
  radius={4}
/>

googlepaybutton: {
  width: 200,
  height: 48,
},

বাটন এবং হ্যান্ডলার যোগ করার পর App.tsx :

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';

const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          'PAN_ONLY', 'CRYPTOGRAM_3DS'
        ],
        allowedCardNetworks: [
          'AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ]
};

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
  };

  const checkCanMakePayment = () => {
    const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
    paymentRequest.canMakePayment().then((canMakePayment) => {
      if (canMakePayment) {
        paymentRequest.show().then((response) => {
          // Send 'token' to your payment service provider (PSP)
          console.log(response);
        });
      } else {
        console.log('Google Pay unavailable');
      }
    });
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <Text style={styles.title}>Google Pay Codelab</Text>
        <GooglePayButton
          style={styles.googlepaybutton}
          onPress={checkCanMakePayment}
          allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
          theme={GooglePayButtonConstants.Themes.Dark}
          type={GooglePayButtonConstants.Types.Buy}
          radius={4}
        />
        <Text>Transaction info and errors will be logged to the console.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  googlepaybutton: {
    width: 200,
    height: 48,
  },
});

export default App;

কোডের ব্যাখ্যা

1. paymentDetails সেই লেনদেনটির বর্ণনা দেয় যা প্রক্রিয়া করা হবে।
2. paymentMethods সমর্থিত পদ্ধতিগুলো কনফিগার করে; Google Pay-এর জন্য baseGooglePayRequest সাথে google_pay ব্যবহার করুন।
3. checkCanMakePayment উপলব্ধ হলে পেমেন্ট শিটটি দেখায় এবং প্রতিক্রিয়াটি লগ করে।

৬. উপসংহার

এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি শিখেছেন কিভাবে অ্যান্ড্রয়েডের জন্য একটি রিয়্যাক্ট নেটিভ অ্যাপে গুগল পে এপিআই (Google Pay API) ইন্টিগ্রেট করতে হয়।

প্রকল্পটি চালান

আপনার অ্যাপটি চালু করতে নিম্নলিখিত কমান্ডটি চালান:

npx react-native run-android

এখান থেকে কোথায় যাওয়া যায়

• ইন্টিগ্রেশন চেকলিস্ট পর্যালোচনা করুন

অতিরিক্ত সম্পদ

• ডিসকর্ডের #payments চ্যানেলে আলোচনায় যোগ দিন।
• X-এ @GooglePayDevs-কে অনুসরণ করুন
• ইউটিউবে গুগল পে সম্পর্কিত ভিডিও দেখুন