1. Descripción general
El desarrollo de software moderno está pasando rápidamente de la programación imperativa al desarrollo nativo para la IA. En este codelab, aprenderás a compilar y mejorar las integraciones de Google Pay con el servidor MCP de Google Pay & Wallet para desarrolladores (en adelante, servidor MCP de Google Pay) y Antigravity, una herramienta nativa de IA.
El Protocolo de contexto del modelo (MCP) es un estándar abierto que permite que los modelos de IA accedan de forma segura a herramientas externas, documentación en vivo y extremos de API remotos. A través de un flujo de trabajo nativo de IA en Antigravity, configurarás tu entorno para comunicarte con el servidor de MCP de Google Pay y crearás rápidamente un botón de Google Pay listo para producción para una página de confirmación de compra desde cero.
Posteriormente, usarás metodologías de desarrollo basadas en especificaciones para mejorar tu integración con nuevas funciones de la API, específicamente, habilitar las transacciones iniciadas por el comercio (MIT) para los pagos recurrentes y consumir el indicador cardFundingSource para el enrutamiento y los precios dinámicos. Por último, configurarás una canalización de supervisión autónoma basada en LLM para observar y solucionar los problemas de confirmación de compra durante la noche.
Qué aprenderás
- Cómo configurar y conectar el servidor de MCP de Google Pay a Antigravity o a otras herramientas de IA
- Cómo usar el servidor de MCP de Google Pay para consultar la documentación
- Cómo crear un esqueleto de una integración de pago de Google Pay de primer nivel directamente en Antigravity
- Cómo implementar el enrutamiento y los precios dinámicos con el desarrollo basado en especificaciones
- Cómo mejorar los casos de uso de suscripciones recurrentes con el desarrollo basado en especificaciones
- Cómo implementar la supervisión a largo plazo y las canalizaciones de agentes automatizadas con Antigravity
- Cómo implementar la confirmación de compra exprés para invitados y optimizar el embudo de conversiones
2. Configuración y requisitos
Antes de comenzar
Para usar el servidor de MCP de Google Pay, debes crear un proyecto de Google Cloud y habilitar la API de Google Pay & Wallet Developer.
- En la consola de Cloud, en la página del selector de proyectos, selecciona o crea un proyecto de Google Cloud.
- Habilita la API de Google Pay & Wallet Developer.
- Para habilitar las APIs, necesitas el rol de IAM de administrador de Service Usage (
roles/serviceusage.serviceUsageAdmin), que contiene el permisoserviceusage.services.enable. Obtén más información para otorgar roles.

- Para habilitar las APIs, necesitas el rol de IAM de administrador de Service Usage (
Roles obligatorios
Para obtener los permisos necesarios para usar el servidor de MCP de Google Pay, pídele a tu administrador que te otorgue los siguientes roles de IAM en el proyecto de Google Cloud:
- Realizar llamadas a la herramienta de MCP: Usuario de la herramienta de MCP (
roles/mcp.toolUser)
Para obtener más información, consulta Administra el acceso a los proyectos.
Autenticación y autorización
El servidor de MCP de Google Pay usa el protocolo OAuth 2.0 con IAM para la autenticación y la autorización.
Sigue estos pasos para crear un ID y un secreto de cliente de OAuth 2.0 para que tus herramientas de MCP accedan a los recursos de Google Cloud:
- En la consola de Google Cloud, ve a Google Auth Platform > Clients > Create client.
- En la lista Tipo de aplicación, selecciona el tipo adecuado para tu aplicación de IA:
- En el caso de Antigravity, Claude.ai, Claude Code y ChatGPT, selecciona Aplicación web.
- En Gemini CLI y VS Code, selecciona App para computadoras.
- En el campo Nombre, ingresa un nombre para tu aplicación (por ejemplo,
Antigravity). - En la sección URIs de redireccionamiento autorizados, haz clic en + Agregar URI y, luego, agrega el URI de redireccionamiento requerido para tu aplicación de IA:
- Antigravity:
https://antigravity.google/oauth-callback
- Otras herramientas de IA: Consulta Configuración del cliente de OAuth.
- Antigravity:
- Haz clic en Crear. Detalles del cliente al momento de la creación Copia el ID de cliente y el secreto del cliente, y almacénalos de forma segura.
- En la consola de Google Cloud, ve a Google Auth Platform > Público, haz clic en Publicar app y, luego, en Confirmar para cambiar el Estado de publicación a En producción.

3. Configura servidores de MCP
Configura tu aplicación de IA
A continuación, debes proporcionar a tu aplicación basada en IA los detalles de configuración del servidor.
Antigravity 2.0
Para configurar Antigravity 2.0, haz lo siguiente:
- Navega a Settings > Customizations y, en Installed MCP Servers, haz clic en Open MCP Config para abrir el archivo de configuración de Antigravity (por ejemplo,
~/.gemini/antigravity/mcp_config.json). - Agrega o actualiza la entrada
google-pay-wallet-devenmcpServerscon tu ID y secreto de cliente de OAuth (reemplazaANTIGRAVITY_CLIENT_IDyANTIGRAVITY_CLIENT_SECRETpor el ID y el secreto de cliente de OAuth 2.0 creados):{ "mcpServers": { "google-pay-wallet-dev": { "serverUrl": "https://paydeveloper.googleapis.com/mcp", "oauth": { "clientId": "ANTIGRAVITY_CLIENT_ID", "clientSecret": "ANTIGRAVITY_CLIENT_SECRET" } } } } - Navega a Configuración > Personalizaciones y, en Servidores de MCP instalados, haz clic en Actualizar.

- Haz clic en Autenticar y completa el flujo de OAuth:
- Si aparece el mensaje Google no verificó esta app, haz clic en Avanzado y, luego, en Ir a antigravity.google (no seguro) para continuar. Esta advertencia se muestra porque tu cliente de OAuth no está verificado. Es seguro continuar durante el desarrollo.

- Selecciona los alcances requeridos (Ver, editar y borrar tus integraciones de la API de Google Pay) y, luego, haz clic en Continuar para otorgar acceso a Antigravity.

- Si aparece el mensaje Google no verificó esta app, haz clic en Avanzado y, luego, en Ir a antigravity.google (no seguro) para continuar. Esta advertencia se muestra porque tu cliente de OAuth no está verificado. Es seguro continuar durante el desarrollo.
- Copia el código de autorización y envíalo en la ventana correspondiente.

IDE de Antigravity
Para configurar el IDE de Antigravity, haz lo siguiente:
- En el IDE de Antigravity, haz clic en el menú Opciones adicionales en Panel del agente > Servidores de MCP > Administrar servidores de MCP.

- En la parte superior del panel Manage MCP Servers, haz clic en View raw config para editar el archivo
mcp_config.json(reemplazaANTIGRAVITY_CLIENT_IDyANTIGRAVITY_CLIENT_SECRETpor el ID de cliente y el secreto de OAuth 2.0 creados):
{ "mcpServers": { "google-pay-wallet-dev": { "serverUrl": "https://paydeveloper.googleapis.com/mcp", "oauth": { "clientId": "ANTIGRAVITY_CLIENT_ID", "clientSecret": "ANTIGRAVITY_CLIENT_SECRET" } } } } - Regresa a Administrar servidores de MCP y haz clic en Actualizar. Si haces clic en Autenticar, se abrirá la pestaña Personalizaciones en Configuración del agente.
- Haz clic en Autenticar y completa el flujo de OAuth:
- Si aparece el mensaje Google no verificó esta app, haz clic en Avanzado y, luego, en Ir a antigravity.google (no seguro) para continuar. Esta advertencia se muestra porque tu cliente de OAuth no está verificado. Es seguro continuar durante el desarrollo.

- Selecciona los alcances requeridos (Ver, editar y borrar tus integraciones de la API de Google Pay) y, luego, haz clic en Continuar para otorgar acceso a Antigravity.

- Si aparece el mensaje Google no verificó esta app, haz clic en Avanzado y, luego, en Ir a antigravity.google (no seguro) para continuar. Esta advertencia se muestra porque tu cliente de OAuth no está verificado. Es seguro continuar durante el desarrollo.
- Copia el código de autorización y envíalo en la ventana correspondiente.

Otras herramientas de IA
Para configurar otras herramientas de IA, consulta la Guía para configurar tu aplicación de IA.
4. Crear un esqueleto de las nuevas integraciones de Google Pay en la confirmación de compra
El desarrollo de software tradicional a menudo requiere navegar por especificaciones de API extensas, copiar código estándar y conectar parámetros. En cambio, con el servidor de MCP de Google Pay configurado en Antigravity, puedes solicitar a tu LLM que cree un esqueleto de una experiencia de confirmación de compra lista para producción.
- Indícale a Antigravity que cree un andamiaje de la confirmación de compra: Abre una sesión de chat activa de Antigravity (con el servidor de MCP de Google Pay habilitado) y emite la siguiente instrucción para crear un andamiaje:
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. - Permite que el LLM se conecte a las herramientas de MCP: El LLM ejecuta
search_documentationcon consultas como la solicitudloadPaymentData. El servidor de MCP de Google Pay consulta sus incorporaciones de vectores de RAG y devuelve el esquema JSON exacto que requiere Google Pay.
- Observa la ejecución y la generación de código: Antigravity combina tus instrucciones con el resultado de las herramientas de MCP para crear un diseño inicial que puedes revisar y, luego, agregar comentarios para ajustarlo o aprobarlo:

En la siguiente imagen, se muestra la demostración generada. Ten en cuenta que la apariencia de la demostración puede variar según tu contexto de Antigravity:
Solución de problemas
Si la experiencia de confirmación de compra generada no coincide con tus expectativas, puedes ajustarla con Antigravity. Estos son algunos ejemplos:
- Ajusta el contraste y el diseño del botón: Si el botón no se ajusta al tema visual de tu sitio, usa la siguiente instrucción:
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. - Validación de IDs de comercio: Si necesitas cambiar entre las configuraciones de comercio de PRUEBA y PRODUCCIÓN, usa la siguiente instrucción:
Use `list_google_pay_integrations` to fetch our latest test or production merchant ID and explicitly inject it into `merchantInfo.merchantId`. - Verificación de indicadores de aumento de seguridad de 3D Secure: Para verificar si la autenticación de aumento de seguridad de 3D Secure se evalúa correctamente en función de los indicadores de riesgo del dispositivo
assuranceDetails, usa la siguiente instrucción:Please verify in `onGooglePaymentButtonClicked()` if 3D-Secure step-up logic is conditionally triggered based upon the `assuranceDetails` signal returned inside the `loadPaymentData()` response.
5. Optimiza la UX para los recargos dinámicos
A veces, los comercios y los PSP deben calcular los cargos adicionales, los descuentos o el establecimiento dinámico de precios según el tipo de tarjeta subyacente. Por ejemplo, aplicar una comisión adicional del 0.1% para las tarjetas de débito o prepagadas en comparación con un recargo del 0.5% para las tarjetas de crédito. Google Pay proporciona este indicador vital a través de cardFundingSource.
Comprende los matices de cardFundingSource
Antes de implementar el establecimiento dinámico de precios, es fundamental comprender cómo se comporta este indicador en los diferentes entornos:
- Entorno de prueba: Ten en cuenta que la nómina de Google Pay en
TESTsiempre muestra el precio total. Los comercios deben consumir el indicador de la respuesta y mostrar el precio final (incluidas las comisiones adicionales) en su propia pantalla de confirmación del pedido antes de la autorización del pago, como se muestra en este ejemplo. - Implementación en producción: Si necesitas ocultar el precio total en la hoja de pago de Google Pay, comunícate con tu punto de contacto de Google para que se incluya tu ID de comerciante en la lista de entidades permitidas.
Desarrollo basado en especificaciones para el establecimiento dinámico de precios
- Usa la herramienta de MCP para buscar documentación para desarrolladores: En tu sesión de chat activa de Antigravity, solicita al LLM que use 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.
- Verifica la implementación del LLM: Al consultar directamente la documentación con MCP, el LLM extrae la especificación técnica exacta para actualizar la implementación del cálculo de precios. Observa la página de prueba para verificar y revisar los cambios en la IU del cargo adicional en la pantalla de confirmación:

A continuación, se muestra el código JavaScript mejorado que generó el 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] Aumenta la tasa de éxito de los pagos recurrentes
Si tus empresas operan con suscripciones, facturación recurrente de servicios públicos o modelos de membresía, es posible que debas procesar pagos sin requerir que el usuario se vuelva a autenticar en cada ciclo de facturación. Para estos pagos recurrentes Nuestra especificación de MIT proporciona mayor visibilidad de los tipos de transacciones, los detalles de facturación y la continuidad de los pagos sin problemas.
Cómo aplicar el desarrollo basado en especificaciones
En lugar de permitir que el LLM busque de forma descontrolada en la Web, lo que podría generar el uso de especificaciones técnicas imprecisas, le indicas que use la herramienta search_documentation del servidor de MCP de Google Pay.
- Instrucción para recuperar la especificación: En tu sesión de chat activa de Antigravity, pídele al LLM lo siguiente:
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.
- Revisa la implementación del código mejorado: El LLM actualiza
onGooglePaymentButtonClickedcon parámetros de MIT validados según las especificaciones: Observa la página de prueba para verificar que los detalles de la suscripción recurrente dedicada aparezcan en la nómina de Google Pay: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 } ] }; }
Solución de problemas
Si recibes el siguiente error, haz lo siguiente:
Payment failed to initialize: Exactly one of transactionInfo, automaticReloadTransactionInfo, deferredTransactionInfo, or recurringTransactionInfo must be set!
Puedes copiar el error en tu sesión de chat activa de Antigravity para corregirlo automáticamente con la herramienta search_documentation de MCP.
7. [Opcional] Protege las conversiones con la supervisión de agentes a largo plazo
Imagina que tu equipo de liderazgo acaba de asignarte un objetivo fundamental: aumentar los porcentajes de conversiones de pagos generales en un X% este año. Lograr y mantener una alta conversión en la confirmación de compra no se trata solo de la integración inicial, sino que requiere supervisar continuamente las transacciones, detectar instantáneamente los errores de la API y aplicar de forma proactiva optimizaciones basadas en datos.
En lugar de supervisar manualmente los problemas de pago, puedes delegar la supervisión continua y la optimización de conversiones en un agente. En este ejercicio, exploraremos cómo definir la supervisión y la optimización de conversiones como una habilidad del agente de Antigravity y ejecutarla de forma autónoma como una tarea a largo plazo.
Crea la habilidad del agente Antigravity y ejecútala como una tarea de largo plazo
- Define la habilidad de supervisión y corrección (
SKILL.md): Crea un manual de estrategias de habilidad estructurado llamado~/.agents/skills/gpay-monitor-fix/SKILL.md(o~/.gemini/skills/gpay-monitor-fix/SKILL.md) en la raíz de tu espacio de trabajo. ReemplazaYOUR_MERCHANT_IDpor tu ID de comercio de la consola de 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. - Programa la tarea en segundo plano de largo plazo en Antigravity: Una vez que se defina tu habilidad, en una sesión activa de Antigravity, ingresa el comando
/schedulepara configurar un agente de 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."
Puedes volver a ingresar el comando/schedulesin ningún argumento para inspeccionar el estado de tus tareas programadas activas.
Como alternativa, para ejecutar un agente de optimización y supervisión por un período indefinido, puedes activar la ejecución basada en objetivos de 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. - Revisa los resultados de la optimización automatizada: Suponiendo que haya tráfico de producción activo que fluya a través de tu ID de comercio, cuando llegues a la oficina a la mañana siguiente, verás un informe de optimización. Esta es una ilustración del informe:

8. [Opcional] Mejora las conversiones con la compra exprés como invitado de GPay
Los procesos de confirmación de compra tradicionales de varios pasos a menudo requieren que los usuarios ingresen manualmente información de envío y datos de facturación extensos, o incluso que creen cuentas, lo que genera fricción y abandonos en todo el embudo de conversión. Si implementas la confirmación de compra exprés para invitados directamente en la página de detalles del producto con Google Pay, permites que los usuarios finalicen la compra con la menor cantidad de clics posible y eliminas la entrada manual de formularios, ya que se extraen de forma segura las credenciales almacenadas previamente de sus Cuentas de Google.
Desarrollo basado en especificaciones para la compra como invitado
- Instrucción para recuperar especificaciones y la implementación de la compra como invitado: En tu sesión de chat activa de Antigravity, pídele al LLM lo siguiente:
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.
- Revisa la implementación del código mejorado: El LLM actualiza la solicitud de datos de pago para recopilar los detalles de envío, contacto y facturación directamente a través de la API de Google Pay:
Dentro defunction 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; }cardPaymentMethod, se configuran los parámetros de la dirección de facturación:const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification, billingAddressRequired: true, billingAddressParameters: { format: 'FULL', phoneNumberRequired: true } }); - Prueba la confirmación de compra exprés como invitado: Observa la página de prueba para verificar que el botón de confirmación de compra como invitado que se encuentra directamente en la página de detalles del producto recopile todos los atributos obligatorios, lo que elimina la entrada manual:

9. Limpia
Borra el proyecto de Google Cloud
Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este codelab, te recomendamos que borres el proyecto de Google Cloud.
gcloud projects delete $GOOGLE_CLOUD_PROJECT
10. Conclusión
Completaste el taller API de Google Pay: Vibe coding de la página de confirmación de compra con servidores de MCP y Antigravity.
Aprendiste a conectar el servidor de MCP de Google Pay a una herramienta nativa de IA, a crear integraciones de confirmación de compra limpias con ingeniería de contexto, a implementar flujos de trabajo de suscripción y establecimiento dinámico de precios con desarrollo basado en especificaciones, y a implementar canalizaciones de supervisión autónomas basadas en LLM. Ahora tienes las herramientas necesarias para crear código de ambiente para el frontend del usuario de la confirmación de compra a prueba del futuro y flujos de trabajo de supervisión basados en IA.
Recursos adicionales
- Únete al canal#google-dev-community en Discord
- Sigue a @GooglePayDevs en X