Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Cette page a été traduite par l'API Cloud Translation.

Réglez vos achats rapidement sur le Web grâce à Google Pay

L'API Google Pay permet aux utilisateurs de payer partout avec les informations de paiement stockées dans leur compte Google. Dans cet atelier, vous allez utiliser la bibliothèque cliente de Google Pay pour le Web afin d'améliorer l'expérience de règlement d'un exemple de boutique en ligne simplifiée, en créant une expérience plus rapide, plus pratique et plus sûre, ce qui augmentera le nombre de conversions et les clients.

Auto T-shirt Shop est une boutique innovante qui s'appuie sur les dernières avancées en matière d'intelligence artificielle et qui utilise des informations telles que les préférences de style, la météo, l'heure de l'année et les tendances mode pour vous suggérer l'article qui vous convient le mieux.

Les métriques d'engagement pour ce magasin sont disponibles. Malheureusement, les métriques reflètent également un grand nombre d'abandons lors du règlement. Pour résoudre ce problème, l'un des propriétaires du projet se souvient d'avoir vu une vidéo montrant les résultats prometteurs que Google Pay a obtenus pour des sites similaires. Il a donc décidé de faire un essai et de vous faire confiance pour l'intégration.

Objectif de cet atelier

Il présente l'intégration de Google Pay à un site existant, et explique comment payer avec un mode de paiement accepté par Google Pay, l'emplacement et le design du bouton de paiement, et l'exécution de la transaction.

Points abordés

Intégrer Google Pay sur une page de paiement existante
Choisir un mode de paiement parmi ceux que vous préférez
Déterminer si un utilisateur est prêt à payer avec Google Pay

Ce dont vous avez besoin

Un ordinateur avec accès à Internet
Connaissances de base en JavaScript

Exécuter l'exemple de site sur glitch.com

Pour que votre atelier de programmation soit opérationnel le plus rapidement possible, cet atelier de programmation est disponible sur glitch.com. Glitch est un environnement Web offert qui fournit un éditeur de code ainsi que des fonctionnalités d'hébergement et de déploiement que vous pouvez utiliser pour créer et diffuser des applications Web.

Pour commencer, utilisez le bouton ci-dessous pour provisionner un nouvel environnement de développement sur Glitch déjà configuré avec une copie de cet atelier de programmation.

Démarrer l'environnement de développement sur Glitch.com

Vous pouvez alors utiliser l'éditeur de code de Glitch pour modifier vos fichiers. Commencez à diffuser votre application à l'aide du menu Afficher situé en haut, puis choisissez Dans une nouvelle fenêtre.

Parcourir l'exemple de site

Comme vous pouvez le constater, le dépôt dispose d'une structure de fichiers simple. Le but principal de cet atelier de programmation est de vous permettre d'adapter cette intégration à vos applications existantes et futures, indépendamment du framework, des bibliothèques ou des outils avec lesquels vous souhaitez travailler.

Explorer le site

Cette place de marché de démonstration a été conçue de manière à ressembler à l'application existante ou potentielle aujourd'hui, avant d'ajouter un moyen d'achat. Nous vous recommandons de suivre cette application de démonstration, mais vous pouvez continuer à utiliser cet atelier de programmation pour intégrer Google Pay à vos applications existantes.

Si vous ne l'avez pas encore fait, ouvrez le site de démonstration actuel. Pour ce faire, cliquez sur le bouton Show (Afficher) si vous utilisez Glitch ou ouvrez l'URL où votre serveur Web local est exécuté.

Le site de démonstration n'est pas surprenant, n'est-ce pas ? Page de détails du produit avec une photo, le prix, une description, des sélecteurs et un bouton qui vous permettent d'accéder à un formulaire de paiement imaginaire et ordinaire.

L'objectif de cet atelier est de remplacer ce flux par une expérience en deux clics fournie par Google Pay.

Préparons cela !

Pour mieux comprendre cette intégration, elle se compose des étapes fondamentales suivantes:

Charger la bibliothèque
Déterminer votre capacité à payer avec Google Pay
Afficher le bouton pour payer avec Google Pay
Créer et envoyer la demande de paiement
Recueillir les résultats

Ajoutez la balise `script`

Pour commencer à utiliser l'API Google Pay, vous devez commencer par charger la bibliothèque JavaScript. Pour ce faire, ajoutez dans le fichier HTML une balise script à partir de laquelle vous souhaitez appeler l'API, y compris un attribut src qui pointe vers la bibliothèque JavaScript externe.

Pour cet atelier de programmation, ouvrez le fichier index.html. Vous devez constater que la balise de script a déjà été incluse pour vous:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

En plus de src, vous avez ajouté deux autres attributs.

async permet de charger et d'exécuter votre script de manière asynchrone parallèlement au reste de la page, de sorte que le premier temps de chargement de votre document ne soit pas affecté.
onload vous aide à différer l'exécution du code qui dépend de cette bibliothèque jusqu'au chargement de votre script. La fonction que vous spécifiez dans cet attribut est ensuite exécutée. Dans ce cas, la fonction est onGooglePayLoaded.

Instancier le client API

Une fois votre script chargé, vous pouvez commencer à utiliser cette bibliothèque. Commencez par instancier l'objet client que vous utiliserez pour effectuer des appels vers l'API Google Pay plus tard.

Modifiez le fichier index.js, qui fait déjà partie de la structure de fichiers de ce projet. Remplacez la fonction onGooglePayLoaded par le code suivant.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

Le client de paiement est initialisé avec un objet PaymentOptions. En définissant environment sur TEST, vous pouvez tester l'intégration d'informations de paiement factices. Lorsque vous êtes prêt à créer des opérations compatibles avec les transactions réelles, vous pouvez définir la propriété environment sur PRODUCTION.

Aperçu

Nous avons chargé la bibliothèque cliente JavaScript de l'API Google Pay. À présent, configurez-la pour effectuer des appels d'API.

Toutes les autres modifications de code suivantes seront apportées au fichier index.js pendant l'atelier de programmation.

Squelette

Chaque fois que vous communiquez avec l'API Google Pay, vous devez inclure certains paramètres de configuration dans votre requête, comme la version de l'API que vous ciblez. Pour les besoins de cet atelier de programmation, cet objet contient également des informations sur les modes de paiement acceptés dans votre application. La structure finale ressemble à ceci:

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

La propriété allowedPaymentMethods utilise une liste de modes de paiement. Pour chaque mode de paiement, vous devez inclure les propriétés suivantes:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Seuls les établissements type et parameters sont tenus de déterminer si l'utilisateur concerné peut payer avec Google Pay.

Configuration du mode de paiement

Dans cet exemple, vous n'acceptez qu'une seule configuration, permettant les paiements par carte pour Mastercard et Visa, à la fois dans des formulaires tokenisés et des numéros de compte principaux (PAN).

Voici comment votre configuration doit être définie dans index.js:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

À propos des mécanismes d'authentification des cartes : lorsque vous effectuez des paiements, vous pouvez sélectionner les cartes en fonction de l'authentification des informations de transaction auprès de l'outil de traitement ou de la passerelle:

Lorsque vous utilisez l'authentification du numéro de compte principal (PAN), le numéro de compte de la carte et le mois et l'année d'expiration sont envoyés à la société de traitement des paiements. Ainsi, vos clients peuvent utiliser n'importe quelle carte précédemment sécurisée associée à leur compte Google.
L'authentification dynamique basée sur le cryptogramme fonctionne en combinaison avec le jeton de carte, un mécanisme qui remplace les informations de votre carte client par une valeur aléatoire que seul l'émetteur de la carte peut comprendre. Combiné aux cryptogrammes dynamiques, ce jeton garantit que le jeton envoyé au processeur est toujours différent pour chaque transaction, ce qui augmente considérablement la sécurité dans ces opérations.

Synthèse

Résumé.

Vous avez défini un mode de paiement à accepter sur votre site Web, et vous allez utiliser la version 2.0 de l'API. La configuration obtenue doit se présenter comme suit:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Maintenant que votre configuration de base est prête, passons à la partie amusante.

L'un des principaux objectifs de Google Pay est de proposer un environnement de paiement plus rapide et plus pratique à vos utilisateurs. Cela s'applique non seulement aux utilisateurs qui peuvent utiliser Google Pay, mais aussi aux situations où ils ne peuvent pas le faire. La requête isReadyToPay vous permet de déterminer si vous êtes prêt à payer avec Google Pay et de modifier l'expérience sur votre site en conséquence.

Votre utilisateur est-il en mesure de payer avec Google Pay ?

Vous devez d'abord vérifier si un utilisateur spécifique qui est sur le point de payer sur votre site peut utiliser Google Pay pour le faire. Vous devez indiquer la version de l'API Google Pay et les modes de paiement autorisés pour votre site. C'est exactement ce que contient l'objet de configuration de base défini à l'étape précédente.

Dans la fonction onGooglePayLoaded() de index.js, collez le contenu suivant:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

Si l'appel échoue ou renvoie une réponse infructueuse, aucune autre action de votre part n'est requise dans Google Pay. Dans ce cas, l'étape suivante la plus appropriée consiste à afficher une UI supplémentaire compatible avec les autres modes de paiement.

En revanche, si la réponse aboutit, vous pouvez autoriser vos utilisateurs à utiliser Google Pay. Vous pouvez donc ajouter un bouton pour lancer le processus de paiement à l'activation de la fonctionnalité (par exemple, un clic sur le bouton).

Ajouter un bouton pour payer avec Google Pay

Même si vous pouvez utiliser n'importe quel bouton respectant les consignes relatives à la marque Google Pay pour commencer le processus de paiement, nous vous recommandons d'utiliser l'API Google Pay. Il vous permet non seulement d'utiliser les consignes relatives à la marque avec précision, mais aussi d'utiliser les autres améliorations intégrées directement au bouton, comme la localisation.

Pour générer un bouton, utilisez la méthode createButton dans l'objet PaymentsClient, y compris ButtonOptions pour configurer le bouton.

Dans la fonction createAndAddButton() de index.js, collez le contenu suivant:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

La seule propriété obligatoire requise lorsque vous utilisez createButton est onClick, qui est nécessaire pour déterminer l'objet ou la fonction de rappel à déclencher chaque fois que vos utilisateurs activent le bouton. buttonColor et buttonType vous permettent de personnaliser l'apparence de votre bouton. Ajustez-les en fonction des exigences liées au thème et à l'interface utilisateur de votre application.

Une fois le bouton créé, il vous suffit de l'ajouter à un nœud approprié dans le DOM. Dans cet exemple, un nœud div identifié avec buy-now est utilisé à cette fin.

Notez que vous avez également défini une fonction pour gérer les événements de clic sur un bouton. Dans la section suivante, vous allez utiliser cette fonction pour demander un mode de paiement.

Préparer la demande de paiement

À ce stade, vous avez chargé l'API Google Pay et déterminé que l'utilisateur de votre site peut utiliser Google Pay pour effectuer un paiement. Le bouton de paiement Google Pay s'affiche alors dans l'interface utilisateur. L'utilisateur peut désormais lancer la transaction. Vous allez maintenant charger la feuille de paiement finale contenant les modes de paiement disponibles pour les différents utilisateurs connectés.

Tout comme vous l'avez fait précédemment, lors de la définition de la requête isReadyToPay, cet appel requiert également les propriétés de l'objet de configuration de base défini précédemment (apiVersion, apiVersionMinor et allowedPaymentMethods), en plus des nouvelles. Cette fois, nous avons ajouté une nouvelle propriété, tokenizationSpecification, et des parameters supplémentaires dans vos modes de paiement, pertinents pour la demande. En outre, transactionInfo et merchantInfo doivent être ajoutés.

Incluez des informations supplémentaires requises dans vos modes de paiement

Commencez par créer une copie du mode de paiement par carte de base utilisé précédemment. Ce mode de paiement par carte nécessite désormais une propriété tokenizationSpecification pour définir la façon de traiter les données liées au mode de paiement sélectionné, ainsi que des exigences supplémentaires concernant la transaction, dans cet exemple, une adresse de facturation complète et un numéro de téléphone.

La propriété `tokenizationSpecification`

La spécification de tokénisation détermine comment le mode de paiement sélectionné par vos clients est traité et utilisé pour effectuer une transaction.

Il existe deux types de stratégies de traitement. Si vous traitez une transaction de paiement à partir de vos serveurs conforme à la norme PCI DSS, utilisez le type de spécification DIRECT. Dans cet exemple, vous utilisez une passerelle de paiement pour traiter le paiement, vous devez donc définir le type de spécification PAYMENT_GATEWAY.