Android 適用的 React Native Google Pay API

1. 簡介

建構項目

完成本程式碼研究室後，您將擁有最低可行的 React Native 應用程式，並整合可運作的 Android 版 Google Pay。這個專案會擷取付款權杖，並傳送給付款服務供應商進行處理。

課程內容

  • 如何安裝及設定 Google Pay React Native 程式庫
  • 如何顯示 Google Pay 按鈕及處理點擊事件
  • 如何向 Google Pay 申請付款權杖

軟硬體需求

  • 您選擇的文字編輯器，用於編輯 JavaScript 檔案。
  • 為 Android 設定的 React Native 開發環境。
  • 如要使用正式版，您需要 Google Pay merchantId。在 Google Pay 和錢包主控台註冊只需一分鐘，不妨現在就完成註冊。

2. 建立 React Native 專案

建立專案檔案

  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;

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

資源

  • API 參考資料：Google Pay API 要求物件說明文件
  • API 參考資料：如要進一步瞭解允許的授權方法、允許的卡片網路和代碼化規格 (包括適當的閘道值)，請參閱 PaymentMethod。

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';
  1. 在 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');
    }
  });
};
  1. 在 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 整合至 Android 適用的 React Native 應用程式。

執行專案

執行下列指令來啟動應用程式：

npx react-native run-android

下一步該做什麼？

其他資源