این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

API گوگل پی برای ری‌اکت نیتیو در اندروید

۱. مقدمه

آنچه خواهید ساخت

با تکمیل این آزمایشگاه کد، شما یک برنامه React Native حداقلی و قابل اجرا با ادغام Google Pay برای اندروید خواهید داشت. این پروژه یک توکن پرداخت را بازیابی می‌کند که ممکن است برای پردازش به یک ارائه‌دهنده خدمات پرداخت ارسال شود.

آنچه یاد خواهید گرفت

نحوه نصب و پیکربندی کتابخانه React Native گوگل پی
نحوه نمایش دکمه Google Pay و مدیریت کلیک‌ها
نحوه درخواست توکن پرداخت از گوگل پی

آنچه نیاز دارید

یک ویرایشگر متن به دلخواه شما برای ویرایش فایل‌های جاوا اسکریپت.
یک محیط توسعه React Native که برای اندروید تنظیم شده است.
برای تولید، به یک شناسه تجاری گوگل پی (Google Pay merchantId ) نیاز دارید. ثبت نام در کنسول گوگل پی و کیف پول (Google Pay & Wallet Console) فقط یک دقیقه طول می‌کشد، پس بهتر است همین الان این کار را انجام دهید.

۲. ایجاد پروژه React Native

ایجاد فایل‌های پروژه

یک پروژه React Native جدید با نام googlepayrn ایجاد کنید.
```
npx @react-native-community/cli@latest init googlepayrn
```
کتابخانه React Native گوگل پی را نصب کنید.
```
cd googlepayrn
npm install @google/react-native-make-payment
```

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;

۳. پیکربندی گوگل پی

یک درخواست پرداخت گوگل پی به یک شیء درخواست نیاز دارد. شیء تعریف شده در اینجا به عنوان 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'
        }
      }
    }
  ]
};

منابع

مرجع API : مستندات اشیاء درخواست API گوگل پی
مرجع API : برای اطلاعات بیشتر در مورد روش‌های مجوزدهی مجاز، شبکه‌های کارتی مجاز و مشخصات توکن‌سازی از جمله مقدار مناسب درگاه، به PaymentMethod مراجعه کنید.

۴. درخواست پرداخت بدهید

وقتی دکمه Google Pay فشرده می‌شود، یک درخواست پرداخت ایجاد و نمایش داده می‌شود.

جزئیات پرداخت و روش‌های پرداخت را به App.tsx اضافه کنید:

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

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

۵. دکمه گوگل پی را اضافه کنید

کتابخانه react-native-make-payment شامل یک کامپوننت دکمه Google Pay بومی است.

ایمپورت را در بالای App.tsx اضافه کنید:

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

کنترل‌کننده‌ی کلیک را درون کامپوننت 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');
    }
  });
};

دکمه و استایل را به 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;

توضیح کد

paymentDetails تراکنشی را که باید پردازش شود، شرح می‌دهد.
paymentMethods متدهای پشتیبانی‌شده را پیکربندی می‌کند؛ برای Google Pay google_pay به همراه baseGooglePayRequest استفاده کنید.
checkCanMakePayment در صورت موجود بودن، برگه پرداخت را نشان می‌دهد و پاسخ را ثبت می‌کند.

۶. نتیجه‌گیری

تبریک می‌گویم که این Codelab را به پایان رساندید! شما یاد گرفتید که چگونه API گوگل پی را در یک برنامه React Native برای اندروید ادغام کنید.

اجرای پروژه

برای شروع برنامه خود، دستور زیر را اجرا کنید:

npx react-native run-android

از اینجا به کجا برویم؟

چک لیست ادغام را مرور کنید

منابع اضافی

به گفتگو در کانال #payments در دیسکورد بپیوندید
@GooglePayDevs را در X دنبال کنید
ویدیوهای مرتبط با گوگل پی را در یوتیوب تماشا کنید