‫Google Pay API for React Native على Android

1- مقدمة

ما ستنشئه

عند الانتهاء من هذا الدرس العملي، سيكون لديك تطبيق React Native بسيط يعمل ويتضمّن ميزة Google Pay المتوافقة مع Android. يستردّ هذا المشروع رمزًا مميزًا للدفع يمكن إرساله إلى مقدّم خدمة الدفع لمعالجته.

أهداف الدورة التعليمية

• كيفية تثبيت مكتبة Google Pay React Native وإعدادها
• كيفية عرض زر Google Pay والتعامل مع النقرات
• كيفية طلب رمز مميّز للدفع من Google Pay

المتطلبات

• محرّر نصوص من اختيارك لتعديل ملفات JavaScript
• بيئة تطوير React Native تم إعدادها لنظام التشغيل Android
• بالنسبة إلى بيئة الإنتاج، ستحتاج إلى merchantId في Google Pay. لا يستغرق التسجيل في Google Pay & Wallet Console سوى دقيقة واحدة، لذا ننصحك بإكمال هذه الخطوة الآن.

2. إنشاء مشروع React Native

إنشاء ملفات المشروع

1. أنشئ مشروعًا جديدًا في React Native باسم googlepayrn.

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

2. ثبِّت مكتبة Google Pay React Native.

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

3. افتح 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;
   

3- ضبط إعدادات Google Pay

يتطلّب طلب الدفع في Google Pay عنصر طلب. يحتوي العنصر المحدّد هنا باسم baseGooglePayRequest على الحدّ الأدنى من الإعدادات الشائعة لجميع الطلبات. ستتم إضافة إعدادات إضافية حسب الطلب المقدَّم، وسنراجعها في هذا الدرس العملي.

أضِف ثوابت إعداد Google Pay إلى App.tsx:

// 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'
        }
      }
    }
  ]
};

الموارد

• مرجع واجهة برمجة التطبيقات: مستندات عناصر الطلب في Google Pay API
• مرجع واجهة برمجة التطبيقات: يُرجى الرجوع إلى PaymentMethod للحصول على مزيد من المعلومات حول طرق التفويض المسموح بها وشبكات البطاقات المسموح بها ومواصفات الترميز، بما في ذلك قيمة البوابة الصحيحة.

لا يُشترط توفّر merchantId وmerchantName في بيئة TEST. ومع ذلك، سيكون مطلوبًا لبيئة PRODUCTION. يمكنك الانتقال إلى Google Pay & Wallet Console للحصول على بطاقتك الآن.

4. إرسال طلب دفع

عند الضغط على زر Google Pay، يتم إنشاء طلب دفع وعرضه.

أضِف تفاصيل الدفع وطُرق الدفع إلى App.tsx:

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

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

5- إضافة زر Google Pay

تتضمّن مكتبة react-native-make-payment مكوّن زر Google Pay أصليًا.

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، استخدِم google_pay مع baseGooglePayRequest.
3. تعرض checkCanMakePayment ورقة الدفع عند توفّرها وتسجّل الردّ.

6. الخاتمة

تهانينا على إكمال هذا الدرس التطبيقي حول الترميز. لقد تعرّفت على كيفية دمج Google Pay API في تطبيق React Native على Android.

تشغيل المشروع

نفِّذ الأمر التالي لبدء تطبيقك:

npx react-native run-android

الخطوة التالية

• مراجعة قائمة مهام الدمج

مراجع إضافية

• الانضمام إلى المحادثة في قناة ‎#payments على Discord
• متابعة @GooglePayDevs على X
• مشاهدة فيديوهات ذات صلة بـ Google Pay على YouTube