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

1. ভূমিকা

তুমি কী তৈরি করবে

এই কোডল্যাবটি সম্পন্ন হওয়ার পর, আপনার কাছে Android এর জন্য একটি কার্যকর Google Pay ইন্টিগ্রেশন সহ একটি ন্যূনতম কার্যকর React Native অ্যাপ থাকবে। এই প্রকল্পটি একটি পেমেন্ট টোকেন পুনরুদ্ধার করে যা প্রক্রিয়াকরণের জন্য একটি পেমেন্ট পরিষেবা প্রদানকারীর কাছে পাঠানো যেতে পারে।

তুমি কি শিখবে

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

তোমার যা লাগবে

• জাভাস্ক্রিপ্ট ফাইল সম্পাদনা করার জন্য আপনার পছন্দের একটি টেক্সট এডিটর।
• অ্যান্ড্রয়েডের জন্য একটি রিঅ্যাক্ট নেটিভ ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করা হয়েছে।
• উৎপাদনের জন্য, আপনার একটি Google Pay merchantId প্রয়োজন হবে। Google Pay & Wallet Console- এ নিবন্ধন করতে মাত্র এক মিনিট সময় লাগে, তাই এখনই এটির যত্ন নেওয়া উচিত।

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

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

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

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

2. গুগল পে রিঅ্যাক্ট নেটিভ লাইব্রেরি ইনস্টল করুন।

   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;
   

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

Google Pay পেমেন্ট অনুরোধের জন্য একটি অনুরোধ বস্তুর প্রয়োজন। এখানে 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'
        }
      }
    }
  ]
};

রিসোর্স

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

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

৪. পেমেন্টের অনুরোধ করুন

যখন Google Pay বোতামটি চাপা হয়, তখন একটি পেমেন্ট অনুরোধ তৈরি হয় এবং দেখানো হয়।

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 পেমেন্ট শিটটি উপলব্ধ থাকলে তা দেখায় এবং প্রতিক্রিয়া লগ করে।

৬. উপসংহার

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

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

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

npx react-native run-android

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

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

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

• ডিসকর্ডের #পেমেন্টস চ্যানেলে কথোপকথনে যোগ দিন
• X-এ @GooglePayDevs-কে অনুসরণ করুন
• YouTube-এ Google Pay সম্পর্কিত ভিডিও দেখুন