Google Pay API: vibe coding strony płatności z użyciem serwerów MCP i Antigravity

1. Przegląd

Nowoczesne tworzenie oprogramowania szybko odchodzi od programowania imperatywnego na rzecz tworzenia oprogramowania opartego na AI. Z tego ćwiczenia dowiesz się, jak tworzyć i ulepszać integracje z Google Pay za pomocą serwera MCP Google Pay i Portfela (zwanego dalej serwerem MCP Google Pay) oraz Antigravity, narzędzia opartego na AI.

Protokół Model Context Protocol (MCP) to otwarty standard, który umożliwia modelom AI bezpieczny dostęp do narzędzi zewnętrznych, dokumentacji na żywo i zdalnych punktów końcowych interfejsu API. W ramach przepływu pracy opartego na AI w Antigravity skonfigurujesz środowisko do komunikacji z serwerem MCP Google Pay i szybko utworzysz od podstaw gotowy do wdrożenia przycisk Google Pay na stronie płatności.

Następnie będziesz korzystać z metodologii rozwoju opartej na specyfikacjach, aby ulepszać integrację za pomocą nowych funkcji interfejsu API, w szczególności włączając transakcje inicjowane przez sprzedawcę (MIT) w przypadku płatności cyklicznych i korzystając z sygnału cardFundingSource na potrzeby dynamicznego routingu i ustalania cen. Na koniec skonfigurujesz autonomiczny potok monitorowania oparty na LLM, który będzie obserwować i rozwiązywać problemy z płatnościami w nocy.

Czego się nauczysz

• Jak skonfigurować serwer MCP Google Pay i połączyć go z Antigravity lub innymi narzędziami AI
• Jak używać serwera MCP Google Pay do wysyłania zapytań o dokumentację
• Jak bezpośrednio w Antigravity utworzyć najlepszą w swojej klasie integrację płatności Google Pay
• Jak wdrożyć dynamiczne wyznaczanie tras i ceny za pomocą programowania opartego na specyfikacji
• Jak ulepszyć przypadki użycia subskrypcji cyklicznych za pomocą rozwoju opartego na specyfikacji
• Jak wdrażać długoterminowe monitorowanie i zautomatyzowane potoki agentów za pomocą Antigravity
• Jak wdrożyć ekspresowe płatności dla gości, aby zoptymalizować ścieżkę konwersji

2. Konfiguracja i wymagania

Zanim zaczniesz

Aby korzystać z serwera MCP Google Pay, musisz utworzyć projekt Google Cloud i włączyć interfejs Google Pay & Wallet Developer API.

⚠️ Ostrzeżenie: to laboratorium korzysta z płatnych zasobów chmurowych. Aby uniknąć bieżących opłat, wykonaj czynności opisane na końcu modułu. Nowi użytkownicy mogą skorzystać z bezpłatnego okresu próbnego o wartości 300 USD.

1. W konsoli Cloud na stronie selektora projektów wybierz lub utwórz projekt Google Cloud.
   Otwórz selektor projektów
2. Włącz interfejs Google Pay & Wallet Developer API.
   Włączanie interfejsu API
   • Aby włączyć interfejsy API, musisz mieć rolę administratora wykorzystania usług (roles/serviceusage.serviceUsageAdmin), która zawiera uprawnienie serviceusage.services.enable. Dowiedz się, jak przyznawać role
   

Wymagane role

Aby uzyskać uprawnienia wymagane do korzystania z serwera Google Pay MCP, poproś administratora o przypisanie Ci w projekcie Google Cloud tych ról uprawnień:

• Wykonuj wywołania narzędzia MCP: użytkownik narzędzia MCP (roles/mcp.toolUser)

Więcej informacji znajdziesz w artykule Zarządzanie dostępem do projektów.

Uwierzytelnianie i autoryzacja

Serwer MCP Google Pay używa protokołu OAuth 2.0 z IAM do uwierzytelniania i autoryzacji.

Aby utworzyć identyfikator klienta OAuth 2.0 i obiekt tajny dla narzędzi MCP, które będą używane do uzyskiwania dostępu do zasobów Google Cloud, wykonaj te czynności:

1. W konsoli Google Cloud otwórz Google Auth Platform > Klienci > Utwórz klienta.
   Otwórz stronę Utwórz klienta
2. Na liście Typ aplikacji wybierz odpowiedni typ aplikacji AI:
   • W przypadku Antigravity, Claude.ai, Claude Code i ChatGPT wybierz Aplikacja internetowa.
   • W przypadku interfejsu wiersza poleceń Gemini i VS Code wybierz Aplikacja na komputer.
3. W polu Name (Nazwa) wpisz nazwę aplikacji (np. Antigravity).
4. W sekcji Autoryzowane identyfikatory URI przekierowania kliknij + Dodaj URI, a następnie dodaj wymagany identyfikator URI przekierowania dla aplikacji z AI:
   • Antigravity https://antigravity.google/oauth-callback
   • Inne narzędzia AI: zobacz Konfigurowanie klienta OAuth.
5. Kliknij Utwórz. Po utworzeniu klienta wyświetl jego szczegóły. Skopiuj identyfikator i tajny klucz klienta i zapisz je w bezpiecznym miejscu.
6. W konsoli Google Cloud otwórz Google Auth Platform > Odbiorcy, kliknij Opublikuj aplikację, a następnie Potwierdź, aby zmienić Stan publikacji na Wersja produkcyjna.
   Otwórz stronę Odbiorcy
   
   

3. Konfigurowanie serwerów MCP

Konfigurowanie aplikacji AI

Następnie musisz podać aplikacji AI szczegóły konfiguracji serwera.

Antigravity 2.0

Aby skonfigurować Antigravity 2.0:

1. Otwórz Ustawienia > Dostosowywanie, a w sekcji Zainstalowane serwery MCP kliknij Otwórz konfigurację MCP, aby otworzyć plik konfiguracji Antigravity (np. ~/.gemini/antigravity/mcp_config.json).
2. Dodaj lub zaktualizuj wpis google-pay-wallet-dev w mcpServers, podając identyfikator i tajny klucz klienta OAuth (zastąp ANTIGRAVITY_CLIENT_ID i ANTIGRAVITY_CLIENT_SECRET utworzonym identyfikatorem i tajnym kluczem klienta OAuth 2.0):

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

3. Otwórz Ustawienia > Dostosowywanie i w sekcji Zainstalowane serwery MCP kliknij Odśwież.
4. Kliknij Uwierzytelnij i przejdź proces OAuth:
   • Jeśli pojawi się komunikat Google nie zweryfikowało tej aplikacji, kliknij Zaawansowane, a potem Otwórz stronę antigravity.google (niebezpieczna), aby kontynuować. To ostrzeżenie wyświetla się, ponieważ Twój klient OAuth nie został zweryfikowany. Podczas tworzenia aplikacji możesz bezpiecznie kontynuować.
     
     
   • Wybierz wymagane zakresy (Wyświetlanie, edytowanie i usuwanie integracji z interfejsem Google Pay API), a następnie kliknij Dalej, aby przyznać dostęp do Antigravity.
     
5. Skopiuj kod autoryzacji i prześlij go w oknie kodu autoryzacji.
   

Antigravity IDE

Aby skonfigurować Antigravity IDE:

1. W IDE Antigravity kliknij menu Dodatkowe opcje w panelu agenta > Serwery MCP > Zarządzaj serwerami MCP.
2. U góry panelu Zarządzanie serwerami MCP kliknij Wyświetl konfigurację w formacie surowym, aby edytować plik mcp_config.json (zastąp ANTIGRAVITY_CLIENT_ID i ANTIGRAVITY_CLIENT_SECRET utworzonym identyfikatorem klienta OAuth 2.0 i tajnym kluczem):

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

3. Wróć do Zarządzaj serwerami MCP i kliknij Odśwież. Kliknięcie Uwierzytelnij otwiera kartę Dostosowywanie w Ustawieniach agenta.
4. Kliknij Uwierzytelnij i przejdź proces OAuth:
   • Jeśli pojawi się komunikat Google nie zweryfikowało tej aplikacji, kliknij Zaawansowane, a potem Otwórz stronę antigravity.google (niebezpieczna), aby kontynuować. To ostrzeżenie wyświetla się, ponieważ Twój klient OAuth nie został zweryfikowany. Podczas tworzenia aplikacji możesz bezpiecznie kontynuować.
     
     
   • Wybierz wymagane zakresy (Wyświetlanie, edytowanie i usuwanie integracji z interfejsem Google Pay API), a następnie kliknij Dalej, aby przyznać dostęp do Antigravity.
     
5. Skopiuj kod autoryzacji i prześlij go w oknie kodu autoryzacji.
   

Inne narzędzia oparte na AI

Aby skonfigurować inne narzędzia AI, zapoznaj się z przewodnikiem po konfigurowaniu aplikacji AI.

4. Tworzenie nowych integracji Google Pay w procesie płatności

Tradycyjne tworzenie oprogramowania często wymaga zapoznania się z rozbudowanymi specyfikacjami interfejsu API, kopiowania powtarzalnego kodu i konfigurowania parametrów. Z kolei w przypadku serwera MCP Google Pay skonfigurowanego w Antigravity możesz poprosić LLM o przygotowanie gotowego do wdrożenia procesu płatności.

1. Poproś Antigravity o utworzenie szkieletu procesu płatności: otwórz aktywną sesję czatu Antigravity (z włączonym serwerem MCP Google Pay) i wyślij to polecenie:

   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. Zezwól LLM na łączenie się z narzędziami MCP: LLM wykonuje search_documentation z zapytaniami takimi jak loadPaymentData. Serwer MCP Google Pay wysyła zapytania do swoich osadzeń wektorowych RAG i zwraca dokładny schemat JSON wymagany przez Google Pay.
3. Obserwuj wykonanie i generowanie kodu: Antigravity łączy prompty z danymi wyjściowymi narzędzi MCP, aby utworzyć wstępny projekt, który możesz sprawdzić i dodać do niego komentarze z prośbą o dostosowanie lub zatwierdzić:
   
   na tym obrazie widać wygenerowaną wersję demonstracyjną. Pamiętaj, że wygląd wersji demonstracyjnej może się różnić w zależności od kontekstu Antigravity:
   
   

Rozwiązywanie problemów

Jeśli wygenerowany proces płatności nie spełnia Twoich oczekiwań, możesz go dostosować za pomocą Antigravity. Oto przykłady:

• Dostosowywanie kontrastu i stylu przycisku: jeśli przycisk nie pasuje do motywu wizualnego Twojej witryny, użyj tego prompta:

  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.
  

• Weryfikacja identyfikatorów sprzedawcy: jeśli musisz przełączać się między konfiguracjami sprzedawcy TEST i PRODUCTION, wyświetl komunikat:

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

• Sprawdzanie sygnałów uwierzytelniania 3D-Secure: aby sprawdzić, czy uwierzytelnianie 3D-Secure jest prawidłowo oceniane na podstawie sygnałów ryzyka urządzenia assuranceDetails, wpisz:

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

5. Optymalizacja UX pod kątem dynamicznych dopłat

Sprzedawcy i dostawcy usług płatniczych czasami muszą obliczać opłaty dodatkowe, rabaty lub ceny dynamiczne na podstawie typu karty. Na przykład zastosowanie dodatkowej opłaty w wysokości 0,1% w przypadku kart debetowych lub kart przedpłaconych i opłaty dodatkowej w wysokości 0,5% w przypadku kart kredytowych. Google Pay udostępnia ten ważny sygnał za pomocą cardFundingSource.

Omówienie niuansów cardFundingSource

Przed wdrożeniem dynamicznego ustalania cen musisz dowiedzieć się, jak ten sygnał zachowuje się w różnych środowiskach:

• Środowisko testowe: pamiętaj, że arkusz płatności Google Pay na stronie TEST zawsze wyświetla łączną cenę. Sprzedawcy muszą wykorzystać sygnał z odpowiedzi i wyświetlić cenę końcową (w tym dodatkowe opłaty) na ekranie potwierdzenia zamówienia przed autoryzacją płatności, jak pokazano w tym przykładzie.
• Wdrożenie w środowisku produkcyjnym: jeśli chcesz ukryć cenę całkowitą na arkuszu płatności Google Pay, skontaktuj się z osobą kontaktową w Google, aby dodać identyfikator sprzedawcy do listy dozwolonych.

Tworzenie dynamicznego ustalania cen na podstawie specyfikacji

1. Użyj narzędzia MCP, aby wyszukać dokumentację dla programistów: w aktywnej sesji czatu Antigravity poproś LLM o SDD:

   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. 
   

💡 Wskazówka: po zmodyfikowaniu plików JS i CSS pamiętaj, aby wymusić ponowne wczytanie przeglądarki za pomocą poleceń Ctrl+Shift+R lub Cmd+Shift+R. Dzięki temu zmiany zostaną odzwierciedlone na stronie testowej.

2. Weryfikacja implementacji modelu LLM: dzięki bezpośredniemu wysyłaniu zapytań do dokumentacji za pomocą MCP model LLM wyodrębnia dokładną specyfikację techniczną, aby zaktualizować implementację obliczania cen. Obserwuj stronę testową, aby sprawdzić i przejrzeć zmiany w interfejsie dopłaty na ekranie potwierdzenia:
   
   
   Poniżej znajduje się ulepszony kod JavaScript wygenerowany przez 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. [Opcjonalnie] Zwiększanie wskaźnika pomyślnych płatności cyklicznych

ℹ️ Uwaga: w tej sekcji pokazujemy, jak wdrożyć transakcje zainicjowane przez sprzedawcę w przypadku modeli subskrypcji. Możesz wykonać to opcjonalne ćwiczenie teraz lub później, jeśli Twoja integracja wymaga płatności cyklicznych.

Jeśli Twoja firma działa w modelu subskrypcji, cyklicznych płatności za media lub członkostwa, możesz potrzebować przetwarzania płatności bez konieczności ponownego uwierzytelniania użytkownika w każdym cyklu rozliczeniowym. w przypadku tych płatności cyklicznych. Nasza specyfikacja MIT zapewnia większą przejrzystość typów transakcji i szczegółów rozliczeniowych oraz płynność płatności.

Stosowanie programowania opartego na specyfikacji

Zamiast pozwalać LLM na wyszukiwanie w internecie bez ograniczeń, co wiąże się z ryzykiem użycia niedokładnych specyfikacji technicznych, instruujesz LLM, aby korzystał z narzędzia search_documentation na serwerze MCP Google Pay.

1. Prompt do pobierania specyfikacji: w aktywnej sesji czatu z Antigravity wpisz prompt 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. 
   

💡 Wskazówka: po zmodyfikowaniu plików JS i CSS pamiętaj, aby wymusić ponowne wczytanie przeglądarki za pomocą poleceń Ctrl+Shift+R lub Cmd+Shift+R. Dzięki temu zmiany zostaną odzwierciedlone na stronie testowej.

2. Sprawdź implementację ulepszonego kodu: LLM aktualizuje onGooglePaymentButtonClicked o parametry MIT zweryfikowane pod kątem specyfikacji:

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

   Sprawdź stronę testową, aby upewnić się, że w arkuszu płatności Google Pay wyświetlają się szczegóły subskrypcji cyklicznej:

Rozwiązywanie problemów

Jeśli pojawi się błąd:

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

Możesz skopiować błąd do aktywnej sesji czatu Antigravity, aby automatycznie go naprawić za pomocą narzędzia MCP search_documentation.

7. [Opcjonalnie] Zabezpieczanie konwersji za pomocą monitorowania agenta w długim horyzoncie

ℹ️ Uwaga: ta sekcja pokazuje, jak używać agenta Antigravity do ciągłego monitorowania integracji z Google Pay. To opcjonalne ćwiczenie możesz wykonać teraz lub później, jeśli integracja wymaga monitorowania opartego na agentach.

Wyobraź sobie, że kierownictwo właśnie wyznaczyło Ci kluczowy cel: w tym roku zwiększyć ogólne współczynniki konwersji płatności o X%. Osiągnięcie i utrzymanie wysokiego współczynnika konwersji w procesie płatności nie polega tylko na początkowej integracji. Wymaga ciągłego monitorowania transakcji, natychmiastowego wykrywania błędów interfejsu API i proaktywnego wdrażania optymalizacji opartych na danych.

Zamiast ręcznie monitorować problemy z płatnościami, możesz przekazać ciągłe monitorowanie i optymalizację konwersji agentowi. W tym ćwiczeniu pokażemy, jak zdefiniować monitorowanie i optymalizację konwersji jako umiejętność agenta Antigravity i wykonywać je autonomicznie jako zadanie długoterminowe.

Tworzenie umiejętności agenta Antigravity i uruchamianie jej jako zadania długoterminowego

1. Zdefiniuj umiejętność monitorowania i korygowania (SKILL.md): utwórz w katalogu głównym obszaru roboczego uporządkowany podręcznik umiejętności o nazwie ~/.agents/skills/gpay-monitor-fix/SKILL.md (lub ~/.gemini/skills/gpay-monitor-fix/SKILL.md). Zastąp YOUR_MERCHANT_ID swoim identyfikatorem sprzedawcy z konsoli 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. Zaplanuj długoterminowe zadanie w tle w Antigravity: po zdefiniowaniu umiejętności w aktywnej sesji Antigravity wpisz polecenie /schedule, aby skonfigurować agenta 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."
   

   
   Aby sprawdzić stan aktywnych zaplanowanych zadań, możesz ponownie wpisać polecenie /schedule bez argumentów.
   
   Możesz też uruchomić agenta monitorowania i optymalizacji na czas nieokreślony, wywołując wykonanie Antigravity oparte na celach:

   /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. Sprawdź wyniki automatycznej optymalizacji: jeśli przez Twój identyfikator sprzedawcy przepływa ruch produkcyjny, następnego ranka po przyjściu do biura zobaczysz raport optymalizacji. Ilustracja raportu:
   
   

8. [Opcjonalnie] Zwiększanie liczby konwersji dzięki ekspresowej płatności bez logowania w GPay

ℹ️ Uwaga: w tej sekcji pokazujemy, jak wdrożyć ekspresowe płatności dla gości bezpośrednio na stronie ze szczegółami produktu, aby zmniejszyć trudności w procesie konwersji. To opcjonalne ćwiczenie możesz wykonać teraz lub później.

Tradycyjne wieloetapowe procesy płatności często wymagają od użytkowników ręcznego wpisywania długich informacji o dostawie i płatnościach, a nawet tworzenia kont. Powoduje to trudności i rezygnacje na różnych etapach ścieżki konwersji. Wdrażając ekspresowe płatności dla gości bezpośrednio na stronie szczegółów produktu za pomocą Google Pay, umożliwiasz użytkownikom dokonywanie płatności przy minimalnej liczbie kliknięć i eliminujesz ręczne wpisywanie danych w formularzu, bezpiecznie pobierając wstępnie zapisane dane logowania z ich kont Google.

Programowanie ze sprawdzaniem w przypadku płatności bez logowania

1. Prompt do pobierania specyfikacji i wdrażania płatności bez logowania: w aktywnej sesji czatu z Antigravity wpisz prompt 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.
   

💡 Wskazówka: po zmodyfikowaniu plików JS i CSS pamiętaj, aby wymusić ponowne wczytanie przeglądarki za pomocą poleceń Ctrl+Shift+R lub Cmd+Shift+R. Dzięki temu zmiany zostaną odzwierciedlone na stronie testowej.

2. Sprawdź implementację ulepszonego kodu: LLM aktualizuje żądanie danych płatności, aby zbierać szczegóły dostawy, dane kontaktowe i dane do rozliczeń bezpośrednio za pomocą Google Pay API:

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

   W cardPaymentMethod skonfigurowane są parametry adresu rozliczeniowego:

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

3. Testowanie ekspresowej płatności dla gości: sprawdź stronę testową, aby upewnić się, że przycisk finalizacji zakupu dla gości bezpośrednio na stronie ze szczegółami produktu zbiera wszystkie wymagane atrybuty, eliminując konieczność ręcznego wprowadzania danych:
   
   

9. Czyszczenie danych

Usuwanie projektu Google Cloud

⚠️ Uwaga: usunięcie tego projektu Google Cloud spowoduje trwałe usunięcie wszystkich zasobów w nim zawartych, w tym wszystkich elementów niezwiązanych z tym ćwiczeniem. Nie będzie też można ponownie użyć tego niestandardowego identyfikatora projektu w przyszłości. Aby zachować identyfikator, usuń tylko konkretne zasoby utworzone w ramach tego modułu, a nie cały projekt.

Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby użyte w tym ćwiczeniu, zalecamy usunięcie projektu Google Cloud.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Podsumowanie

Warsztaty Google Pay API: strona płatności z kodem wibracyjnym z serwerami MCP i Antigravity dobiegły końca.

Dowiedziałeś(-aś) się, jak połączyć serwer MCP Google Pay z narzędziem opartym na AI, tworzyć integracje czystego procesu płatności za pomocą inżynierii kontekstowej, wdrażać przepływy pracy związane z subskrypcjami i dynamicznymi cenami za pomocą programowania opartego na specyfikacjach oraz wdrażać autonomiczne potoki monitorowania oparte na LLM. Możesz teraz tworzyć przyszłościowe interfejsy użytkownika procesu płatności i oparte na AI przepływy pracy monitorowania.

Dodatkowe materiały

• Dołącz do kanału#google-dev-community na Discordzie
• Obserwuj @GooglePayDevs na X