1. Обзор
Современная разработка программного обеспечения стремительно переходит от императивного программирования к разработке, ориентированной на искусственный интеллект. В этом практическом занятии вы научитесь создавать и улучшать интеграцию с Google Pay, используя сервер Google Pay & Wallet Developer MCP (далее именуемый сервером Google Pay MCP) и Antigravity, инструмент, ориентированный на искусственный интеллект.
Протокол контекста модели (MCP) — это открытый стандарт, позволяющий моделям ИИ безопасно получать доступ к внешним инструментам, оперативной документации и удаленным API-интерфейсам. С помощью встроенного в Antigravity рабочего процесса для ИИ вы настроите свою среду для связи с сервером Google Pay MCP и быстро создадите с нуля готовую к использованию кнопку Google Pay для страницы оформления заказа.
Впоследствии вы будете использовать методологии разработки, основанные на спецификациях, для улучшения интеграции с новыми функциями API — в частности, для включения транзакций, инициируемых продавцом (MIT) , для регулярных платежей и использования сигнала cardFundingSource для динамической маршрутизации и ценообразования. Наконец, вы настроите автономный конвейер мониторинга на основе LLM для отслеживания и устранения проблем при оформлении заказа в ночное время.
Что вы узнаете
- Как настроить и подключить сервер Google Pay MCP к Antigravity или другим инструментам искусственного интеллекта.
- Как использовать сервер Google Pay MCP для запроса документации
- Как создать лучшую в своем классе интеграцию Google Pay с системой оформления заказа непосредственно в Antigravity
- Как реализовать динамическую маршрутизацию и ценообразование с помощью разработки, основанной на спецификациях.
- Как улучшить сценарии использования повторяющихся подписок с помощью разработки, основанной на спецификациях.
- Как развернуть мониторинг на долгосрочную перспективу и автоматизированные конвейеры обработки данных с помощью Antigravity
- Как внедрить экспресс-оформление заказа для гостей, чтобы оптимизировать воронку конверсии
2. Настройка и требования
Прежде чем начать
Для использования сервера Google Pay MCP необходимо создать проект Google Cloud и включить API разработчика Google Pay & Wallet.
- В консоли Cloud на странице выбора проекта выберите или создайте проект Google Cloud.
- Включите API для разработчиков Google Pay и Wallet.
- Для включения API вам потребуется роль IAM «Администратор использования сервисов» (
roles/serviceusage.serviceUsageAdmin), которая содержит разрешениеserviceusage.services.enable. Узнайте, как предоставлять роли .

- Для включения API вам потребуется роль IAM «Администратор использования сервисов» (
Требуемые роли
Чтобы получить необходимые разрешения для использования сервера Google Pay MCP, попросите администратора предоставить вам следующие роли IAM в проекте Google Cloud:
- Выполнение вызовов инструментов MCP: Пользователь инструмента MCP (
roles/mcp.toolUser)
Дополнительную информацию см. в разделе «Управление доступом к проектам» .
Аутентификация и авторизация
Сервер Google Pay MCP использует протокол OAuth 2.0 с IAM для аутентификации и авторизации.
Выполните следующие шаги, чтобы создать идентификатор клиента и секретный ключ OAuth 2.0 для доступа ваших инструментов MCP к ресурсам Google Cloud:
- В консоли Google Cloud перейдите в раздел Google Auth Platform > Клиенты > Создать клиент .
- В списке «Тип приложения» выберите соответствующий тип для вашего приложения на основе ИИ:
- Для Antigravity , Claude.ai , Claude Code и ChatGPT выберите веб-приложение .
- Для Gemini CLI и VS Code выберите настольное приложение .
- В поле «Название» введите название для вашего приложения (например,
Antigravity»). - В разделе «Авторизованные URI перенаправления» нажмите кнопку « + Добавить URI» , а затем добавьте необходимый URI перенаправления для вашего приложения ИИ:
- Антигравитация :
https://antigravity.google/oauth-callback
- Другие инструменты ИИ : см. раздел «Настройка клиента OAuth» .
- Антигравитация :
- Нажмите «Создать» . После создания перейдите к сведениям о клиенте. Скопируйте идентификатор клиента и секретный ключ клиента и сохраните их в безопасном месте.
- В консоли Google Cloud перейдите в Google Auth Platform > Audience , нажмите «Опубликовать приложение» , а затем нажмите «Подтвердить» , чтобы изменить статус публикации на «В рабочей среде» .

3. Настройка серверов MCP
Настройте ваше приложение на основе ИИ.
Далее вам необходимо предоставить вашему ИИ-приложению сведения о конфигурации сервера.
Антигравитация 2.0
Для настройки Antigravity 2.0 :
- Перейдите в «Настройки» > «Настройки» и в разделе «Установленные серверы MCP» нажмите « Открыть конфигурацию MCP» , чтобы открыть файл конфигурации Antigravity (например:
~/.gemini/antigravity/mcp_config.json). - Добавьте или обновите запись
google-pay-wallet-devвmcpServers, указав свой идентификатор клиента OAuth и секретный ключ (заменитеANTIGRAVITY_CLIENT_IDиANTIGRAVITY_CLIENT_SECRETна созданные идентификатор клиента OAuth 2.0 и секретный ключ):{ "mcpServers": { "google-pay-wallet-dev": { "serverUrl": "https://paydeveloper.googleapis.com/mcp", "oauth": { "clientId": "ANTIGRAVITY_CLIENT_ID", "clientSecret": "ANTIGRAVITY_CLIENT_SECRET" } } } } - Перейдите в раздел «Настройки» > «Настройки» и в разделе «Установленные серверы MCP» нажмите «Обновить» .

- Нажмите «Аутентифицировать» и завершите процесс аутентификации OAuth:
- Если появится сообщение «Google не подтвердил это приложение» , нажмите «Дополнительно» , а затем « Перейти на antigravity.google (небезопасно)», чтобы продолжить. Это предупреждение появляется, потому что ваш OAuth-клиент не подтвержден. В процессе разработки можно безопасно продолжить.

- Выберите необходимые области действия ( см., отредактируйте и удалите интеграции Google Pay API ), а затем нажмите «Продолжить» , чтобы предоставить доступ Antigravity.

- Если появится сообщение «Google не подтвердил это приложение» , нажмите «Дополнительно» , а затем « Перейти на antigravity.google (небезопасно)», чтобы продолжить. Это предупреждение появляется, потому что ваш OAuth-клиент не подтвержден. В процессе разработки можно безопасно продолжить.
- Скопируйте код авторизации и введите его в окне ввода кода авторизации.

Антигравитация IDE
Для настройки Antigravity IDE :
- В Antigravity IDE в панели «Агент» щелкните меню «Дополнительные параметры» > «Серверы MCP» > «Управление серверами MCP» .

- В верхней части панели «Управление серверами MCP» нажмите «Просмотреть исходную конфигурацию» , чтобы отредактировать файл
mcp_config.json(заменитеANTIGRAVITY_CLIENT_IDиANTIGRAVITY_CLIENT_SECRETна созданные идентификатор клиента и секрет OAuth 2.0):
{ "mcpServers": { "google-pay-wallet-dev": { "serverUrl": "https://paydeveloper.googleapis.com/mcp", "oauth": { "clientId": "ANTIGRAVITY_CLIENT_ID", "clientSecret": "ANTIGRAVITY_CLIENT_SECRET" } } } } - Вернитесь к управлению серверами MCP и нажмите «Обновить» . Нажатие на кнопку «Аутентификация» откроет вкладку «Настройки» в разделе «Параметры агента» .
- Нажмите «Аутентифицировать» и завершите процесс аутентификации OAuth:
- Если появится сообщение «Google не подтвердил это приложение» , нажмите «Дополнительно» , а затем « Перейти на antigravity.google (небезопасно)», чтобы продолжить. Это предупреждение появляется, потому что ваш OAuth-клиент не подтвержден. В процессе разработки можно безопасно продолжить.

- Выберите необходимые области действия ( см., отредактируйте и удалите интеграции Google Pay API ), а затем нажмите «Продолжить» , чтобы предоставить доступ Antigravity.

- Если появится сообщение «Google не подтвердил это приложение» , нажмите «Дополнительно» , а затем « Перейти на antigravity.google (небезопасно)», чтобы продолжить. Это предупреждение появляется, потому что ваш OAuth-клиент не подтвержден. В процессе разработки можно безопасно продолжить.
- Скопируйте код авторизации и введите его в окне ввода кода авторизации.

Другие инструменты ИИ
Для настройки других инструментов ИИ см. Руководство по настройке вашего приложения ИИ .
4. Внедрите новые интеграции Google Pay в процесс оформления заказа.
Традиционная разработка программного обеспечения часто требует работы с обширными спецификациями API, копирования шаблонного кода и настройки параметров. В отличие от этого, с сервером Google Pay MCP, настроенным в Antigravity, вы можете поручить своему студенту магистратуры создать готовый к использованию интерфейс оформления заказа.
- Чтобы запустить процесс оформления заказа в Antigravity, откройте активную сессию чата Antigravity (с включенным сервером Google Pay MCP) и отправьте следующее приглашение для запуска процесса:
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. - Позвольте LLM подключиться к инструментам MCP: LLM выполняет
search_documentationс запросами, подобными запросуloadPaymentData. Сервер Google Pay MCP запрашивает векторные представления RAG и возвращает точную JSON-схему, необходимую Google Pay.
- Отслеживайте выполнение и генерацию кода: Antigravity объединяет ваши подсказки с результатами работы инструментов MCP для создания первоначального проекта, который вы можете просмотреть и либо добавить комментарии для корректировки, либо утвердить его.

На следующем изображении показана сгенерированная демонстрационная версия. Обратите внимание, что внешний вид и функциональность демонстрации могут отличаться в зависимости от контекста Antigravity:
Поиск неисправностей
Если сгенерированный интерфейс оформления заказа не соответствует вашим ожиданиям, вы можете внести корректировки с помощью Antigravity. Вот несколько примеров:
- Настройка контраста и стиля кнопки: Если кнопка не соответствует визуальной тематике вашего сайта, предоставьте следующее сообщение:
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. - Проверка идентификаторов продавцов: Если вам необходимо переключиться между тестовой и рабочей конфигурациями продавцов, подтвердите следующее:
Use `list_google_pay_integrations` to fetch our latest test or production merchant ID and explicitly inject it into `merchantInfo.merchantId`. - Проверка сигналов 3D-Secure step-up: Чтобы проверить, корректно ли оценивается аутентификация 3D-Secure step-up на основе сигналов риска устройства
assuranceDetails, введите следующее:Please verify in `onGooglePaymentButtonClicked()` if 3D-Secure step-up logic is conditionally triggered based upon the `assuranceDetails` signal returned inside the `loadPaymentData()` response.
5. Оптимизация пользовательского интерфейса для динамических надбавок.
Продавцам и платежным системам иногда необходимо рассчитывать дополнительные сборы, скидки или динамическое ценообразование в зависимости от типа карты. Например, применять дополнительную комиссию в размере 0,1% для дебетовых/предоплаченных карт по сравнению с комиссией в размере 0,5% для кредитных карт. Google Pay предоставляет эту важную информацию через cardFundingSource .
Понимание нюансов cardFundingSource
Перед внедрением динамического ценообразования крайне важно понять, как этот сигнал ведет себя в различных средах:
- Тестовая среда : Обратите внимание, что в
TESTсреде Google Pay всегда отображается общая сумма заказа. Продавцы должны обработать сигнал из ответа и отобразить окончательную цену (включая дополнительные сборы) на экране подтверждения заказа до авторизации платежа, как показано в этом примере . - Внедрение в рабочую среду: Если вам необходимо скрыть итоговую сумму в платежной таблице Google Pay, обратитесь к своему контактному лицу в Google по вопросам добавления идентификатора продавца в список разрешенных.
Разработка на основе технических заданий для динамического ценообразования
- Используйте инструмент MCP для поиска документации для разработчиков: В активном чате Antigravity запустите диалог с LLM, используя 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.
- Проверьте реализацию LLM: напрямую обращаясь к документации с помощью MCP, LLM извлекает точные технические характеристики для обновления реализации расчета цены. Проверьте и проанализируйте изменения в пользовательском интерфейсе надбавки на экране подтверждения на тестовой странице:

Ниже приведён расширенный код JavaScript, сгенерированный программой 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. [Необязательно] Повысить процент успешных платежей для регулярных платежей.
Если ваш бизнес работает по подписке, системе регулярных платежей за коммунальные услуги или модели членства, вам может потребоваться обрабатывать платежи без необходимости повторной аутентификации пользователя в каждом расчетном цикле. Для таких регулярных платежей наша спецификация MIT обеспечивает расширенную прозрачность типов транзакций, деталей выставления счетов и бесперебойную работу системы платежей.
Применение разработки, основанной на спецификациях.
Вместо того чтобы позволять студенту магистратуры искать информацию в интернете без разбора, что чревато использованием неточных технических характеристик, вы поручаете ему использовать инструмент search_documentation на сервере Google Pay MCP.
- Запрос на получение спецификации: В активном чате Antigravity запросите 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.
- Ознакомьтесь с улучшенной реализацией кода: LLM обновляет обработчик события
onGooglePaymentButtonClickedс использованием параметров MIT, проверенных по спецификации: Проверьте тестовую страницу, чтобы убедиться, что данные для регулярной подписки отображаются в платежной таблице 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 } ] }; }
Поиск неисправностей
Если вы получили ошибку:
Payment failed to initialize: Exactly one of transactionInfo, automaticReloadTransactionInfo, deferredTransactionInfo, or recurringTransactionInfo must be set!
Вы можете скопировать сообщение об ошибке в активный чат Antigravity, чтобы автоматически исправить ошибку с помощью инструмента MCP search_documentation .
7. [Необязательно] Защита преобразований с помощью долгосрочного агентного мониторинга.
Представьте, что ваша команда руководителей только что поставила перед вами важнейшую задачу: увеличить общий коэффициент конверсии платежей на X% в этом году . Достижение и поддержание высокого коэффициента конверсии при оформлении заказа — это не только первоначальная интеграция, но и непрерывный мониторинг транзакций, мгновенное обнаружение ошибок API и активное внедрение оптимизаций на основе данных.
Вместо ручного отслеживания проблем с платежами вы можете делегировать непрерывный мониторинг и оптимизацию конверсии агенту. В этом упражнении мы рассмотрим, как определить мониторинг и оптимизацию конверсии как навык агента Antigravity и выполнять его автономно в качестве долгосрочной задачи .
Создайте навык агента «Антигравитация» и запустите его как задачу с длительным горизонтом планирования.
- Определите навык мониторинга и исправления ошибок (
SKILL.md): Создайте структурированный сценарий навыков с именем~/.agents/skills/gpay-monitor-fix/SKILL.md(или~/.gemini/skills/gpay-monitor-fix/SKILL.md) в корневой директории вашей рабочей области. ЗаменитеYOUR_MERCHANT_IDна ваш идентификатор продавца из консоли 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. - Запланируйте фоновую задачу с длительным горизонтом планирования в Antigravity: После определения навыка в активной сессии Antigravity введите команду
/scheduleдля настройки агента 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."
Вы можете снова ввести команду/scheduleбез каких-либо аргументов, чтобы проверить состояние активных запланированных задач.
В качестве альтернативы, чтобы запустить агент мониторинга и оптимизации на неопределенный период времени, вы можете активировать целеориентированное выполнение 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. - Просмотрите результаты автоматической оптимизации: Предположим, что через ваш идентификатор продавца проходит активный производственный трафик. В таком случае, утром следующего дня в офисе вас встретит отчет об оптимизации. Вот иллюстрация этого отчета:

8. [Необязательно] Повысьте конверсию с помощью экспресс-оплаты для гостей GPay.
Традиционные многоэтапные процессы оформления заказа часто требуют от пользователей ручного ввода длинной информации о доставке и оплате или даже создания учетных записей, что создает неудобства и приводит к оттоку клиентов на всех этапах воронки продаж. Внедрение экспресс-оформления заказа для гостей непосредственно на странице с подробным описанием товара с помощью Google Pay позволяет пользователям оформить заказ с минимальным количеством кликов и исключить ручной ввод данных в форму, безопасно используя предварительно сохраненные учетные данные из их учетных записей Google.
Разработка, основанная на технических характеристиках, для оформления заказа гостем.
- Запрос на получение спецификации и реализацию гостевой оплаты: В активной сессии чата Antigravity запросите 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.
- Ознакомьтесь с улучшенной реализацией кода: LLM обновляет запрос платежных данных, чтобы получать информацию о доставке, контактные данные и платежную информацию непосредственно через 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; }cardPaymentMethodнастраиваются параметры платежного адреса:const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification, billingAddressRequired: true, billingAddressParameters: { format: 'FULL', phoneNumberRequired: true } }); - Протестируйте экспресс-оформление заказа для гостей: проверьте на тестовой странице, что кнопка оформления заказа для гостей на странице с подробным описанием товара собирает все необходимые данные, исключая ручной ввод:

9. Уборка
Удалить проект Google Cloud
Чтобы избежать списания средств с вашего аккаунта Google Cloud за ресурсы, использованные в этом практическом задании, мы рекомендуем удалить проект Google Cloud.
gcloud projects delete $GOOGLE_CLOUD_PROJECT
10. Заключение
Вы завершили оформление заказа через Google Pay API: Vibe-code с использованием серверов MCP и мастерской Antigravity !
Вы научились подключать сервер Google Pay MCP к инструменту, ориентированному на ИИ, создавать удобные интеграции для оформления заказа с помощью Context Engineering, реализовывать рабочие процессы подписки и динамического ценообразования с помощью Spec-Driven Development, а также развертывать автономные конвейеры мониторинга на основе LLM. Теперь вы готовы создавать перспективные пользовательские интерфейсы для оформления заказа и рабочие процессы мониторинга на основе ИИ.
Дополнительные ресурсы
- Присоединяйтесь к каналу #google-dev-community в Discord
- Подписывайтесь на @GooglePayDevs в X