‫Google Pay API ל-React Native ב-Android

1. מבוא

מה תפַתחו

בסיום ה-codelab הזה, תהיה לכם אפליקציית React Native עם שילוב פעיל של Google Pay ל-Android. הפרויקט הזה מאחזר אסימון תשלום שאפשר לשלוח לספק שירותי תשלומים לצורך עיבוד.

מה תלמדו

• איך מתקינים ומגדירים את ספריית Google Pay React Native
• איך להציג את לחצן Google Pay ולטפל בקליקים
• איך מבקשים טוקן תשלום מ-Google Pay

הדרישות

• עורך טקסט לבחירתכם לעריכת קובצי JavaScript.
• סביבת פיתוח של React Native שמוגדרת ל-Android.
• לסביבת הייצור, תצטרכו merchantId. ההרשמה במסוף של Google Pay ו-Wallet נמשכת רק דקה, אז כדאי לעשות את זה עכשיו.

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 בסביבת הפיתוח המשולבת (IDE) הרצויה ומחליפים את התוכן בקוד הבא:

   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 מכיל את ההגדרות המשותפות המינימליות לכל הבקשות. הגדרות נוספות יתווספו בהתאם לבקשה שהוגשה, ונבדוק אותן ב-codelab הזה.

מוסיפים את הקבועים של הגדרות 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'
        }
      }
    }
  ]
};

משאבים

• הפניית API: מאמרי העזרה בנושא אובייקטים של בקשות ב-Google Pay API
• API Reference: למידע נוסף על שיטות ההרשאה המותרות, רשתות הכרטיסים המותרות ומפרטי הטוקניזציה, כולל ערך השער המתאים, אפשר לעיין במאמר PaymentMethod.

השדות merchantId ו-merchantName לא נדרשים בסביבה TEST. עם זאת, חובה להשתמש בו בסביבה PRODUCTION. כדאי להיכנס עכשיו למסוף Google Pay ו-Wallet כדי לקבל את הגישה.

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. מוסיפים את click handler בתוך הרכיב 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 אחרי הוספת הלחצן וה-handler:

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. סיכום

כל הכבוד, סיימתם את ה-Codelab הזה! למדתם איך לשלב את Google Pay API באפליקציית React Native ל-Android.

הרצת הפרויקט

מריצים את הפקודה הבאה כדי להפעיל את האפליקציה:

npx react-native run-android

לאן כדאי ללכת מכאן

• בדיקת רשימת המשימות לשילוב

מקורות מידע נוספים

• הצטרפות לשיחה בערוץ ‎#payments ב-Discord
• עקבו אחרי ‎@GooglePayDevs ב-X
• צפייה בסרטונים שקשורים ל-Google Pay ב-YouTube