API Google Pay pour React Native sur Android

1. Introduction

Objectifs de l'atelier

À la fin de cet atelier de programmation, vous disposerez d'une application React Native viable minimale avec une intégration Google Pay fonctionnelle pour Android. Ce projet récupère un jeton de paiement qui peut être envoyé à un fournisseur de services de paiement pour traitement.

Points abordés

  • Installer et configurer la bibliothèque Google Pay React Native
  • Afficher le bouton Google Pay et gérer les clics
  • Demander un jeton de paiement à Google Pay

Ce dont vous avez besoin

  • Un éditeur de texte de votre choix pour modifier les fichiers JavaScript.
  • Un environnement de développement React Native configuré pour Android.
  • Pour la production, vous aurez besoin d'un Google Pay merchantId. L'inscription à la Google Pay & Wallet Console ne prend qu'une minute. Vous pouvez donc le faire dès maintenant.

2. Créer le projet React Native

Créer des fichiers de projet

  1. Créez un nouveau projet React Native nommé googlepayrn.
    npx @react-native-community/cli@latest init googlepayrn
  2. Installez la bibliothèque Google Pay React Native.
    cd googlepayrn
npm install @google/react-native-make-payment
  3. Ouvrez App.tsx dans l'IDE de votre choix et remplacez le contenu par le code suivant :
    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. Configurer Google Pay

Une requête de paiement Google Pay nécessite un objet de requête. L'objet défini ici comme baseGooglePayRequest contient les paramètres communs minimaux pour toutes les requêtes. Des paramètres supplémentaires seront ajoutés en fonction de la requête effectuée, que nous examinerons dans cet atelier de programmation.

Ajoutez les constantes de configuration 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'
        }
      }
    }
  ]
};

Ressources

  • Documentation de référence sur les API : documentation sur les objets de requête de l'API Google Pay
  • Documentation de référence sur les API : consultez PaymentMethod pour en savoir plus sur les méthodes d'autorisation autorisées, les réseaux de cartes autorisés et les spécifications de tokenisation, y compris la valeur de passerelle appropriée.

4. Effectuer une requête de paiement

Lorsque vous appuyez sur le bouton Google Pay, une requête de paiement est créée et affichée.

Ajoutez les détails et les modes de paiement à App.tsx :

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

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

5. Ajouter le bouton Google Pay

La bibliothèque react-native-make-payment inclut un composant de bouton Google Pay natif.

  1. Ajoutez l'importation en haut de App.tsx :
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. Ajoutez le gestionnaire de clics dans le composant 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. Ajoutez le bouton et le style au JSX et à son style :
<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 après avoir ajouté le bouton et le gestionnaire :

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;

Explication du code

  1. paymentDetails décrit la transaction à traiter.
  2. paymentMethods configure les méthodes compatibles. Pour Google Pay, utilisez google_pay avec baseGooglePayRequest.
  3. checkCanMakePayment affiche la feuille de paiement lorsqu'elle est disponible et enregistre la réponse.

6. Conclusion

Félicitations ! Vous avez terminé cet atelier de programmation. Vous avez appris à intégrer l'API Google Pay dans une application React Native pour Android.

Exécuter le projet

Exécutez la commande suivante pour démarrer votre application :

npx react-native run-android

Étapes suivantes

Ressources supplémentaires