Google Pay pour le Web 201: avancé

1. Introduction

Cet atelier de programmation fait suite à Présentation de l'API Google Pay pour le Web et s'appuie sur le code écrit dans cet atelier. Pour effectuer cet atelier de programmation, assurez-vous d'abord d'avoir terminé celui-ci.

Points abordés

• Personnaliser le bouton Google Pay
• Lancer le processus de paiement
• Confirmer l'état d'autorisation du paiement
• Gérer les modifications d'adresse de livraison
• Gérer les codes promotionnels

Prérequis

• Un éditeur de texte de votre choix pour modifier les fichiers HTML et JavaScript.
• Le navigateur Web Google Chrome ou un autre moyen de tester un site Web local.
• Pour la production, vous aurez besoin d'un merchantId Google Pay. L'enregistrement dans la Google Pay & Wallet Console ne prend qu'une minute. Vous pouvez donc le faire dès maintenant.

Suivez-le dans Project IDX

2. Personnalisation des boutons

Voici un bref aperçu de ButtonOptions. Consultez la documentation pour en savoir plus.

Option	Nécessité	Valeurs
onClick	Obligatoire	Nom du gestionnaire d'événements JavaScript
allowedPaymentMethods	Optional	PaymentMethod[]
buttonColor	Optional	par défaut, noir, blanc
buttonLocale	Optional	Code ISO 639-1 à deux lettres. Les paramètres régionaux acceptés incluent les suivants : en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk et zh.
buttonRadius	Optional	Entre 0 et 100
buttonRootNode	Optional	HTMLDocument ou ShadowRoot
buttonSizeMode	Optional	statique, remplissage
buttonType	Optional	réserver, acheter, payer, faire un don, commander, payer, plain, souscrire

Recherchez la méthode renderGooglePayButton() dans votre fichier main.js et remplacez-la par le code indiqué ici.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Explication du code

1. La méthode de la bibliothèque createButton() utilise un argument de configuration ButtonOptions qui vous permet de définir l'apparence et le comportement du bouton.

3. Rappels de données de paiement

Le client de paiements fournit un mécanisme permettant d'enregistrer des fonctions à exécuter lorsque certains événements se produisent. La première concerne l'autorisation de paiement, et la seconde le changement des données de paiement.

1. Recherchez le commentaire // todo: paymentDataCallbacks dans main.js et remplacez-le par ce code.

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. Recherchez ensuite la section Event Handlers de main.js et ajoutez le code suivant à la fin de la section.

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. Enfin, recherchez le commentaire // todo: callbackIntents dans main.js et remplacez-le par ce code. Dans cet atelier de programmation, nous allons implémenter les quatre intents.

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

Explication du code

1. La propriété PaymentDataCallbacks comporte deux sous-propriétés, l'une pour un rappel d'autorisation de paiement et l'autre pour un rappel de modification des données de paiement.
2. Si vous implémentez des rappels, onPaymentAuthorized est obligatoire. Ce rappel est appelé lorsque la liste callbackIntents contient PAYMENT_AUTHORIZATION dans PaymentDataRequest.
3. onPaymentDataChanged est facultatif. Ce rappel est appelé lorsque la liste callbackIntents contient OFFER, SHIPPING_ADDRESS ou SHIPPING_OPTION dans PaymentDataRequest.
4. Définissez le callbackIntents dans le PaymentDataRequest pour déclencher les deux rappels de cet atelier de programmation.

4. Autorisation de paiement

Authorize Payments permet de lancer le processus de paiement et d'indiquer l'état de l'autorisation de paiement.

Recherchez la fonction onPaymentAuthorized() dans main.js que vous avez ajoutée à l'étape précédente, puis remplacez-la par le code suivant.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Explication du code

1. La fonction de rappel onPaymentAuthorized() est appelée avec un argument PaymentData et doit renvoyer une promesse. Dans cet exemple, la fonction choisit de manière aléatoire de renvoyer un message de réussite ou une erreur. Dans votre projet, vous utiliserez cette opportunité pour traiter la transaction avec votre passerelle à l'aide du jeton trouvé dans paymentData à paymentData.paymentMethodData.tokenizationData.token.

5. Modification des données de paiement

Les mises à jour de prix dynamiques permettent à un marchand de modifier dynamiquement les options de livraison et les informations sur la transaction en fonction de l'adresse de livraison choisie. Vous pouvez également mettre à jour dynamiquement les informations sur la transaction en fonction de l'option de livraison choisie.

Recherchez la fonction onPaymentDataChanged() dans main.js que vous avez ajoutée à l'étape précédente, puis remplacez-la par le code suivant.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

Le rappel INITIALIZE peut être déclenché plusieurs fois lors d'un seul appel à loadPaymentData(). Vous devez donc vous assurer de pouvoir gérer plusieurs appels. Par exemple, lorsque l'utilisateur change de compte, onPaymentDataChanged() est à nouveau appelé avec INITIALIZE avec les données du nouveau compte.

Explication du code

1. La fonction onPaymentDataChanged() utilise IntermediatePaymentData comme argument. Cette fonction est appelée lorsque l'adresse de livraison ou les options de livraison sont modifiées dans la fiche de paiement.
2. La fonction onPaymentDataChanged() doit renvoyer une promesse qui résout un objet PaymentDataRequestUpdate qui spécifie les nouvelles informations de transaction, les options de livraison et l'erreur à corriger pour mettre à jour la feuille de paiement.
3. redemptionCodes correspond à un ensemble de codes promotionnels saisis dans la feuille de paiement. Inclut les codes qui ont déjà été approuvés.

6. Conclusion

Félicitations ! Vous avez terminé cet atelier de programmation. Vous avez appris à :

Exécuter le projet

Tester avec Google Chrome

Dans le navigateur Web Google Chrome, ouvrez index.html en sélectionnant Fichier > Ouvrir un fichier dans le menu principal de Chrome. Chrome exécutera main.js lorsque le projet sera ouvert de cette manière. Il est possible que d'autres navigateurs Web n'autorisent pas l'exécution de JavaScript.

– ou –

Tester avec un serveur Web local

Si vous avez installé Python, exécutez python3 -m http.server à partir d'une invite de terminal dans le dossier racine pay-web-101.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Accédez ensuite à votre site à l'adresse http://localhost:8000.

Étapes suivantes

• Vérifier la checklist d'intégration

Ressources supplémentaires

• Rejoignez la conversation sur le canal#payments sur Discord.
• Suivez @GooglePayDevs sur X
• Regarder des vidéos sur Google Pay sur YouTube