Google Pay API: Mit MCP-Servern und Antigravity eine Checkout-Seite erstellen

1. Übersicht

Die moderne Softwareentwicklung verlagert sich schnell von der imperativen Programmierung hin zur KI-nativen Entwicklung. In diesem Codelab erfahren Sie, wie Sie Google Pay-Integrationen mit dem Google Pay & Wallet Developer MCP-Server (im Folgenden als Google Pay-MCP-Server bezeichnet) und Antigravity, einem KI-nativen Tool, erstellen und optimieren.

Das Model Context Protocol (MCP) ist ein offener Standard, der es KI-Modellen ermöglicht, sicher auf externe Tools, Live-Dokumentation und Remote-API-Endpunkte zuzugreifen. Mit einem KI-nativen Workflow in Antigravity richten Sie Ihre Umgebung für die Kommunikation mit dem Google Pay MCP-Server ein und erstellen schnell einen produktionsreifen Google Pay-Button für eine Zahlungsseite.

Anschließend verwenden Sie spezifikationsgesteuerte Entwicklungsmethoden, um Ihre Integration mit neuen API-Funktionen zu optimieren. Insbesondere aktivieren Sie vom Händler initiierte Transaktionen (MIT) für wiederkehrende Zahlungen und nutzen das cardFundingSource-Signal für dynamisches Routing und dynamische Preise. Schließlich konfigurieren Sie eine autonome, LLM-basierte Monitoring-Pipeline, um Probleme beim Bezahlvorgang über Nacht zu beobachten und zu beheben.

Lerninhalte

• Google Pay MCP-Server einrichten und mit Antigravity oder anderen KI-Tools verbinden
• Dokumentation mit dem Google Pay-MCP-Server abfragen
• Eine erstklassige Google Pay-Kassenintegration direkt in Antigravity erstellen
• Dynamisches Routing und dynamische Preisgestaltung mit spezifikationsbasierter Entwicklung implementieren
• Wiederkehrende Abos mit spezifikationsgetriebener Entwicklung optimieren
• Langfristiges Monitoring und automatisierte Agent-Pipelines mit Antigravity bereitstellen
• Express-Gastbezahlung implementieren, um den Conversion-Trichter zu optimieren

2. Einrichtung und Anforderungen

Hinweis

Wenn Sie den Google Pay MCP-Server verwenden möchten, müssen Sie ein Google Cloud-Projekt erstellen und die Google Pay & Wallet Developer API aktivieren.

⚠️ Achtung: In diesem Lab werden abrechenbare Cloud-Ressourcen verwendet. So vermeiden Sie laufende Gebühren: Führen Sie die Bereinigungsschritte am Ende des Labs aus. Neue Nutzer haben Anspruch auf den kostenlosen Testzeitraum mit einem Guthaben von 300 $.

1. Wählen Sie in der Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
   Zur Projektauswahl
2. Aktivieren Sie die Google Pay & Wallet Developer API.
   API aktivieren
   • Zum Aktivieren von APIs benötigen Sie die IAM-Rolle „Service Usage-Administrator“ (roles/serviceusage.serviceUsageAdmin), die die Berechtigung serviceusage.services.enable enthält. Weitere Informationen zum Zuweisen von Rollen
   

Erforderliche Rollen

Bitten Sie Ihren Administrator, Ihnen die folgenden IAM-Rollen für das Google Cloud-Projekt zuzuweisen, um die Berechtigungen zu erhalten, die für die Verwendung des Google Pay MCP-Servers erforderlich sind:

• MCP-Tool-Aufrufe ausführen: MCP Tool User (roles/mcp.toolUser)

Weitere Informationen finden Sie unter Zugriff auf Projekte verwalten.

Authentifizierung und Autorisierung

Der Google Pay MCP-Server verwendet das OAuth 2.0-Protokoll mit IAM für die Authentifizierung und Autorisierung.

So erstellen Sie eine OAuth 2.0-Client-ID und einen Clientschlüssel für Ihre MCP-Tools, damit sie auf Google Cloud-Ressourcen zugreifen können:

1. Rufen Sie in der Google Cloud Console Google Auth Platform > Clients > Create client auf.
   Zur Seite „Client erstellen“
2. Wählen Sie in der Liste Anwendungstyp den entsprechenden Typ für Ihre KI-Anwendung aus:
   • Wählen Sie für Antigravity, Claude.ai, Claude Code und ChatGPT die Option Webanwendung aus.
   • Wählen Sie für die Gemini CLI und VS Code die Option Desktop-App aus.
3. Geben Sie im Feld Name einen Namen für Ihre Anwendung ein, z. B. Antigravity.
4. Klicken Sie im Abschnitt Autorisierte Weiterleitungs-URIs auf + URI hinzufügen und fügen Sie dann den erforderlichen Weiterleitungs-URI für Ihre KI-Anwendung hinzu:
   • Antigravity: https://antigravity.google/oauth-callback
   • Andere KI-Tools: Weitere Informationen finden Sie unter OAuth-Client einrichten.
5. Klicken Sie auf Erstellen. Rufen Sie nach der Erstellung die Kundendetails auf. Kopieren Sie die Client-ID und den Clientschlüssel und speichern Sie sie sicher.
6. Rufen Sie in der Google Cloud Console Google Auth Platform > Zielgruppe auf, klicken Sie auf App veröffentlichen und dann auf Bestätigen, um den Veröffentlichungsstatus in In der Produktion zu ändern.
   Zur Zielgruppe
   
   

3. MCP-Server konfigurieren

KI-Anwendung konfigurieren

Als Nächstes müssen Sie Ihrer KI-Anwendung die Serverkonfigurationsdetails zur Verfügung stellen.

Antigravity 2.0

So konfigurieren Sie Antigravity 2.0:

1. Rufen Sie Einstellungen > Anpassungen auf und klicken Sie unter Installierte MCP-Server auf MCP-Konfiguration öffnen, um die Antigravity-Konfigurationsdatei zu öffnen (z. B. ~/.gemini/antigravity/mcp_config.json).
2. Fügen Sie in mcpServers den Eintrag google-pay-wallet-dev mit Ihrer OAuth-Client-ID und Ihrem OAuth-Secret hinzu oder aktualisieren Sie ihn. Ersetzen Sie ANTIGRAVITY_CLIENT_ID und ANTIGRAVITY_CLIENT_SECRET durch die erstellte OAuth 2.0-Client-ID und das erstellte OAuth-Secret:

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

3. Gehen Sie zu Einstellungen > Anpassungen und klicken Sie unter Installierte MCP-Server auf Aktualisieren.
4. Klicken Sie auf Authentifizieren und schließen Sie den OAuth-Ablauf ab:
   • Wenn die Meldung Diese App wurde von Google nicht überprüft angezeigt wird, klicken Sie auf Erweitert und dann auf Zu antigravity.google wechseln (unsicher), um fortzufahren. Diese Warnung wird angezeigt, weil Ihr OAuth-Client nicht überprüft ist. Sie können während der Entwicklung fortfahren.
     
     
   • Wählen Sie die erforderlichen Bereiche aus (Ihre Google Pay API-Integrationen aufrufen, bearbeiten und löschen) und klicken Sie dann auf Weiter, um Antigravity Zugriff zu gewähren.
     
5. Kopieren Sie den Autorisierungscode und fügen Sie ihn in das Fenster für den Autorisierungscode ein.
   

Antigravity IDE

So konfigurieren Sie die Antigravity IDE:

1. Klicken Sie in der Antigravity IDE im Agent-Bereich > MCP-Server > MCP-Server verwalten auf das Menü Zusätzliche Optionen.
2. Klicken Sie oben im Bereich „Manage MCP Servers“ (MCP-Server verwalten) auf View raw config (Rohkonfiguration ansehen), um die Datei mcp_config.json zu bearbeiten. Ersetzen Sie ANTIGRAVITY_CLIENT_ID und ANTIGRAVITY_CLIENT_SECRET durch die erstellte OAuth 2.0-Client-ID und den Clientschlüssel:

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

3. Kehren Sie zu MCP-Server verwalten zurück und klicken Sie auf Aktualisieren. Wenn Sie auf Authentifizieren klicken, wird der Tab Anpassungen in den Agent-Einstellungen geöffnet.
4. Klicken Sie auf Authentifizieren und schließen Sie den OAuth-Ablauf ab:
   • Wenn die Meldung Diese App wurde von Google nicht überprüft angezeigt wird, klicken Sie auf Erweitert und dann auf Zu antigravity.google wechseln (unsicher), um fortzufahren. Diese Warnung wird angezeigt, weil Ihr OAuth-Client nicht überprüft ist. Sie können während der Entwicklung fortfahren.
     
     
   • Wählen Sie die erforderlichen Bereiche aus (Ihre Google Pay API-Integrationen aufrufen, bearbeiten und löschen) und klicken Sie dann auf Weiter, um Antigravity Zugriff zu gewähren.
     
5. Kopieren Sie den Autorisierungscode und fügen Sie ihn in das Fenster für den Autorisierungscode ein.
   

Andere KI‑Tools

Informationen zum Konfigurieren anderer KI-Tools finden Sie im Leitfaden zum Konfigurieren Ihrer KI-Anwendung.

4. Neue Google Pay-Integrationen in die Kaufabwicklung einbinden

Bei der herkömmlichen Softwareentwicklung müssen oft umfangreiche API-Spezifikationen durchsucht, Boilerplate-Code kopiert und Parameter verknüpft werden. Wenn Sie den Google Pay MCP-Server in Antigravity konfiguriert haben, können Sie Ihr LLM auffordern, eine produktionsreife Checkout-Umgebung zu erstellen.

1. Antigravity auffordern, den Checkout zu erstellen:Öffnen Sie eine aktive Antigravity-Chatsitzung (mit aktiviertem Google Pay-MCP-Server) und geben Sie den folgenden Aufforderungs-Prompt ein:

   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. LLM mit MCP-Tools verbinden:Das LLM führt search_documentation mit Anfragen wie loadPaymentData aus. Der Google Pay-MCP-Server fragt seine RAG-Vektoreinbettungen ab und gibt das genaue JSON-Schema zurück, das von Google Pay benötigt wird.
3. Ausführung und Code-Generierung beobachten:Antigravity kombiniert Ihre Prompts mit der Ausgabe von MCP-Tools, um ein erstes Design zu erstellen, das Sie überprüfen und entweder Kommentare zur Anpassung hinzufügen oder genehmigen können:
   
   Das folgende Bild zeigt die generierte Demo. Das Aussehen der Demo kann je nach Antigravity-Kontext variieren:
   
   

Fehlerbehebung

Wenn die generierte Kaufabwicklung nicht Ihren Erwartungen entspricht, können Sie sie mit Antigravity anpassen. Hier einige Beispiele:

• Kontrast und Stil der Schaltfläche anpassen:Wenn die Schaltfläche nicht zum visuellen Design Ihrer Website passt, verwenden Sie den folgenden Prompt:

  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.
  

• Händler-IDs validieren:Wenn Sie zwischen TEST- und PRODUCTION-Händlerkonfigurationen wechseln müssen, geben Sie Folgendes ein:

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

• Prüfen von 3D-Secure-Step-up-Signalen:So prüfen Sie, ob die 3D-Secure-Step-up-Authentifizierung korrekt anhand von assuranceDetails-Geräterisikosignalen ausgewertet wird:

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

5. UX für dynamische Zuschläge optimieren

Händler und Zahlungsdienstleister müssen manchmal Gebühren, Rabatte oder dynamische Preise basierend auf dem zugrunde liegenden Kartentyp berechnen. Beispiel: Für Debit-/Prepaidkarten wird eine zusätzliche Gebühr von 0,1% erhoben, für Kreditkarten ein Aufschlag von 0,5 %. Google Pay stellt dieses wichtige Signal über cardFundingSource bereit.

Nuancen von cardFundingSource

Bevor Sie die dynamische Preisgestaltung implementieren, sollten Sie wissen, wie sich dieses Signal in den verschiedenen Umgebungen verhält:

• Testumgebung: Das Zahlungsblatt von Google Pay auf TEST zeigt immer den Gesamtpreis an. Händler müssen das Signal aus der Antwort abrufen und den Endpreis (einschließlich zusätzlicher Gebühren) auf dem eigenen Bildschirm zur Bestellbestätigung vor der Zahlungsautorisierung anzeigen, wie in diesem Beispiel zu sehen ist.
• Bereitstellung in der Produktion:Wenn Sie den Gesamtpreis auf der Zahlungskarte von Google Pay ausblenden möchten, wenden Sie sich an Ihren Ansprechpartner bei Google, um die Zulassungsliste für die Händler-ID zu erhalten.

Spezifikationsgesteuerte Entwicklung für dynamische Preise

1. Entwicklerdokumentation mit dem MCP-Tool aufrufen:Fordern Sie das LLM in Ihrer aktiven Antigravity-Chatsitzung mit SDD auf:

   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. 
   

💡 Tipp: Denken Sie nach dem Ändern Ihrer JS- und CSS-Dateien daran, Ihren Browser mit den Befehlen Ctrl+Shift+R oder Cmd+Shift+R neu zu laden, damit die Änderungen auf Ihrer Testseite angezeigt werden.

2. Implementierung des LLM überprüfen:Durch direktes Abfragen der Dokumentation mit MCP extrahiert das LLM die genaue technische Spezifikation, um die Implementierung der Preisberechnung zu aktualisieren. Sehen Sie sich die Testseite an, um die Änderungen an der Benutzeroberfläche für den Aufschlag auf dem Bestätigungsbildschirm zu überprüfen:
   
   
   Unten sehen Sie den verbesserten JavaScript-Code, der vom LLM generiert wurde:

   /**
    * 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. [Optional] Erfolgsrate für wiederkehrende Zahlungen erhöhen

ℹ️ Hinweis: In diesem Abschnitt wird beschrieben, wie Sie vom Händler initiierte Transaktionen (Merchant Initiated Transactions, MIT) für Abomodelle implementieren. Sie können diese optionale Übung jetzt oder später durchführen, wenn für Ihre Integration wiederkehrende Zahlungen erforderlich sind.

Wenn Ihr Unternehmen auf Abos, wiederkehrender Abrechnung von Dienstleistungen oder Mitgliedschaftsmodellen basiert, müssen Sie möglicherweise Zahlungen verarbeiten, ohne dass der Nutzer sich in jedem Abrechnungszeitraum neu authentifizieren muss. Für diese wiederkehrenden Zahlungen. Unsere MIT-Spezifikation bietet eine bessere Übersicht über Transaktionstypen, Abrechnungsdetails und eine nahtlose Zahlungsfortsetzung.

Spezifikationsgesteuerte Entwicklung

Anstatt das LLM wahllos im Web suchen zu lassen, was das Risiko birgt, dass ungenaue technische Spezifikationen verwendet werden, weisen Sie das LLM an, das Tool search_documentation des Google Pay-MCP-Servers zu verwenden.

1. Prompt zum Abrufen von Spezifikationen:Geben Sie in Ihrer aktiven Antigravity-Chatsitzung den folgenden Prompt ein:

   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. 
   

💡 Tipp: Denken Sie nach dem Ändern Ihrer JS- und CSS-Dateien daran, Ihren Browser mit den Befehlen Ctrl+Shift+R oder Cmd+Shift+R neu zu laden, damit die Änderungen auf Ihrer Testseite angezeigt werden.

2. Erweiterte Code-Implementierung prüfen:Das LLM aktualisiert onGooglePaymentButtonClicked mit spezifikationsvalidierten MIT-Parametern:

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

   Prüfen Sie auf der Testseite, ob die Details zum dedizierten Abo mit automatischer Verlängerung im Google Pay-Zahlungsblatt angezeigt werden:

Fehlerbehebung

Wenn Sie die Fehlermeldung erhalten:

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

Sie können den Fehler in Ihre aktive Antigravity-Chatsitzung kopieren, um ihn mit dem MCP-Tool search_documentation automatisch beheben zu lassen.

7. [Optional] Conversions mit langfristigem agentischen Monitoring schützen

ℹ️ Hinweis: In diesem Abschnitt wird gezeigt, wie Sie den Antigravity-Agent verwenden, um Ihre Google Pay-Integration kontinuierlich zu überwachen. Sie können diese optionale Übung jetzt oder später durchführen, wenn für Ihre Integration eine agentenbasierte Überwachung erforderlich ist.

Angenommen, Ihr Führungsteam hat Ihnen gerade ein wichtiges Ziel vorgegeben: Die Conversion-Raten für Zahlungen sollen dieses Jahr um X% gesteigert werden. Um eine hohe Conversion-Rate an der Kasse zu erreichen und aufrechtzuerhalten, ist nicht nur die anfängliche Integration wichtig. Sie müssen Transaktionen kontinuierlich überwachen, API-Fehler sofort erkennen und proaktiv datengestützte Optimierungen implementieren.

Anstatt Zahlungsfehler manuell zu überwachen, können Sie die kontinuierliche Überwachung und Conversion-Optimierung an einen Agenten delegieren. In dieser Übung sehen wir uns an, wie Sie Monitoring und Conversion-Optimierung als Antigravity Agent Skill definieren und autonom als Long-Horizon Task ausführen.

Antigravity-Agent-Skill erstellen und als Langzeitanfrage ausführen

1. Monitoring- und Abhilfemaßnahmen-Skill definieren (SKILL.md): Erstellen Sie im Stammverzeichnis Ihres Arbeitsbereichs ein strukturiertes Skill-Playbook mit dem Namen ~/.agents/skills/gpay-monitor-fix/SKILL.md (oder ~/.gemini/skills/gpay-monitor-fix/SKILL.md). Ersetzen Sie YOUR_MERCHANT_ID durch Ihre Händler-ID aus der Google Pay Console:

   ---
   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. Langfristige Hintergrundaufgabe in Antigravity planen:Nachdem Sie Ihren Skill definiert haben, geben Sie in einer aktiven Antigravity-Sitzung den Befehl /schedule ein, um einen Antigravity-Agenten zu konfigurieren:

   /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."
   

   
   Sie können den Befehl /schedule noch einmal ohne Argumente eingeben, um den Status Ihrer aktiven geplanten Aufgaben zu prüfen.
   
   Alternativ können Sie die zielorientierte Ausführung von Antigravity auslösen, um einen Monitoring- und Optimierungs-Agenten für einen unbegrenzten Zeitraum auszuführen:

   /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. Ergebnisse der automatischen Optimierung ansehen:Wenn Produktionsdaten über Ihre Händler-ID übertragen werden, wird Ihnen am nächsten Morgen ein Optimierungsbericht angezeigt. Hier sehen Sie ein Beispiel für den Bericht:
   
   

8. [Optional] Conversions mit dem GPay-Express-Bezahlvorgang für Gäste verbessern

ℹ️ Hinweis: In diesem Abschnitt wird gezeigt, wie Sie den Express-Gast-Checkout direkt auf einer Produktdetailseite implementieren, um Reibungsverluste im Conversion-Trichter zu verringern. Sie können diese optionale Übung jetzt oder später durchführen.

Bei herkömmlichen mehrstufigen Bezahlvorgängen müssen Nutzer oft lange Versand- und Abrechnungsinformationen manuell eingeben oder sogar Konten erstellen. Das führt zu Reibungsverlusten und zu Abbrüchen im Conversion-Trichter. Wenn Sie die Express-Gastzahlung mit Google Pay direkt auf der Produktdetailseite implementieren, können Nutzer mit wenigen Klicks bezahlen. Außerdem müssen sie keine Formulare mehr manuell ausfüllen, da die vorab gespeicherten Anmeldedaten sicher aus ihren Google-Konten abgerufen werden.

Spezifikationsgesteuerte Entwicklung für die Zahlung als Gast

1. Prompt zum Abrufen von Spezifikationen und zur Implementierung der Gastabrechnung:Geben Sie in Ihrer aktiven Antigravity-Chatsitzung den folgenden Prompt ein:

   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.
   

💡 Tipp: Denken Sie nach dem Ändern Ihrer JS- und CSS-Dateien daran, Ihren Browser mit den Befehlen Ctrl+Shift+R oder Cmd+Shift+R neu zu laden, damit die Änderungen auf Ihrer Testseite angezeigt werden.

2. Erweiterte Code-Implementierung prüfen:Das LLM aktualisiert die Anfrage für Zahlungsdaten, um Versand-, Kontakt- und Abrechnungsdetails direkt über die Google Pay API zu erfassen:

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

   In cardPaymentMethod werden die Parameter für die Rechnungsadresse konfiguriert:

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

3. Express-Gastkauf testen:Prüfen Sie auf der Testseite, ob mit dem Button für den Gastkauf direkt auf der Produktdetailseite alle erforderlichen Attribute erfasst werden, sodass keine manuelle Eingabe erforderlich ist:
   
   

9. Bereinigen

Google Cloud-Projekt löschen

⚠️ Achtung: Wenn Sie dieses Google Cloud-Projekt löschen, werden alle darin enthaltenen Ressourcen dauerhaft gelöscht, einschließlich aller Arbeiten, die nicht mit diesem Codelab zusammenhängen. Außerdem können Sie diese benutzerdefinierte Projekt-ID in Zukunft nicht wiederverwenden. Wenn Sie die ID behalten möchten, löschen Sie nur die spezifischen Ressourcen, die während dieses Labs erstellt wurden, und nicht das gesamte Projekt.

Damit Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen nicht in Rechnung gestellt werden, empfehlen wir, das Google Cloud-Projekt zu löschen.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Fazit

Sie haben den Workshop Google Pay API: Vibe-Code-Kassenseite mit MCP-Servern und Antigravity abgeschlossen.

Sie haben gelernt, wie Sie den Google Pay-MCP-Server mit einem KI-nativen Tool verbinden, saubere Checkout-Integrationen mit Context Engineering erstellen, Workflows für Abos und dynamische Preise mit Spec-Driven Development implementieren und autonome LLM-gesteuerte Monitoring-Pipelines bereitstellen. Sie sind jetzt in der Lage, zukunftssichere Checkout-Benutzer-Frontends und KI-basierte Monitoring-Workflows zu entwickeln.

Zusätzliche Ressourcen

• Discord-Kanal#google-dev-community beitreten
• @GooglePayDevs auf X folgen