API Google Pay pour le Web 201: avancé

1. Introduction

Cet atelier de programmation est la suite de Principes de base 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 de 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'inscription à la Google Pay & Wallet Console ne prend qu'une minute. Autant s'en occuper tout de suite.

Suivez le tutoriel à l'aide de Firebase Studio

2. Personnalisation des boutons

Voici un bref aperçu de ButtonOptions. Consultez la documentation pour obtenir une explication plus détaillée.

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 codes régionaux compatibles incluent 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, simple, s'abonner

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 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 paiement vous permet d'enregistrer des fonctions pour gérer certains événements. La première concerne l'autorisation de paiement et la seconde la modification 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. Ensuite, recherchez 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 callbackIntents dans PaymentDataRequest pour déclencher les deux rappels pour cet atelier de programmation.

4. Autorisation de paiement

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

Recherchez la fonction onPaymentAuthorized() dans main.js que vous avez ajoutée à la dernière étape et 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 résultat positif ou une erreur. Dans votre projet, vous allez profiter de 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 dynamiques des prix permettent à un marchand de mettre à jour de manière dynamique les options de livraison et les informations sur les transactions en fonction d'une adresse de livraison choisie. Vous pouvez également mettre à jour de manière dynamique les informations sur les transactions en fonction d'une option de livraison choisie.

Recherchez la fonction onPaymentDataChanged() dans main.js que vous avez ajoutée à la dernière étape et 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 même appel à loadPaymentData(). Vous devez donc vous assurer de pouvoir gérer plusieurs appels. Par exemple, lorsque l'utilisateur change de compte, onPaymentDataChanged() est appelé à nouveau avec INITIALIZE et 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 ou les options de livraison sont modifiées dans la feuille de paiement.
2. La fonction onPaymentDataChanged() doit renvoyer une promesse qui résout un objet PaymentDataRequestUpdate spécifiant les nouvelles informations de transaction, les options de livraison et l'erreur pour mettre à jour la feuille de paiement.
3. redemptionCodes : 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 Python est installé, 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

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