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.

N'utilisez pas À côté du code. Le code de démonstration ne fonctionnera pas dans le cadre iFrame glitch.com.

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.

Une fois cet atelier de programmation terminé, vous pouvez copier et coller votre code JavaScript dans presque tous les autres sites, puis tester ces achats avec Google Pay.

N'oubliez pas que pour effectuer un paiement réel, vous devez utiliser l'environnement PRODUCTION, en utilisant un identifiant de marchand Google valide et en appelant cette API à partir d'un domaine précédemment ajouté à la liste blanche. Pour en savoir plus sur la procédure, consultez la checklist d'intégration.

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:

1. Charger la bibliothèque
2. Déterminer votre capacité à payer avec Google Pay
3. Afficher le bouton pour payer avec Google Pay
4. Créer et envoyer la demande de paiement
5. 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.

Important: Pour utiliser un environnement PRODUCTION, vous avez besoin d'un identifiant marchand Google. Vous pouvez en obtenir un en demandant l'accès en production lorsque votre application est prête.

Sachez que si vous utilisez Google Pay avec une passerelle de paiement, votre référence marchand Google est différente des autres identifiants de compte et de marchand demandés par votre fournisseur de services de paiement.

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.

Par la suite, nous ajouterons la propriété tokenizationSpecification, qui permet à l'appel PaymentDataRequest de définir la manière dont les données associées au mode de paiement sélectionné seront traitées. Mais passons étape par étape.

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

Vous trouverez la liste complète des paramètres que vous pouvez utiliser pour configurer le mode de paiement CARD dans la section CardParameters de la documentation.

À 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).

Notez que cette demande vérifie uniquement l'appareil ou le navigateur utilisé pour appeler l'API est compatible avec Google Pay.

Si vous souhaitez que cette méthode évalue également si l'utilisateur en question dispose d'un mode de paiement actif qui correspond à la configuration spécifiée sous allowedPaymentMethods, incluez la propriété booléenne existingPaymentMethodRequired: true dans l'objet IsReadyToPayRequest en plus des autres propriétés de la configuration de base.

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.

Si vous utilisez cet atelier pour intégrer Google Pay à votre application existante, veillez à utiliser la bonne commande ou le bon identifiant de nœud pour placer le bouton en conséquence.

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.

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

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

Dans la section parameters, vous pouvez spécifier une passerelle dans la liste des fournisseurs compatibles avec l'API Google Pay, ainsi qu'une configuration supplémentaire requise par chaque passerelle. Pour les besoins de cet atelier, il suffit d'utiliser la passerelle example, qui génère les résultats des tests pour les transactions exécutées.

Pour en savoir plus, consultez les conditions requises pour chaque passerelle ou les exemples de spécification de jetons.

Si vous souhaitez plutôt gérer vos transactions de paiement à partir de vos serveurs, consultez l'article sur le chiffrement des données de paiement pour les marchands pour en savoir plus sur les détails et les exigences de cette approche.

Paramètres supplémentaires

De la même manière, vous pouvez désormais fournir davantage d'informations sur les informations dont vous avez besoin pour effectuer la transaction. Découvrez comment, dans cet exemple, vous devez ajouter les propriétés billingAddressRequired et billingAddressParameters pour indiquer que, pour cette transaction, l'adresse de facturation de l'utilisateur est requise au format complet (y compris un numéro de téléphone).

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

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

Assurez-vous de ne demander que les informations strictement nécessaires afin d'effectuer la transaction. N'oubliez pas que la demande d'informations supplémentaires peut avoir un impact négatif sur la conversion.

Ajouter des informations sur la transaction

La propriété transactionInfo contient un objet contenant des informations financières sur la transaction, à savoir le prix et le code de devise (format ISO 4217), ainsi que l'état du prix, qui peut être définitif ou estimé en fonction de la nature de la transaction (par exemple, selon l'adresse de livraison spécifiée).

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

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

Ajouter des informations sur le marchand

La demande de paiement reçoit des informations sur le marchand qui effectue la demande sous la propriété merchantInfo. Dans cet atelier de programmation, vous vous concentrerez sur deux d'entre elles:

• merchantId attend l'identifiant associé à votre compte une fois que votre site est autorisé à fonctionner en production par Google. Notez que cette opération n'a pas été évaluée lors de l'utilisation de l'environnement TEST.
• merchantName est un nom visible par votre utilisateur pour votre site ou votre organisation. Elles peuvent apparaître dans la fiche "Paiement" de Google Pay pour fournir aux utilisateurs plus d'informations sur la personne à l'origine de la demande.

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

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

Demander des informations de paiement et traiter le résultat

Fusionnez maintenant la configuration précédemment définie dans l'objet paymentDataRequest final.

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

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

À ce stade, vous avez tout ce que vous devez demander à l'API Google Pay pour obtenir un mode de paiement valide. Pour ce faire, utilisez la méthode loadPaymentData de l'objet PaymentsClient en transmettant la configuration que vous venez de définir.

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

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

La fonction processPayment() est un espace réservé, indiqué ci-dessous.

En appelant la méthode loadPaymentData, vous lancez la présentation de la fiche de paiement Google Pay. En l'absence d'erreurs de configuration, vous pouvez consulter la liste des modes de paiement valides associés au compte actuellement connecté.

Vous pouvez ajouter n'importe quelle carte valide à votre compte pour vérifier que votre intégration fonctionne. Notez que votre carte n'est ni débitée, ni exposée.

Une fois la sélection effectuée, la feuille se ferme et un Promise est complété avec un objet PaymentData comprenant les informations pertinentes sur le mode de paiement sélectionné:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

Vous pouvez désormais utiliser les informations sur ce mode de paiement pour effectuer la transaction.

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

Remarque:Une fois que vous aurez mis à jour le tokenizationSpecification pour contenir des informations valides sur votre passerelle de paiement de votre choix, vous obtiendrez des identifiants de paiement basés sur le fonctionnement de la passerelle de paiement sélectionnée et l'environnement avec lequel vous exécutez les opérations. Consultez la liste des processeurs compatibles pour en savoir plus sur leur implémentation.

Jusqu'à présent, nous avons examiné les transactions associées à des montants de paiement fixes. Supposons toutefois que vous souhaitiez mettre à jour le prix en fonction de la sélection de certaines propriétés de la transaction (par exemple, les informations de livraison). Pour ce faire, fournissez le paramètre paymentDataCallback lorsque vous créez le client. Ce rappel vous permet de gérer les modifications de la transaction et d'appliquer les modifications en conséquence. Vous pouvez écouter les modifications apportées à l'adresse de livraison, à l'option de livraison et au mode de paiement sélectionnés. Dans cet exemple, vous allez écouter les modifications apportées à l'option de livraison sélectionnée. Pour commencer, définissez les variables contenant toutes les informations de livraison, puis modifiez les paymentDataRequest pour les inclure:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

Vous allez ensuite modifier la création de googlePayClient pour inclure un paymentDataCallback, qui est appelé chaque fois qu'une modification incluse dans callbackIntents est apportée à l'opération de paiement. Ce rappel inclut un objet dont les propriétés ont été modifiées. Vous pouvez utiliser ces modifications pour générer une transaction de paiement mise à jour:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

Lors du retour de ce nouvel objet dans le rappel, les informations présentées dans la feuille de paiement sont mises à jour pour refléter les modifications apportées à la transaction.

Maintenant que vous avez testé le fonctionnement de l'intégration, vous pouvez aller plus loin et précharger votre configuration de paiement dès que vous avez déterminé que Google Pay peut être utilisé. Cela se produit avant que l'utilisateur active (cliquez) le bouton de paiement Google Pay.

Si vous préchargez les données de paiement, lorsque l'utilisateur décide de payer, les informations dont la feuille a besoin pour le chargement sont déjà disponibles, ce qui réduit considérablement le temps de chargement et améliore ainsi l'expérience globale.

Cette méthode attend la même entrée que loadPaymentData. Autrement dit, vous pouvez utiliser le même objet paymentDataRequest défini précédemment. Il vous suffit maintenant d'inclure un appel à la méthode de préchargement dès que vous aurez vérifié que l'utilisateur peut utiliser Google Pay après le retour de isReadyToPay:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

Remarque:Si vous ne disposez pas de suffisamment de contexte pour déterminer le prix de la transaction pour le moment, vous pouvez définir le totalPriceStatus sur NOT_CURRENTLY_KNOWN.. Dans ce cas, vous n'êtes pas obligé d'inclure les propriétés totalPrice et currencyCode.

De la même manière, vous avez réduit le temps de chargement en préchargeant les données de paiement avant que l'utilisateur ne clique sur le bouton. L'amélioration de la réactivité de votre site devrait améliorer votre taux de conversion.

Vous avez intégré l'API Google Pay à l'exemple de site dans cet atelier de programmation ou votre propre application.

Pour commencer, n'oubliez pas de consulter la checklist de l'intégration. Une fois l'opération terminée, vous recevrez un identifiant de marchand à ajouter à la configuration de votre client. De même, si vous prévoyez d'utiliser (ou d'utiliser) une société de traitement des paiements ou une passerelle tierce, consultez la liste des fournisseurs acceptés sur Google Pay et configurez votre fournisseur. Si vous intégrez directement Google Pay, consultez la documentation sur ce sujet.

Points abordés

• Importez et configurez les API Google sur votre site.
• Déterminez la compatibilité de l'API et réagissez en conséquence.
• Ajoutez un bouton pour permettre aux utilisateurs de payer avec Google Pay.
• Charger et traiter les informations de paiement des utilisateurs précédemment stockés
• Optimisez le temps de chargement en préchargeant les informations de paiement.

Étapes suivantes

• En savoir plus sur Google Pay
• Consultez la checklist d'intégration et obtenez un identifiant de marchand.
• Étudiez les deux types d'intégrations et déterminez ce qui vous convient le mieux: vous pouvez l'intégrer directement, ou utiliser une passerelle de paiement ou une société de traitement des paiements.
• Configurez l'option Autoriser les paiements pour lancer la procédure de paiement et confirmer l'état d'autorisation du paiement. (authentification ou refus)

En savoir plus

• Consultez la documentation de référence sur les bibliothèques.
• Résolvez les problèmes de mise en œuvre si des erreurs s'affichent.
• En savoir plus sur l'intégration de Google Pay sur Android

Avez-vous trouvé ces informations utiles ?

Très utile ! Pour répondre à mes attentes. Pas vraiment.

Voulez-vous consulter d'autres ateliers de programmation pour vous aider avec d'autres types d'intégration (Android, intégration directe, API de fidélité) ?

Oui, c'est parfait ! Je suis satisfait(e) de ce que j'ai obtenu.