API Google Pay: utilizza il vibe coding per creare una pagina di pagamento con server MCP e Antigravity

1. Panoramica

Lo sviluppo software moderno sta passando rapidamente dalla programmazione imperativa allo sviluppo nativo dell'AI. In questo codelab imparerai a creare e migliorare le integrazioni di Google Pay utilizzando il server MCP per sviluppatori di Google Pay e Google Wallet (di seguito denominato server MCP di Google Pay) e Antigravity, uno strumento basato sull'AI.

Il Model Context Protocol (MCP) è uno standard aperto che consente ai modelli di AI di accedere in modo sicuro a strumenti esterni, documentazione live ed endpoint API remoti. Tramite un workflow nativo dell'AI in Antigravity, configurerai il tuo ambiente per comunicare con il server MCP di Google Pay e creare rapidamente un pulsante Google Pay pronto per la produzione per una pagina di checkout da zero.

Successivamente, utilizzerai metodologie di sviluppo basate sulle specifiche per migliorare l'integrazione con le nuove funzionalità dell'API, in particolare abilitando le transazioni avviate dal commerciante (MIT) per i pagamenti ricorrenti e utilizzando l'indicatore cardFundingSource per il routing e i prezzi dinamici. Infine, configurerai una pipeline di monitoraggio autonoma basata su LLM per osservare e risolvere i problemi di pagamento durante la notte.

Obiettivi didattici

  • Come configurare e connettere il server MCP di Google Pay ad Antigravity o ad altri strumenti di AI
  • Come utilizzare il server MCP di Google Pay per eseguire query sulla documentazione
  • Come creare un'integrazione di pagamento Google Pay best-in-class direttamente in Antigravity
  • Come implementare il routing e i prezzi dinamici con lo sviluppo basato su specifiche
  • Come migliorare i casi d'uso degli abbonamenti ricorrenti con lo sviluppo basato sulle specifiche
  • Come eseguire il deployment del monitoraggio a lungo termine e delle pipeline di agenti automatizzati utilizzando Antigravity
  • Come implementare il pagamento rapido come ospite per ottimizzare il funnel di conversione

2. Configurazione e requisiti

Prima di iniziare

Per utilizzare il server Google Pay MCP, devi creare un progetto Google Cloud e abilitare l'API Google Pay & Wallet Developer.

  1. Nella console Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
  2. Abilita l'API Google Pay & Wallet Developer.
    • Per abilitare le API, devi disporre del ruolo IAM Amministratore utilizzo dei servizi (roles/serviceusage.serviceUsageAdmin), che include l'autorizzazione serviceusage.services.enable. Scopri come concedere i ruoli.
    Console Google Cloud Abilita l'accesso all'API

Ruoli obbligatori

Per ottenere le autorizzazioni necessarie per utilizzare il server Google Pay MCP, chiedi all'amministratore di concederti i seguenti ruoli IAM nel progetto Google Cloud:

  • Effettuare chiamate allo strumento MCP: MCP Tool User (roles/mcp.toolUser)

Per saperne di più, vedi Gestire l'accesso ai progetti.

Autenticazione e autorizzazione

Il server MCP di Google Pay utilizza il protocollo OAuth 2.0 con IAM per l'autenticazione e l'autorizzazione.

Segui questi passaggi per creare un ID client e un secret OAuth 2.0 per consentire agli strumenti MCP di accedere alle risorse Google Cloud:

  1. Nella console Google Cloud, vai a Google Auth Platform > Client > Crea client.
  2. Nell'elenco Tipo di applicazione, seleziona il tipo appropriato per la tua applicazione di AI:
    • Per Antigravity, Claude.ai, Claude Code e ChatGPT, seleziona Applicazione web.
    • Per Gemini CLI e VS Code, seleziona App per computer.
  3. Nel campo Nome, inserisci un nome per l'applicazione (ad esempio Antigravity).
  4. Nella sezione URI di reindirizzamento autorizzati, fai clic su + Aggiungi URI e poi aggiungi l'URI di reindirizzamento richiesto per la tua applicazione AI:
  5. Fai clic su Crea. Una volta creato, visita i dettagli del cliente. Copia l'ID client e il client secret e memorizzali in modo sicuro.
  6. Nella console Google Cloud, vai a Google Auth Platform > Audience, fai clic su Pubblica app e poi su Conferma per impostare Stato di pubblicazione su In produzione.


    App di pubblicazione del segmento di pubblico di Google Auth Platform in produzione

3. Configurare i server MCP

Configura la tua applicazione AI

Successivamente, devi fornire all'applicazione AI i dettagli di configurazione del server.

Antigravity 2.0

Per configurare Antigravity 2.0:

  1. Vai a Impostazioni > Personalizzazioni e, in Server MCP installati, fai clic su Apri configurazione MCP per aprire il file di configurazione di Antigravity (ad esempio: ~/.gemini/antigravity/mcp_config.json).
  2. Aggiungi o aggiorna la voce google-pay-wallet-dev in mcpServers con l'ID client OAuth e il client secret (sostituisci ANTIGRAVITY_CLIENT_ID e ANTIGRAVITY_CLIENT_SECRET con l'ID client e il client secret OAuth 2.0 creati):
    {
  "mcpServers": {
    "google-pay-wallet-dev": {
      "serverUrl": "https://paydeveloper.googleapis.com/mcp",
      "oauth": {
        "clientId": "ANTIGRAVITY_CLIENT_ID",
        "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
      }
    }
  }
}
  3. Vai a Impostazioni > Personalizzazioni e, in Server MCP installati, fai clic su Aggiorna.Personalizzazioni delle impostazioni antigravità Server MCP installati
  4. Fai clic su Autentica e completa il flusso OAuth:
    • Se viene visualizzato il messaggio Google non ha verificato questa app, fai clic su Avanzate e poi su Vai a antigravity.google (non sicuro) per continuare. Questo avviso viene visualizzato perché il tuo client OAuth non è verificato. È sicuro procedere durante lo sviluppo.
      Avviso di Google OAuth: fai clic su Avanzate per procedere
    • Seleziona gli ambiti richiesti (Visualizza, modifica ed elimina le integrazioni dell'API Google Pay), quindi fai clic su Continua per concedere l'accesso ad Antigravity.
      Concedere alle integrazioni dell'API Google Pay l'accesso ad Antigravity
  5. Copia il codice di autorizzazione e invialo nella finestra del codice di autorizzazione.
    Inviare il codice di autorizzazione OAuth in Antigravity

Antigravity IDE

Per configurare Antigravity IDE:

  1. Nell'IDE Antigravity, fai clic sul menu Opzioni aggiuntive nel riquadro Agente > Server MCP > Gestisci server MCP.Menu Opzioni aggiuntive dell'agente antigravità
  2. Nella parte superiore del riquadro Gestisci server MCP, fai clic su Visualizza configurazione non elaborata per modificare il file mcp_config.json (sostituisci ANTIGRAVITY_CLIENT_ID e ANTIGRAVITY_CLIENT_SECRET con l'ID client e il segreto OAuth 2.0 creati):Antigravity Manage MCP servers View raw config
    {
  "mcpServers": {
    "google-pay-wallet-dev": {
      "serverUrl": "https://paydeveloper.googleapis.com/mcp",
      "oauth": {
        "clientId": "ANTIGRAVITY_CLIENT_ID",
        "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
      }
    }
  }
}
  3. Torna a Gestisci server MCP e fai clic su Aggiorna. Se fai clic su Autentica, si apre la scheda Personalizzazioni in Impostazioni agente.
  4. Fai clic su Autentica e completa il flusso OAuth:
    • Se viene visualizzato il messaggio Google non ha verificato questa app, fai clic su Avanzate e poi su Vai a antigravity.google (non sicuro) per continuare. Questo avviso viene visualizzato perché il tuo client OAuth non è verificato. È sicuro procedere durante lo sviluppo.
      Avviso di Google OAuth: fai clic su Avanzate per procedere
    • Seleziona gli ambiti richiesti (Visualizza, modifica ed elimina le integrazioni dell'API Google Pay), quindi fai clic su Continua per concedere l'accesso ad Antigravity.
      Concedere alle integrazioni dell'API Google Pay l'accesso ad Antigravity
  5. Copia il codice di autorizzazione e invialo nella finestra del codice di autorizzazione.
    Inviare il codice di autorizzazione OAuth in Antigravity

Altri strumenti AI

Per configurare altri strumenti di AI, consulta la guida alla configurazione dell'applicazione AI.

4. Strutturare nuove integrazioni di Google Pay al momento del pagamento

Lo sviluppo di software tradizionale spesso richiede di navigare in specifiche API estese, copiare codice boilerplate e configurare i parametri. Al contrario, con il server MCP di Google Pay configurato in Antigravity, puoi chiedere al tuo LLM di creare un'esperienza di pagamento pronta per la produzione.

  1. Chiedi ad Antigravity di creare lo scheletro del flusso di pagamento: apri una sessione di chat di Antigravity attiva (con il server MCP di Google Pay abilitato) ed emetti il seguente prompt di scaffolding:
    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. Consenti all'LLM di connettersi agli strumenti MCP: l'LLM esegue search_documentation con query come la richiesta loadPaymentData. Il server MCP di Google Pay esegue query sugli embedding vettoriali RAG e restituisce lo schema JSON esatto richiesto da Google Pay.Esecuzione della query Antigravity search_documentation
  3. Osserva l'esecuzione e la generazione del codice:Antigravity combina i tuoi prompt con l'output degli strumenti MCP per creare un design iniziale che puoi rivedere e a cui puoi aggiungere commenti per la regolazione o approvare:Diagramma dell'architettura di integrazione del pagamento Google Pay

    L'immagine seguente mostra la demo generata. Tieni presente che l'aspetto e l'esperienza della demo possono variare in base al contesto di Antigravity:
    Demo di Acquisto rapido generato

Risoluzione dei problemi

Se l'esperienza di pagamento generata non corrisponde alle tue aspettative, puoi modificarla con Antigravity. Ecco alcuni esempi:

  • Regolazione del contrasto e dello stile del pulsante:se il pulsante non si adatta al tema visivo del tuo sito, viene visualizzato il seguente 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.
  • Convalida degli ID commerciante:se devi passare dalla configurazione del commerciante TEST a quella PRODUCTION, visualizzerai il prompt:
    Use `list_google_pay_integrations` to fetch our latest test or production merchant ID and explicitly inject it into `merchantInfo.merchantId`.
  • Controllo degli indicatori di verifica 3D Secure: per verificare se l'autenticazione step-up 3D Secure viene valutata correttamente in base agli indicatori di rischio del dispositivo assuranceDetails, prompt:
    Please verify in `onGooglePaymentButtonClicked()` if 3D-Secure step-up logic is conditionally triggered based upon the `assuranceDetails` signal returned inside the `loadPaymentData()` response.

5. Ottimizzare l'esperienza utente per i supplementi dinamici

A volte i commercianti e i PSP devono calcolare commissioni di supplemento, sconti o prezzi dinamici in base al tipo di carta sottostante. Ad esempio, l'applicazione di una commissione aggiuntiva dello 0,1% per le carte di debito/prepagate rispetto a un supplemento dello 0,5% per le carte di credito. Google Pay fornisce questo indicatore fondamentale tramite cardFundingSource.

Comprendere le sfumature di cardFundingSource

Prima di implementare i prezzi dinamici, è essenziale capire come si comporta questo segnale nei vari ambienti:

  • Ambiente di test: tieni presente che la busta paga di Google Pay su TEST mostra sempre il prezzo totale. I commercianti devono utilizzare l'indicatore della risposta e mostrare il prezzo finale (incluse le commissioni aggiuntive) nella propria schermata di conferma dell'ordine prima dell'autorizzazione del pagamento, come mostrato in questo esempio.
  • Implementazione della produzione:se devi nascondere il prezzo totale nel foglio di pagamento di Google Pay, contatta il tuo punto di contatto Google per l'inserimento nella lista consentita dell'ID commerciante.

Sviluppo basato sulle specifiche per i prezzi dinamici

  1. Utilizza lo strumento MCP per cercare la documentazione per gli sviluppatori:nella sessione di chat di Antigravity attiva, chiedi al LLM di utilizzare 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.
  1. Verifica l'implementazione del modello LLM:eseguendo query direttamente sulla documentazione utilizzando MCP, il modello LLM estrae la specifica tecnica esatta per aggiornare l'implementazione del calcolo del prezzo. Osserva la pagina di test per verificare e rivedere le modifiche all'interfaccia utente del supplemento nella schermata di conferma:
    Schermata finale di revisione dei prezzi dinamici e dei supplementi

    Di seguito è riportato il codice JavaScript avanzato generato dal 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. [Facoltativo] Aumenta la percentuale di successo dei pagamenti ricorrenti

Se le tue attività operano con abbonamenti, fatturazione ricorrente delle utenze o modelli di abbonamento, potresti dover elaborare i pagamenti senza richiedere all'utente di autenticarsi nuovamente a ogni ciclo di fatturazione. Per questi pagamenti ricorrenti. La nostra specifica MIT offre una maggiore visibilità per i tipi di transazione, i dettagli di fatturazione e la continuità dei pagamenti senza interruzioni.

Applicazione dello sviluppo basato sulle specifiche

Anziché lasciare che l'LLM esegua ricerche a caso sul web, con il rischio di utilizzare specifiche tecniche imprecise, gli chiedi di utilizzare lo strumento search_documentation del server MCP di Google Pay.

  1. Prompt per il recupero delle specifiche: nella sessione di chat attiva di Antigravity, chiedi all'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.
  1. Esamina l'implementazione del codice avanzato: l'LLM aggiorna onGooglePaymentButtonClicked con i parametri MIT con convalida delle specifiche:
    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
      }
    ]
  };
}
    Osserva la pagina di test per verificare che i dettagli dell'abbonamento ricorrente dedicato vengano visualizzati nella scheda paga di Google Pay:UI del prospetto paga ricorrente MIT di Google Pay

Risoluzione dei problemi

Se ricevi l'errore:

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

Puoi copiare l'errore nella sessione di chat di Antigravity attiva per risolverlo automaticamente utilizzando lo strumento MCP search_documentation.

7. [Facoltativo] Proteggi le conversioni con il monitoraggio agentico a lungo termine

Immagina che il tuo team di leadership ti abbia appena assegnato un obiettivo fondamentale: aumentare i tassi di conversione dei pagamenti complessivi di una percentuale pari a X% quest'anno. Ottenere e mantenere un tasso di conversione elevato al momento del pagamento non riguarda solo l'integrazione iniziale, ma richiede di monitorare continuamente le transazioni, rilevare immediatamente gli errori API e implementare in modo proattivo ottimizzazioni basate sui dati.

Invece di monitorare manualmente i problemi di pagamento, puoi delegare a un agente il monitoraggio continuo e l'ottimizzazione delle conversioni. In questo esercizio, esploreremo come definire il monitoraggio e l'ottimizzazione delle conversioni come abilità dell'agente antigravità ed eseguirli autonomamente come attività a lungo termine.

Crea la skill dell'agente Antigravity ed eseguila come attività a lungo termine

  1. Definisci la competenza di monitoraggio e correzione (SKILL.md): crea un playbook di competenze strutturato denominato ~/.agents/skills/gpay-monitor-fix/SKILL.md (o ~/.gemini/skills/gpay-monitor-fix/SKILL.md) nella radice del workspace. Sostituisci YOUR_MERCHANT_ID con il tuo ID commerciante della 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. Pianifica l'attività in background a lungo termine in Antigravity:una volta definita la tua skill, in una sessione Antigravity attiva, inserisci il comando /schedule per configurare un agente 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."
    Risultato dell'esecuzione del comando Antigravity /schedule
    Puoi inserire di nuovo il comando /schedule senza argomenti per esaminare lo stato delle attività pianificate attive.

    In alternativa, per eseguire un agente di monitoraggio e ottimizzazione per un periodo di tempo indefinito, puoi attivare l'esecuzione basata sugli obiettivi di 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. Esamina i risultati dell'ottimizzazione automatica:supponendo che il traffico di produzione attivo scorra attraverso il tuo ID commerciante, quando arrivi in ufficio la mattina dopo, troverai un report di ottimizzazione. Questa è un'illustrazione del report:
    Risultato dell'esecuzione del comando /goal antigravità

8. [Facoltativo] Migliora le conversioni con il pagamento rapido come ospite di GPay

I flussi di pagamento tradizionali in più passaggi spesso richiedono agli utenti di inserire manualmente informazioni di spedizione e fatturazione lunghe o persino di creare account, il che introduce attrito e porta a abbandoni lungo la canalizzazione di conversione. Implementando il pagamento rapido come ospite direttamente nella pagina dei dettagli del prodotto con Google Pay, consenti agli utenti di completare il pagamento con il minimo numero di clic ed elimini l'inserimento manuale dei dati del modulo recuperando in modo sicuro le credenziali prememorizzate dai loro Account Google.

Sviluppo basato sulle specifiche per il pagamento senza registrazione

  1. Prompt per il recupero delle specifiche e l'implementazione del pagamento rapido senza registrazione: nella sessione di chat di Antigravity attiva, chiedi all'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.
  1. Esamina l'implementazione del codice avanzato:il LLM aggiorna la richiesta di dati di pagamento per raccogliere i dettagli di spedizione, contatto e fatturazione direttamente tramite 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;
}
    e all'interno di cardPaymentMethod sono configurati i parametri dell'indirizzo di fatturazione:
    const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, {
  tokenizationSpecification: tokenizationSpecification,
  billingAddressRequired: true,
  billingAddressParameters: {
    format: 'FULL',
    phoneNumberRequired: true
  }
});
  2. Testa il checkout rapido come ospite:osserva la pagina di test per verificare che il pulsante di checkout come ospite nella pagina dei dettagli del prodotto raccolga tutti gli attributi richiesti, eliminando l'inserimento manuale:
    GIF dimostrativa del pagamento rapido senza registrazione con Google Pay

9. Esegui la pulizia

Elimina il progetto cloud di Google

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, ti consigliamo di eliminare il progetto Google Cloud.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Conclusione

Hai completato il workshop API Google Pay: pagina di pagamento con Vibe-code con server MCP e Antigravity.

Hai imparato a connettere il server MCP di Google Pay a uno strumento AI nativo, a creare integrazioni di checkout pulite utilizzando l'ingegneria del contesto, a implementare workflow di abbonamento e prezzi dinamici utilizzando lo sviluppo basato sulle specifiche e a eseguire il deployment di pipeline di monitoraggio autonome basate su LLM. Ora sei pronto per creare un front-end utente di pagamento a prova di futuro e flussi di lavoro di monitoraggio basati sull'AI.

Risorse aggiuntive