Google Pay API für React Native unter Android

1. Einführung

Aufgaben

Nach Abschluss dieses Codelabs haben Sie eine minimal funktionsfähige React Native-App mit einer funktionierenden Google Pay-Integration für Android. Dieses Projekt ruft ein Zahlungstoken ab, das zur Verarbeitung an einen Zahlungsdienstleister gesendet werden kann.

Lerninhalte

  • Google Pay React Native-Bibliothek installieren und konfigurieren
  • Google Pay-Schaltfläche anzeigen und Klicks verarbeiten
  • Zahlungstoken von Google Pay anfordern

Voraussetzungen

  • Ein Texteditor Ihrer Wahl zum Bearbeiten von JavaScript-Dateien.
  • Eine für Android eingerichtete React Native-Entwicklungsumgebung.
  • Für die Produktion benötigen Sie eine Google Pay merchantId. Die Registrierung in der Google Pay & Wallet Console dauert nur eine Minute. Sie können sie also jetzt erledigen.

2. React Native-Projekt erstellen

Projektdateien erstellen

  1. Erstellen Sie ein neues React Native-Projekt mit dem Namen googlepayrn.
    npx @react-native-community/cli@latest init googlepayrn
  2. Installieren Sie die Google Pay React Native-Bibliothek.
    cd googlepayrn
npm install @google/react-native-make-payment
  3. Öffnen Sie App.tsx in Ihrer IDE und ersetzen Sie den Inhalt durch den folgenden Code:
    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 konfigurieren

Für eine Google Pay-Zahlungsanfrage ist ein Anfrageobjekt erforderlich. Das hier als baseGooglePayRequest definierte Objekt enthält die gemeinsamen Mindesteinstellungen für alle Anfragen. Je nach Anfrage werden zusätzliche Einstellungen hinzugefügt, die wir in diesem Codelab durchgehen.

Fügen Sie App.tsx die Google Pay-Konstanten hinzu:

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

Ressourcen

  • API-Referenz: Dokumentation zu Google Pay API-Anfrageobjekten
  • API-Referenz: Weitere Informationen zu den zulässigen Autorisierungsmethoden, zulässigen Kartennetzwerken und Tokenisierungsspezifikationen, einschließlich des richtigen Gateway-Werts, finden Sie unter PaymentMethod.

4. Zahlungsanfrage stellen

Wenn die Google Pay-Schaltfläche gedrückt wird, wird eine Zahlungsanfrage erstellt und angezeigt.

Fügen Sie App.tsx die Zahlungsdetails und Zahlungsmethoden hinzu:

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

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

5. Google Pay-Schaltfläche hinzufügen

Die react-native-make-payment Bibliothek enthält eine native Google Pay-Schaltflächenkomponente.

  1. Fügen Sie den Import oben in App.tsx hinzu:
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. Fügen Sie den Klick-Handler in die App Komponente ein:
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. Fügen Sie die Schaltfläche und den Stil zum JSX und zum Stil hinzu:
<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 nach dem Hinzufügen der Schaltfläche und des Handlers:

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;

Erläuterung zum Code

  1. paymentDetails beschreibt die Transaktion, die verarbeitet werden soll.
  2. paymentMethods konfiguriert unterstützte Methoden. Verwenden Sie für Google Pay google_pay mit baseGooglePayRequest.
  3. checkCanMakePayment zeigt das Zahlungsformular an, wenn es verfügbar ist, und protokolliert die Antwort.

6. Fazit

Sie haben dieses Codelab abgeschlossen. Sie haben gelernt, wie Sie die Google Pay API in eine React Native-App für Android einbinden.

Projekt ausführen

Führen Sie den folgenden Befehl aus, um Ihre App zu starten:

npx react-native run-android

So geht es weiter

Zusätzliche Ressourcen