API Google Pay: fazer vibe coding da página de finalização da compra com servidores MCP e Antigravity

1. Visão geral

O desenvolvimento de software moderno está mudando rapidamente da programação imperativa para o desenvolvimento nativo de IA. Neste codelab, você vai aprender a criar e melhorar as integrações do Google Pay usando o servidor MCP do Google Pay &Wallet Developer (doravante chamado de servidor MCP do Google Pay) e o Antigravity, uma ferramenta nativa de IA.

O Protocolo de Contexto de Modelo (MCP) é um padrão aberto que permite que os modelos de IA acessem com segurança ferramentas externas, documentação em tempo real e endpoints de API remotos. Com um fluxo de trabalho nativo de IA no Antigravity, você vai configurar seu ambiente para se comunicar com o servidor MCP do Google Pay e criar rapidamente um botão do Google Pay pronto para produção em uma página de finalização da compra.

Em seguida, você vai usar metodologias de desenvolvimento orientadas por especificações para melhorar a integração com novos recursos de API, especificamente ativando as transações iniciadas pelo comerciante (MIT, na sigla em inglês) para pagamentos recorrentes e consumindo o cardFundingSource indicador para preços e roteamento dinâmicos. Por fim, você vai configurar um pipeline de monitoramento autônomo orientado por LLM para observar e corrigir problemas de finalização de compra durante a noite.

O que você vai aprender

  • Como configurar e conectar o servidor MCP do Google Pay ao Antigravity ou a outras ferramentas de IA
  • Como usar o servidor MCP do Google Pay para consultar a documentação
  • Como criar uma integração de finalização de compra do Google Pay de primeira classe diretamente no Antigravity
  • Como implementar preços e roteamento dinâmicos com desenvolvimento orientado por especificações
  • Como melhorar os casos de uso de assinatura recorrente com desenvolvimento orientado por especificações
  • Como implantar pipelines de monitoramento de longo prazo e agentes automatizados usando o Antigravity
  • Como implementar a finalização de compra expressa para otimizar o funil de conversão

2. Configuração e requisitos

Antes de começar

Para usar o servidor MCP do Google Pay, crie um projeto do Google Cloud e ative a API Google Pay &Wallet Developer.

  1. No console do Cloud, na página do seletor de projetos, selecione ou crie um projeto na nuvem do Google Cloud.
  2. Ative a API Google Pay &Wallet Developer.
    • Para ativar as APIs, é necessário ter o papel do IAM de administrador de uso do serviço (roles/serviceusage.serviceUsageAdmin), que contém a permissão serviceusage.services.enable. Saiba como conceder papéis.
    Console do Google Cloud "Ativar acesso à API"

Funções exigidas

Para receber as permissões necessárias para usar o servidor MCP do Google Pay, peça ao administrador para conceder a você os seguintes papéis do IAM no projeto do Google Cloud:

Para mais informações, consulte Gerenciar o acesso a projetos.

Autenticação e autorização

O servidor MCP do Google Pay usa o protocolo OAuth 2.0 com o IAM para autenticação e autorização.

Siga estas etapas para criar um ID e uma chave secreta do cliente OAuth 2.0 para que suas ferramentas MCP acessem os recursos do Google Cloud:

  1. No console do Google Cloud, acesse Google Auth Platform > Clients > Create client.
  2. Na lista Application type, selecione o tipo adequado para seu aplicativo de IA:
    • Para Antigravity, Claude.ai, Claude Code e ChatGPT, selecione Web application.
    • Para CLI do Gemini e VS Code, selecione app para computador.
  3. No campo Name, insira um nome para seu aplicativo (por exemplo, Antigravity).
  4. Na seção Authorized redirect URIs, clique em + Add URI e adicione o URI de redirecionamento necessário para seu aplicativo de IA:
  5. Clique em Criar. Após a criação, acesse os detalhes do cliente. Copie o ID e a chave secreta do cliente e armazene-os com segurança.
  6. No console do Google Cloud, acesse Google Auth Platform > Audience, clique em Publish app e em Confirm para mudar o Publishing status para In production.


    Publicar o app de público-alvo da plataforma de autenticação do Google em produção

3. Configurar servidores MCP

Configurar seu aplicativo de IA

Em seguida, forneça ao aplicativo de IA os detalhes de configuração do servidor.

Antigravity 2.0

Para configurar Antigravity 2.0:

  1. Navegue até Settings > Customizations e, em Installed MCP Servers, clique em Open MCP Config para abrir o arquivo de configuração do Antigravity (exemplo: ~/.gemini/antigravity/mcp_config.json).
  2. Adicione ou atualize a entrada google-pay-wallet-dev em mcpServers com o ID e a chave secreta do cliente OAuth (substitua ANTIGRAVITY_CLIENT_ID e ANTIGRAVITY_CLIENT_SECRET pelo ID e pela chave secreta do cliente OAuth 2.0 criados):
    {
  "mcpServers": {
    "google-pay-wallet-dev": {
      "serverUrl": "https://paydeveloper.googleapis.com/mcp",
      "oauth": {
        "clientId": "ANTIGRAVITY_CLIENT_ID",
        "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
      }
    }
  }
}
  3. Navegue até Settings > Customizations e, em Installed MCP Servers, clique em Refresh.Personalizações das configurações do Antigravity Servidores MCP instalados
  4. Clique em Authenticate e conclua o fluxo do OAuth:
    • Se você receber a mensagem Google hasn't verified this app, clique em Advanced e em Go to antigravity.google (unsafe) para continuar. Esse aviso aparece porque o cliente OAuth não foi verificado. É seguro continuar durante o desenvolvimento.
      Aviso do Google OAuth. Clique em "Avançado" para continuar.
    • Selecione os escopos necessários (See, edit and delete your Google Pay API integrations) e clique em Continue para conceder acesso ao Antigravity.
      Conceder às integrações da API Google Pay acesso ao Antigravity
  5. Copie o código de autorização e envie-o na janela de código de autorização.
    Enviar o código de autorização OAuth no Antigravity

IDE do Antigravity

Para configurar o IDE do Antigravity:

  1. No IDE do Antigravity, clique no menu Additional options no Agent pane > MCP Servers > Manage MCP Servers.Menu "Outras opções" do agente do Antigravity
  2. Na parte de cima do painel "Manage MCP Servers", clique em View raw config para editar o arquivo mcp_config.json (substitua ANTIGRAVITY_CLIENT_ID e ANTIGRAVITY_CLIENT_SECRET pelo ID e pela chave secreta do cliente OAuth 2.0 criados):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. Volte para Manage MCP servers e clique em Refresh. Ao clicar em Authenticate , a guia Customizations é aberta em Agent Settings.
  4. Clique em Authenticate e conclua o fluxo do OAuth:
    • Se você receber a mensagem Google hasn't verified this app, clique em Advanced e em Go to antigravity.google (unsafe) para continuar. Esse aviso aparece porque o cliente OAuth não foi verificado. É seguro continuar durante o desenvolvimento.
      Aviso do Google OAuth. Clique em "Avançado" para continuar.
    • Selecione os escopos necessários (See, edit and delete your Google Pay API integrations) e clique em Continue para conceder acesso ao Antigravity.
      Conceder às integrações da API Google Pay acesso ao Antigravity
  5. Copie o código de autorização e envie-o na janela de código de autorização.
    Enviar o código de autorização OAuth no Antigravity

Outras ferramentas de IA

Para configurar outras ferramentas de IA, consulte o guia Configurar seu aplicativo de IA.

4. Criar novas integrações do Google Pay na finalização de compra

O desenvolvimento de software tradicional geralmente exige a navegação por especificações de API extensas, a cópia de código boilerplate e a conexão de parâmetros. Por outro lado, com o servidor MCP do Google Pay configurado no Antigravity, você pode solicitar que o LLM crie uma experiência de finalização de compra pronta para produção.

  1. Solicitar que o Antigravity crie a finalização de compra: abra uma sessão de chat ativa do Antigravity (com o servidor MCP do Google Pay ativado) e emita o seguinte comando de criação:
    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. Permitir que o LLM se conecte às ferramentas MCP: o LLM executa search_documentation com consultas como a solicitação loadPaymentData. O servidor MCP do Google Pay consulta as incorporações de vetores RAG e retorna o esquema JSON exato exigido pelo Google Pay.Execução de consultas de pesquisa de documentação do Antigravity
  3. Observar a execução e a geração de código: o Antigravity combina seus comandos com a saída das ferramentas MCP para criar um design inicial para você analisar e adicionar comentários para ajuste ou aprovar:Diagrama da arquitetura de integração do pagamento do Google Pay

    A imagem a seguir mostra a demonstração gerada. A aparência da demonstração pode variar de acordo com o contexto do Antigravity:
    Demonstração de finalização de compra gerada

Solução de problemas

Se a experiência de finalização de compra gerada não atender às suas expectativas, você poderá ajustar com o Antigravity. Confira alguns exemplos:

  • Ajustar o contraste e o estilo do botão:se o botão não se ajustar ao tema visual do seu site, use o comando:
    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.
  • Validar IDs de comerciante:se você precisar alternar entre as configurações de comerciante de TESTE e PRODUÇÃO, use o comando:
    Use `list_google_pay_integrations` to fetch our latest test or production merchant ID and explicitly inject it into `merchantInfo.merchantId`.
  • Verificar os indicadores de autenticação 3D Secure:para verificar se a autenticação 3D Secure é avaliada corretamente em relação aos indicadores de risco do dispositivo assuranceDetails, use o comando:
    Please verify in `onGooglePaymentButtonClicked()` if 3D-Secure step-up logic is conditionally triggered based upon the `assuranceDetails` signal returned inside the `loadPaymentData()` response.

5. Otimizar a UX para sobretaxas dinâmicas

Comerciantes e PSPs às vezes precisam calcular taxas de sobretaxa, descontos ou preços dinâmicos com base no tipo de cartão. Por exemplo, aplicar uma taxa extra de 0,1% para cartões de débito/pré-pagos em comparação com uma sobretaxa de 0,5% para cartões de crédito. O Google Pay fornece esse indicador essencial pelo cardFundingSource.

Entender as nuances de cardFundingSource

Antes de implementar a determinação dinâmica de preços, é essencial entender como esse indicador se comporta em ambientes diferentes:

  • Ambiente de teste: a página de pagamento do Google Pay no ambiente TEST sempre mostra o preço total. Os comerciantes precisam consumir o indicador da resposta e mostrar o preço final (incluindo taxas extras) na tela de confirmação do pedido antes da autorização de pagamento, conforme mostrado neste exemplo.
  • Implantação de produção:se você precisar ocultar o preço total na página de pagamento do Google Pay, entre em contato com seu ponto de contato do Google para permitir o ID do comerciante.

Desenvolvimento orientado por especificações para determinação dinâmica de preços

  1. Usar a ferramenta MCP para pesquisar a documentação do desenvolvedor:na sessão de chat ativa do Antigravity, solicite o LLM usando 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.
  1. Verificar a implementação do LLM: ao consultar diretamente a documentação usando o MCP, o LLM extrai a especificação técnica exata para atualizar a implementação do cálculo de preços. Observe a página de teste para verificar e analisar as mudanças na interface da sobretaxa na tela de confirmação:
    Tela final de pedido com revisão de preços dinâmicos e sobretaxas

    Confira abaixo o código JavaScript aprimorado gerado pelo 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. [Opcional] Aumentar a taxa de sucesso de pagamentos recorrentes

Se suas empresas operam em assinaturas, faturamento de serviços públicos recorrentes ou modelos de associação, talvez seja necessário processar pagamentos sem exigir que o usuário se autentique novamente em cada ciclo de faturamento. Para esses pagamentos recorrentes. Nossa especificação de MIT oferece maior visibilidade para tipos de transação, detalhes de faturamento e continuidade de pagamento perfeita.

Aplicar o desenvolvimento orientado por especificações

Em vez de permitir que o LLM pesquise na Web, o que corre o risco de usar especificações técnicas imprecisas, você instrui o LLM a usar a ferramenta search_documentation do servidor MCP do Google Pay.

  1. Solicitar a recuperação de especificações:na sessão de chat ativa do Antigravity, solicite o 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. Analisar a implementação de código aprimorada:o LLM atualiza onGooglePaymentButtonClicked com parâmetros de MIT validados por especificações:
    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
      }
    ]
  };
}
    Observe a página de teste para verificar se os detalhes da assinatura recorrente dedicada aparecem na página de pagamento do Google Pay:Interface da planilha de pagamento recorrente do MIT do Google Pay

Solução de problemas

Se você receber o erro:

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

Você pode copiar o erro na sessão de chat ativa do Antigravity para corrigir automaticamente o erro usando a ferramenta search_documentation do MCP.

7. [Opcional] Proteger conversões com monitoramento de agentes de longo prazo

Imagine que sua equipe de liderança acabou de dar a você um objetivo crítico: aumentar as taxas de conversão de pagamento gerais em X% este ano. Para alcançar e manter uma alta conversão de finalização de compra, não basta apenas a integração inicial. É necessário monitorar continuamente as transações, detectar erros de API instantaneamente e implementar otimizações orientadas por dados de forma proativa.

Em vez de monitorar manualmente os problemas de pagamento, você pode delegar o monitoramento contínuo e a otimização de conversão a um agente. Neste exercício, vamos mostrar como definir o monitoramento e a otimização de conversão como uma habilidade do agente do Antigravity e executá-la de forma autônoma como uma tarefa de longo prazo.

Criar uma habilidade do agente do Antigravity e executar como uma tarefa de longo prazo

  1. Definir a habilidade de monitoramento e correção (SKILL.md): crie um manual de habilidades estruturado chamado ~/.agents/skills/gpay-monitor-fix/SKILL.md (ou ~/.gemini/skills/gpay-monitor-fix/SKILL.md) na raiz do espaço de trabalho. Substitua YOUR_MERCHANT_ID pelo ID do comerciante no console do 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. Agendar a tarefa em segundo plano de longo prazo no Antigravity:depois que a habilidade for definida, em uma sessão ativa do Antigravity, insira o comando /schedule para configurar um agente do 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."
    Resultado da execução do comando /schedule antigravidade
    Você pode inserir o comando /schedule novamente sem argumentos para inspecionar o status das tarefas agendadas ativas.

    Como alternativa, para executar um agente de otimização e monitoramento por um período indefinido, você pode acionar a execução orientada por metas do 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. Analisar os resultados da otimização automatizada:supondo que haja tráfego de produção em tempo real fluindo pelo ID do comerciante, quando você chegar ao escritório na manhã seguinte, vai receber um relatório de otimização. Esta é uma ilustração do relatório:
    Resultado da execução do comando antigravidade /goal

8. [Opcional] Melhorar a conversão com a finalização de compra expressa do GPay

Os fluxos de finalização de compra tradicionais de várias etapas geralmente exigem que os usuários insiram manualmente informações de envio e faturamento longas ou até mesmo criem contas, o que introduz atrito e leva a desistências no funil de conversão. Ao implementar a finalização de compra expressa diretamente na página de detalhes do produto com o Google Pay, você permite que os usuários finalizem a compra com o mínimo de cliques e eliminem a entrada manual de formulários, extraindo com segurança as credenciais pré-armazenadas das contas do Google.

Desenvolvimento orientado por especificações para finalização de compra como visitante

  1. Solicitar a recuperação de especificações e a implementação da finalização de compra como visitante:na sessão de chat ativa do Antigravity, solicite o 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. Analisar a implementação de código aprimorada:o LLM atualiza a solicitação de dados de pagamento para coletar detalhes de envio, contato e faturamento diretamente pela 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, em cardPaymentMethod, os parâmetros de endereço de faturamento são configurados:
    const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, {
  tokenizationSpecification: tokenizationSpecification,
  billingAddressRequired: true,
  billingAddressParameters: {
    format: 'FULL',
    phoneNumberRequired: true
  }
});
  2. Testar a finalização de compra expressa como visitante: observe a página de teste para verificar se o botão para finalizar a compra como visitante diretamente na página de detalhes do produto coleta todos os atributos necessários, eliminando a entrada manual:
    GIF de demonstração do pagamento expresso para visitantes do Google Pay

9. Limpar

Excluir projeto na nuvem do Google Cloud

Para evitar cobranças na conta do Google Cloud pelos recursos usados neste codelab, é recomendável excluir o projeto na nuvem do Google Cloud.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Conclusão

Você concluiu o workshop API Google Pay: página de finalização da compra com vibe coding com servidores MCP e Antigravity.

Você aprendeu a conectar o servidor MCP do Google Pay a uma ferramenta nativa de IA, criar integrações de finalização de compra limpas usando a engenharia de contexto, implementar fluxos de trabalho de assinatura e determinação dinâmica de preços usando o desenvolvimento orientado por especificações e implantar pipelines de monitoramento autônomos orientados por LLM. Agora você está equipado para criar fluxos de trabalho de monitoramento orientados por IA e front-end de usuário de finalização de compra à prova de futuro.

Outros recursos