API Google Pay : coder une page de paiement avec des serveurs MCP et Antigravity

1. Présentation

Le développement logiciel moderne passe rapidement de la programmation impérative au développement natif de l'IA. Dans cet atelier de programmation, vous allez apprendre à créer et à améliorer les intégrations Google Pay à l'aide du serveur MCP Google Pay &Wallet Developer (ci-après appelé serveur MCP Google Pay) et d'Antigravity, un outil natif de l'IA.

Le protocole MCP (Model Context Protocol) est une norme ouverte qui permet aux modèles d'IA d'accéder en toute sécurité à des outils externes, à de la documentation en direct et à des points de terminaison d'API à distance. Grâce à un workflow natif de l'IA dans Antigravity, vous allez configurer votre environnement pour communiquer avec le serveur MCP Google Pay et créer rapidement un bouton Google Pay prêt pour la production sur une page de paiement.

Vous utiliserez ensuite des méthodologies de développement basées sur les spécifications pour améliorer votre intégration avec de nouvelles fonctionnalités d'API, en activant plus précisément les transactions initiées par le marchand pour les paiements récurrents et en utilisant le cardFundingSource signal pour le routage et la tarification dynamiques. Enfin, vous configurerez un pipeline de surveillance autonome basé sur un LLM pour observer et résoudre les problèmes de paiement pendant la nuit.

Points abordés

• Configurer et connecter le serveur MCP Google Pay à Antigravity ou à d'autres outils d'IA
• Utiliser le serveur MCP Google Pay pour interroger la documentation
• Créer une intégration de paiement Google Pay de pointe directement dans Antigravity
• Implémenter le routage et la tarification dynamiques avec le développement basé sur les spécifications
• Améliorer les cas d'utilisation d'abonnements récurrents avec le développement basé sur les spécifications
• Déployer une surveillance à long terme et des pipelines agentiques automatisés à l'aide d'Antigravity
• Implémenter le paiement express sans connexion pour optimiser l'entonnoir de conversion

2. Préparation

Avant de commencer

Pour utiliser le serveur MCP Google Pay, vous devez créer un projet Google Cloud et activer l'API Google Pay &Wallet Developer.

⚠️ Attention : Cet atelier utilise des ressources Cloud facturables. Pour éviter les frais continus, suivez la procédure de nettoyage à la fin de l'atelier. Les nouveaux utilisateurs peuvent bénéficier d'un essai sans frais de 300 $.

1. Dans la console Cloud, sur la page de sélection de projet, sélectionnez ou créez un projet Google Cloud.
   Accéder au sélecteur de projet
2. Activez l'API Google Pay &Wallet Developer.
   Activer l'API
   • Pour activer les API, vous avez besoin du rôle IAM Administrateur d'utilisation du service (roles/serviceusage.serviceUsageAdmin), qui contient l'autorisation serviceusage.services.enable. Découvrez comment attribuer des rôles.
   

Rôles requis

Pour obtenir les autorisations nécessaires pour utiliser le serveur MCP Google Pay, demandez à votre administrateur de vous accorder les rôles IAM suivants sur le projet Google Cloud :

• Effectuer des appels d'outils MCP : utilisateur de l'outil MCP (roles/mcp.toolUser)

Pour en savoir plus, consultez Gérer l'accès aux projets.

Authentification et autorisation

Le serveur MCP Google Pay utilise le protocole OAuth 2.0 avec IAM pour l'authentification et l'autorisation.

Suivez ces étapes pour créer un ID client et un code secret OAuth 2.0 pour que vos outils MCP puissent accéder aux ressources Google Cloud :

1. Dans la console Google Cloud, accédez à Google Auth Platform > Clients > Créer un client.
   Accéder à la page Créer un client
2. Dans la liste Type d'application, sélectionnez le type approprié pour votre application d'IA :
   • Pour Antigravity, Claude.ai, Claude Code et ChatGPT, sélectionnez Application Web.
   • Pour CLI Gemini et VS Code, sélectionnez Application de bureau.
3. Dans le champ Nom, saisissez un nom pour votre application (par exemple, Antigravity).
4. Dans la section URI de redirection autorisés, cliquez sur + Ajouter un URI, puis ajoutez l'URI de redirection requis pour votre application d'IA :
   • Antigravity: https://antigravity.google/oauth-callback
   • Autres outils d'IA : consultez Configuration du client OAuth.
5. Cliquez sur Créer. Une fois la création terminée, accédez aux détails du client. Copiez l'ID client et le code secret du client, puis stockez-les en lieu sûr.
6. Dans la console Google Cloud, accédez à Google Auth Platform > Audience, cliquez sur Publier l'application, puis sur Confirmer pour remplacer État de publication par En production.
   Accéder à Audience
   
   

3. Configurer les serveurs MCP

Configurer votre application d'IA

Vous devez ensuite fournir à votre application d'IA les détails de configuration du serveur.

Antigravity 2.0

Pour configurer Antigravity 2.0 :

1. Accédez à Settings > Customizations (Paramètres > Personnalisations), puis, sous Installed MCP Servers (Serveurs MCP installés), cliquez sur Open MCP Config (Ouvrir la configuration MCP) pour ouvrir le fichier de configuration Antigravity (exemple : ~/.gemini/antigravity/mcp_config.json).
2. Ajoutez ou mettez à jour l'entrée google-pay-wallet-dev dans mcpServers avec votre ID client et votre code secret OAuth (remplacez ANTIGRAVITY_CLIENT_ID et ANTIGRAVITY_CLIENT_SECRET par l'ID client et le code secret OAuth 2.0 créés) :

   {
     "mcpServers": {
       "google-pay-wallet-dev": {
         "serverUrl": "https://paydeveloper.googleapis.com/mcp",
         "oauth": {
           "clientId": "ANTIGRAVITY_CLIENT_ID",
           "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
         }
       }
     }
   }
   

3. Accédez à Settings > Customizations (Paramètres > Personnalisations), puis, sous Installed MCP Servers (Serveurs MCP installés), cliquez sur Refresh (Actualiser).
4. Cliquez sur Authenticate (S'authentifier) et suivez le flux OAuth :
   • Si le message Google n'a pas validé cette application s'affiche, cliquez sur Advanced (Avancé), puis sur Go to antigravity.google (unsafe) (Accéder à antigravity.google (non sécurisé)) pour continuer. Cet avertissement s'affiche, car votre client OAuth n'est pas validé. Vous pouvez continuer en toute sécurité pendant le développement.
     
     
   • Sélectionnez les autorisations requises (Consulter, modifier et supprimer vos intégrations de l'API Google Pay), puis cliquez sur Continue (Continuer) pour accorder l'accès à Antigravity.
     
5. Copiez le code d'autorisation et envoyez-le dans la fenêtre correspondante.
   

IDE Antigravity

Pour configurer l'IDE Antigravity :

1. Dans l'IDE Antigravity, cliquez sur le menu Additional options (Options supplémentaires) dans Agent pane > MCP Servers > Manage MCP Servers (Volet de l'agent > Serveurs MCP > Gérer les serveurs MCP).
2. En haut du volet "Manage MCP Servers" (Gérer les serveurs MCP), cliquez sur Afficher la configuration brute pour modifier le fichier mcp_config.json (remplacez ANTIGRAVITY_CLIENT_ID et ANTIGRAVITY_CLIENT_SECRET par l'ID client et le code secret OAuth 2.0 créés) :

   {
     "mcpServers": {
       "google-pay-wallet-dev": {
         "serverUrl": "https://paydeveloper.googleapis.com/mcp",
         "oauth": {
           "clientId": "ANTIGRAVITY_CLIENT_ID",
           "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
         }
       }
     }
   }
   

3. Revenez à Manage MCP servers (Gérer les serveurs MCP) et cliquez sur Refresh (Actualiser). Cliquez sur Authenticate (S'authentifier) pour ouvrir l'onglet Customizations (Personnalisations) dans Agent Settings (Paramètres de l'agent).
4. Cliquez sur Authenticate (S'authentifier) et suivez le flux OAuth :
   • Si le message Google n'a pas validé cette application s'affiche, cliquez sur Advanced (Avancé), puis sur Go to antigravity.google (unsafe) (Accéder à antigravity.google (non sécurisé)) pour continuer. Cet avertissement s'affiche, car votre client OAuth n'est pas validé. Vous pouvez continuer en toute sécurité pendant le développement.
     
     
   • Sélectionnez les autorisations requises (Consulter, modifier et supprimer vos intégrations de l'API Google Pay), puis cliquez sur Continue (Continuer) pour accorder l'accès à Antigravity.
     
5. Copiez le code d'autorisation et envoyez-le dans la fenêtre correspondante.
   

Autres outils d'IA

Pour configurer d'autres outils d'IA, consultez le guide Configurer votre application d'IA.

4. Créer de nouvelles intégrations Google Pay dans le paiement

Le développement logiciel traditionnel nécessite souvent de parcourir des spécifications d'API volumineuses, de copier du code récurrent et de connecter des paramètres. En revanche, avec le serveur MCP Google Pay configuré dans Antigravity, vous pouvez demander à votre LLM de créer une expérience de paiement prête pour la production.

1. Demander à Antigravity de créer le paiement : ouvrez une session de chat Antigravity active (avec le serveur MCP Google Pay activé) et exécutez le prompt de création suivant :

   Act as a developer and integrate the Google Pay API into a checkout page using HTML, CSS, and vanilla JavaScript. 
   
   Please ensure the implementation follows these Google Pay best practices:
   1. *Check Readiness*: As the first step, call `isReadyToPay()`. Only render the Google Pay button if this method returns true.
   2. *Layout & Placement*: Set Google Pay as the default payment option. Position the Google Pay button at the very top of the payment list, above any credit card entry forms.
   3. *Button Styling*: Render a dynamic button by setting `buttonType` to `'buy'` or `'pay'` so it previews the user''s saved card. Ensure the button theme contrasts with the page background.
   4. *Payment Methods*: In `allowedAuthMethods`, specify both `'PAN_ONLY'` and `'CRYPTOGRAM_3DS'` so that Google Pay accepts both standard cards-on-file, and device tokens. 
   5. *Card Networks*: Add `'VISA'`, `'MASTERCARD'`, and `'AMEX'` to `allowedCardNetworks`.
   6. *Transaction Info*: Set the `checkoutOption` parameter to `'COMPLETE_IMMEDIATE_PURCHASE'` so Google Pay sheet displays a "Pay" button instead of "Continue".
   7. *3D-Secure Step-Up*: Treat Google Pay risk checks consistently with regular cards. If your standard checkout flow triggers a 3D-S step-up for normal cards, ensure risk-based 3D-S is triggered based on signals returned in the `loadPaymentData()` response.
   8. *Testing*: Serve and test the checkout page locally using a Python3 web server.
   

2. Laisser le LLM se connecter aux outils MCP : le LLM exécute search_documentation avec des requêtes telles que la requête loadPaymentData. Le serveur MCP Google Pay interroge ses embeddings vectoriels RAG et renvoie le schéma JSON exact requis par Google Pay.
3. Observer l'exécution et la génération de code : Antigravity combine vos prompts avec la sortie des outils MCP pour créer une conception initiale que vous pouvez examiner et commenter pour l'ajuster ou l'approuver :
   
   L'image suivante montre la démo générée. Notez que l'apparence de la démo peut varier en fonction de votre contexte Antigravity :
   
   

Dépannage

Si l'expérience de paiement générée ne correspond pas à vos attentes, vous pouvez l'ajuster avec Antigravity. Voici quelques exemples :

• Ajuster le contraste et le style du bouton : si le bouton ne correspond pas au thème visuel de votre site, exécutez le prompt suivant :

  The page background is dark. Please update `createButton()` to use `buttonColor: 'white'` and adjust container margins so it sits cleanly above our credit card form.
  

• Valider les ID marchand : si vous devez basculer entre les configurations de marchand TEST et PRODUCTION, exécutez le prompt suivant :

  Use `list_google_pay_integrations` to fetch our latest test or production merchant ID and explicitly inject it into `merchantInfo.merchantId`.
  

• Vérifier les signaux d'authentification 3D Secure : pour vérifier si l'authentification 3D Secure est correctement évaluée par rapport aux signaux de risque de l'appareil assuranceDetails, exécutez le prompt suivant :

  Please verify in `onGooglePaymentButtonClicked()` if 3D-Secure step-up logic is conditionally triggered based upon the `assuranceDetails` signal returned inside the `loadPaymentData()` response.
  

5. Optimiser l'expérience utilisateur pour les frais supplémentaires dynamiques

Les marchands et les PSP doivent parfois calculer des suppléments, des remises ou une tarification dynamique en fonction du type de carte sous-jacent. Par exemple, appliquer des frais supplémentaires de 0,1% pour les cartes de débit/prépayées et de 0,5% pour les cartes de crédit. Google Pay fournit ce signal essentiel via cardFundingSource.

Comprendre les nuances de cardFundingSource

Avant d'implémenter la tarification dynamique, il est essentiel de comprendre le comportement de ce signal dans différents environnements :

• Environnement de test : notez que la fiche de paie de Google Pay sur TEST affiche toujours le prix total. Les marchands doivent utiliser le signal de la réponse et afficher le prix final (y compris les frais supplémentaires) sur leur propre écran de confirmation de commande avant l'autorisation de paiement, comme illustré dans cet exemple.
• Déploiement en production : si vous devez masquer le prix total sur la fiche de paie de Google Pay, contactez votre contact Google pour autoriser votre ID marchand.

Développement basé sur les spécifications pour la tarification dynamique

1. Utiliser l'outil MCP pour rechercher la documentation destinée aux développeurs : dans votre session de chat Antigravity active, demandez au LLM d'utiliser le développement basé sur les spécifications :

   Enhance the Google Pay integrations according to business specification: 
   - Use "sabre" as the gateway for the TEST environment.
   - Calculate a 0.1% extra fee for DEBIT and PREPAID cards, and a 0.5% extra fee for CREDIT cards. 
   - After the surcharge is calculated, update the checkout confirmation screen so the user reviews the final price before acquirer authorization.
   Use `search_documentation` to look up the technical specification for consuming `cardFundingSource` signal of Google Pay API. 
   

💡 Conseil : Après avoir modifié vos fichiers JS et CSS, n'oubliez pas d'actualiser votre navigateur en utilisant les commandes Ctrl+Shift+R ou Cmd+Shift+R pour vous assurer que les modifications sont reflétées sur votre page de test.

2. Vérifier l'implémentation du LLM : en interrogeant directement la documentation à l'aide de MCP, le LLM extrait la spécification technique exacte pour mettre à jour l'implémentation du calcul du prix. Observez la page de test pour vérifier et examiner les modifications de l'interface utilisateur des frais supplémentaires sur votre écran de confirmation :
   
   
   Vous trouverez ci-dessous le code JavaScript amélioré généré par le LLM :

   /**
    * Calculates an extra fee based on the card funding source signal.
    * @param {object} paymentData - The payment data object from the API response.
    */
   function processPayment(paymentData) {
     // Access the card funding source from the nested API response info object
     const cardFundingSource = paymentData.paymentMethodData.info.cardFundingSource;
     let totalPrice = 10.00;
     let extraFee = 0;
   
     switch (cardFundingSource) {
       case 'DEBIT':
       case 'PREPAID':
         extraFee = totalPrice * 0.001; // Apply 0.1% fee
         break;
       case 'CREDIT':
       default:
         extraFee = totalPrice * 0.005; // Apply 0.5% fee
         break;
     }
   
     const finalOrderTotal = totalPrice + extraFee;
     console.log(`Card Type: ${cardFundingSource} | Fee: $${extraFee.toFixed(3)} | Final Total: $${finalOrderTotal.toFixed(2)}`);
   
     // Update your checkout confirmation screen so the user reviews the final price before acquirer authorization
     displayFinalConfirmationScreen(finalOrderTotal, extraFee);
   }
   

6. [Facultatif] Augmenter le taux de réussite des paiements récurrents

ℹ️ Remarque : Cette section explique comment implémenter les transactions initiées par le marchand pour les modèles d'abonnement. Vous pouvez effectuer cet exercice facultatif maintenant ou plus tard si votre intégration nécessite des paiements récurrents.

Si votre entreprise fonctionne sur des modèles d'abonnement, de facturation récurrente des services publics ou d'adhésion, vous devrez peut-être traiter les paiements sans demander à l'utilisateur de se réauthentifier à chaque cycle de facturation. Pour ces paiements récurrents. Notre spécification MIT offre une visibilité accrue sur les types de transactions, les informations de facturation et la continuité des paiements.

Appliquer le développement basé sur les spécifications

Au lieu de laisser le LLM effectuer des recherches sur le Web, ce qui risque d'utiliser des spécifications techniques inexactes, demandez-lui d'utiliser l'outil search_documentation du serveur MCP Google Pay.

1. Demander la récupération des spécifications : dans votre session de chat Antigravity active, demandez au LLM :

   Enhance the Google Pay integrations to support new recurring business requirement:
   - Update Google Pay integrations to support a monthly recurring subscription of $14.99.
   - Use `search_documentation` to look up the technical specification for `RecurringTransactionInfo` and MIT in Google Pay API. 
   

💡 Conseil : Après avoir modifié vos fichiers JS et CSS, n'oubliez pas d'actualiser votre navigateur en utilisant les commandes Ctrl+Shift+R ou Cmd+Shift+R pour vous assurer que les modifications sont reflétées sur votre page de test.

2. Examiner l'implémentation du code amélioré : le LLM met à jour onGooglePaymentButtonClicked avec les paramètres MIT validés par les spécifications :

   function getGoogleRecurringTransactionInfo() {
     return {
       currencyCode: 'USD',
       countryCode: 'US',
       transactionId: 'sub-1499-monthly-' + Date.now(),
       tokenUpdateUrl: 'https://api.acmestore.com/token/update',
       managementUrl: 'https://acmestore.com/account/subscriptions',
       billingAgreement: 'Monthly recurring subscription of $14.99 for Acme Pro. Cancel anytime in your account settings.',
       immediateTotalPrice: '14.99',
       recurrenceItems: [
         {
           label: "Acme Pro Monthly Subscription",
           price: "14.99",
           priceStatus: "FINAL",
           recurrencePeriod: "MONTH",
           recurrencePeriodCount: 1
         }
       ]
     };
   }
   

   Observez la page de test pour vérifier que les informations d'abonnement récurrentes dédiées s'affichent dans la fiche de paie Google Pay :

Dépannage

Si vous obtenez l'erreur suivante :

Payment failed to initialize: Exactly one of transactionInfo, automaticReloadTransactionInfo, deferredTransactionInfo, or recurringTransactionInfo must be set!

Vous pouvez copier l'erreur dans votre session de chat Antigravity active pour la corriger automatiquement à l'aide de l'outil MCP search_documentation.

7. [Facultatif] Sécuriser les conversions avec une surveillance agentique à long terme

ℹ️ Remarque : Cette section explique comment utiliser l'agent Antigravity pour surveiller en continu votre intégration Google Pay. Vous pouvez effectuer cet exercice facultatif maintenant ou plus tard si votre intégration nécessite une surveillance agentique.

Imaginez que votre équipe de direction vient de vous confier un objectif essentiel : augmenter le taux de conversion global des paiements de X% cette année. Pour atteindre et maintenir un taux de conversion élevé au moment du paiement, il ne suffit pas d'effectuer une intégration initiale. Vous devez surveiller en continu les transactions, détecter instantanément les erreurs d'API et implémenter de manière proactive des optimisations basées sur les données.

Au lieu de surveiller manuellement les problèmes de paiement, vous pouvez déléguer la surveillance continue et l'optimisation des conversions à un agent. Dans cet exercice, nous allons voir comment définir la surveillance et l'optimisation des conversions en tant que compétence de l'agent Antigravity et l'exécuter de manière autonome en tant que tâche à long terme.

Créer une compétence d'agent Antigravity et l'exécuter en tant que tâche à long terme

1. Définir la compétence de surveillance et de correction (SKILL.md) : créez un playbook de compétences structuré nommé ~/.agents/skills/gpay-monitor-fix/SKILL.md (ou ~/.gemini/skills/gpay-monitor-fix/SKILL.md) dans la racine de votre espace de travail. Remplacez YOUR_MERCHANT_ID par votre ID marchand dans la console Google Pay :

   ---
   name: gpay-monitor-fix
   description: Autonomously queries Google Pay merchant error metrics over long-horizon windows, root-causes checkout failures against official API specs, generates remediation patches, and proposes payment conversion optimization plans.
   ---
   
   # Google Pay Long-Horizon Monitoring & Conversion Optimization Skill
   When invoked for long-horizon monitoring and conversion optimization, execute the following autonomous loop:
   1.  **Analyze production traffic:** Call the Google Pay MCP tool `query_merchant_error_metrics` targeting merchant ID YOUR_MERCHANT_ID for Time Range of TIME_RANGE_PAST_WEEK..
   2.  **Evaluate error and drop-offs:** Check the returned metrics for error spikes (e.g., user cancellation errors, or `OR_BIBED_06` failures) that directly degrade conversion rates.
   3.  **Perform diagnosis:** If an error anomaly or conversion bottleneck is detected, extract the failed request structure and query the `search_documentation` MCP tool with the exact error code or payload discrepancy based on Google Pay API specifications.
   4.  **Synthesize automated optimization plan:** Correlate the failing payload against official RAG-retrieved schemas to identify root causes (e.g., incorrect `tokenizationSpecification` or missing mandatory MIT fields). Formulate a proactive optimization plan to streamline user checkout steps.
   5.  **Generate onversion fix:** Create a code branch, apply the exact code fix to our checkout implementation (e.g., `checkout.js` or `main.js`), and open a Pull Request detailing the anomaly, root-cause diagnosis and verified code patch.
   

2. Planifier la tâche d'arrière-plan à long terme dans Antigravity : une fois votre compétence définie, dans une session Antigravity active, saisissez la commande /schedule pour configurer un agent Antigravity :

   /schedule
   "Everyday at midnight, invoke @gpay-monitor-fix skill to check our checkout error metrics and conversion performance. If any anomaly spike is detected, diagnose the root cause, generate a fix pull request, and propose conversion optimization plans by morning."
   

   
   Vous pouvez saisir à nouveau la commande /schedule sans aucun argument pour inspecter l'état de vos tâches planifiées actives.
   
   Vous pouvez également exécuter un agent de surveillance et d'optimisation pour une durée indéterminée en déclenchant l'exécution axée sur les objectifs d'Antigravity :

   /goal
   Invoke @gpay-monitor-fix to continuously monitor checkout traffic, investigate errors and propose optimizations. Do not mark this goal complete (<!-- GOAL_COMPLETE -->); continue monitoring and auditing indefinitely.
   

3. Examiner les résultats d'optimisation automatisée : en supposant qu'il existe un trafic de production en direct qui transite par votre ID marchand, vous trouverez un rapport d'optimisation le lendemain matin en arrivant au bureau. Voici une illustration du rapport :
   
   

8. [Facultatif] Améliorer les conversions avec le paiement express sans connexion GPay

ℹ️ Remarque : Cette section explique comment implémenter le paiement express sans connexion directement sur une page d'informations détaillées sur le produit pour réduire les frictions dans l'entonnoir de conversion. Vous pouvez effectuer cet exercice facultatif maintenant ou plus tard.

Les flux de paiement traditionnels en plusieurs étapes obligent souvent les utilisateurs à saisir manuellement des informations de livraison et de facturation longues, voire à créer des comptes, ce qui introduit des frictions et entraîne des abandons dans l'entonnoir de conversion. En implémentant le paiement express sans connexion directement sur la page d'informations détaillées sur le produit avec Google Pay, vous permettez aux utilisateurs de payer en quelques clics et d'éliminer la saisie manuelle de formulaires en récupérant en toute sécurité les identifiants pré-enregistrés de leur compte Google.

Développement basé sur les spécifications pour le paiement sans connexion

1. Demander la récupération des spécifications et l'implémentation du paiement sans connexion : dans votre session de chat Antigravity active, demandez au LLM :

   Implement Google Pay for express guest checkout directly on the product details page. Ensure users select product attributes before clicking Google Pay (or checkout button).
   
   To minimize clicks and eliminate manual entry, collect the following via the Google Pay API:
   - Email address
   - Shipping address (with phone number)
   - Billing address inside card parameters
   
   Use search_documentation for API specs.
   

💡 Conseil : Après avoir modifié vos fichiers JS et CSS, n'oubliez pas d'actualiser votre navigateur en utilisant les commandes Ctrl+Shift+R ou Cmd+Shift+R pour vous assurer que les modifications sont reflétées sur votre page de test.

2. Examiner l'implémentation du code amélioré : le LLM met à jour la requête de données de paiement pour collecter les informations de livraison, de contact et de facturation directement via l'API Google Pay :

   function getGooglePaymentDataRequest() {
     const paymentDataRequest = Object.assign({}, baseRequest);
     paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
     paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
     paymentDataRequest.merchantInfo = getGoogleMerchantInfo();
   
     // Collect email address and shipping address (with phone number) for guest checkout
     paymentDataRequest.emailRequired = true;
     paymentDataRequest.shippingAddressRequired = true;
     paymentDataRequest.shippingAddressParameters = {
       phoneNumberRequired: true
     };
   
     return paymentDataRequest;
   }
   

   Et dans cardPaymentMethod, les paramètres d'adresse de facturation sont configurés :

   const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, {
     tokenizationSpecification: tokenizationSpecification,
     billingAddressRequired: true,
     billingAddressParameters: {
       format: 'FULL',
       phoneNumberRequired: true
     }
   });
   

3. Tester le paiement express sans connexion : observez la page de test pour vérifier que le bouton de paiement sans connexion directement sur la page d'informations détaillées sur le produit collecte tous les attributs requis, ce qui élimine la saisie manuelle :
   
   

9. Libérer de l'espace

Supprimer un projet Google Cloud

⚠️ Attention : La suppression de ce projet Google Cloud détruira définitivement toutes les ressources qu'il contient, y compris tout travail sans rapport avec cet atelier de programmation. De plus, vous ne pourrez pas réutiliser cet ID de projet personnalisé à l'avenir. Pour conserver l'ID, supprimez uniquement les ressources spécifiques créées lors de cet atelier, et non l'ensemble du projet.

Pour éviter que les ressources utilisées dans cet atelier de programmation ne soient facturées sur votre compte Google Cloud, nous vous recommandons de supprimer le projet Google Cloud.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Conclusion

Vous avez terminé l'atelier API Google Pay : page de paiement avec code Vibe, serveurs MCP et Antigravity.

Vous avez appris à connecter le serveur MCP Google Pay à un outil natif de l'IA, à créer des intégrations de paiement propres à l'aide de l'ingénierie contextuelle, à implémenter des workflows d'abonnement et de tarification dynamique à l'aide du développement basé sur les spécifications, et à déployer des pipelines de surveillance autonomes basés sur un LLM. Vous êtes désormais en mesure de créer des workflows de surveillance basés sur l'IA et des interfaces utilisateur de paiement à l'aide du code Vibe.

Ressources supplémentaires

• Rejoignez le canal#google-dev-community sur Discord
• Suivez @GooglePayDevs sur X