Google Pay API: MCP sunucuları ve Antigravity ile ödeme sayfası için vibe kodu yazma

1. Genel Bakış

Modern yazılım geliştirme, zorunlu programlamadan yapay zekaya özgü geliştirmeye doğru hızla kayıyor. Bu codelab'de, Google Pay & Wallet Developer MCP sunucusunu (bundan sonra Google Pay MCP sunucusu olarak anılacaktır) ve yapay zeka destekli bir araç olan Antigravity'yi kullanarak Google Pay entegrasyonları oluşturmayı ve geliştirmeyi öğreneceksiniz.

Model Context Protocol (MCP), yapay zeka modellerinin harici araçlara, canlı belgelere ve uzak API uç noktalarına güvenli bir şekilde erişmesini sağlayan açık bir standarttır. Antigravity'deki yapay zeka destekli iş akışı sayesinde, ortamınızı Google Pay MCP sunucusuyla iletişim kuracak şekilde ayarlayacak ve ödeme sayfasında kullanıma hazır bir Google Pay düğmesini hızlıca oluşturacaksınız.

Ardından, yeni API özellikleriyle entegrasyonunuzu geliştirmek için spesifikasyona dayalı geliştirme metodolojilerini kullanacaksınız. Özellikle, yinelenen ödemeler için satıcı tarafından başlatılan işlemleri (MIT) etkinleştirecek ve dinamik yönlendirme ve fiyatlandırma için cardFundingSource sinyalini kullanacaksınız. Son olarak, ödeme sorunlarını gece boyunca gözlemlemek ve düzeltmek için bağımsız bir LLM destekli izleme ardışık düzeni yapılandıracaksınız.

Neler öğreneceksiniz?

• Google Pay MCP sunucusunu Antigravity'ye veya diğer yapay zeka araçlarına kurma ve bağlama
• Dokümanları sorgulamak için Google Pay MCP sunucusunu kullanma
• Doğrudan Antigravity'de sınıfının en iyisi Google Pay ödeme entegrasyonunu nasıl oluşturabilirsiniz?
• Spesifikasyon odaklı geliştirme ile dinamik yönlendirme ve fiyatlandırmayı uygulama
• Spesifikasyona dayalı geliştirme ile yinelenen abonelik kullanım alanlarını geliştirme
• Antigravity kullanarak uzun vadeli izleme ve otomatik aracı işlem hatlarını dağıtma
• Dönüşüm hunisini optimize etmek için hızlı misafir ödeme özelliğini uygulama

2. Kurulum ve şartlar

Başlamadan önce

Google Pay MCP sunucusunu kullanmak için bir Google Cloud projesi oluşturmanız ve Google Pay & Cüzdan Developer API'yi etkinleştirmeniz gerekir.

⚠️ Dikkat: Bu laboratuvarda faturalandırılabilir Cloud kaynakları kullanılmaktadır. Devam eden ücretlerden kaçınmak için laboratuvarın sonunda temizleme adımlarını uygulayın. Yeni kullanıcılar 300 ABD doları değerinde ücretsiz deneme sürümünden yararlanabilir.

1. Cloud Console'unuzda, proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
   Proje seçiciye gidin
2. Google Pay ve Cüzdan Geliştirici API'sini etkinleştirin.
   API'yi etkinleştirin
   • API'leri etkinleştirmek için serviceusage.services.enable iznini içeren Hizmet Kullanımı Yöneticisi IAM rolüne (roles/serviceusage.serviceUsageAdmin) sahip olmanız gerekir. Rolleri nasıl vereceğinizi öğrenin.
   

Gerekli roller

Google Pay MCP sunucusunu kullanmak için gereken izinleri almak üzere yöneticinizden Google Cloud projesinde aşağıdaki IAM rollerini vermesini isteyin:

• MCP aracı çağrıları yapma: MCP Aracı Kullanıcısı (roles/mcp.toolUser)

Daha fazla bilgi için Projelere erişimi yönetme başlıklı makaleyi inceleyin.

Kimlik doğrulama ve yetkilendirme

Google Pay MCP sunucusu, kimlik doğrulama ve yetkilendirme için IAM ile OAuth 2.0 protokolünü kullanır.

MCP araçlarınızın Google Cloud kaynaklarına erişmesi için OAuth 2.0 istemci kimliği ve gizli anahtarı oluşturmak üzere aşağıdaki adımları uygulayın:

1. Google Cloud Console'da Google Auth Platform > Clients > Create client'a (Google Auth Platform > İstemciler > İstemci oluştur) gidin.
   İstemci oluşturma sayfasına gidin.
2. Uygulama türü listesinde, yapay zeka uygulamanız için uygun türü seçin:
   • Antigravity, Claude.ai, Claude Code ve ChatGPT için Web uygulaması'nı seçin.
   • Gemini CLI ve VS Code için Masaüstü uygulaması'nı seçin.
3. Name (Ad) alanına uygulamanız için bir ad girin (örneğin, Antigravity).
4. Yetkilendirilmiş yönlendirme URI'leri bölümünde + URI ekle'yi tıklayın ve yapay zeka uygulamanız için gerekli yönlendirme URI'sini ekleyin:
   • Antigravity: https://antigravity.google/oauth-callback
   • Diğer yapay zeka araçları: OAuth istemci kurulumu başlıklı makaleyi inceleyin.
5. Oluştur'u tıklayın. Oluşturulduktan sonra müşteri ayrıntılarını ziyaret edin. İstemci kimliğini ve istemci gizli anahtarını kopyalayıp güvenli bir şekilde saklayın.
6. Google Cloud Console'da Google Auth Platform > Audience'a (Google Kimlik Doğrulama Platformu > Kitle) gidin, Publish app'i (Uygulamayı yayınla) ve ardından Publishing status'u (Yayınlama durumu) In production (Üretimde) olarak değiştirmek için Confirm'i (Onayla) tıklayın.
   Kitle'ye gidin
   
   

3. MCP sunucularını yapılandırma

Yapay zeka uygulamanızı yapılandırma

Ardından, yapay zeka uygulamanıza sunucu yapılandırma ayrıntılarını sağlamanız gerekir.

Antigravity 2.0

Antigravity 2.0'ı yapılandırmak için:

1. Ayarlar > Özelleştirmeler'e gidin ve Yüklü MCP Sunucuları bölümünde Open MCP Config'i (MCP Yapılandırmasını Aç) tıklayarak Antigravity yapılandırma dosyasını (örnek: ~/.gemini/antigravity/mcp_config.json) açın.
2. mcpServers içindeki google-pay-wallet-dev girişini OAuth istemci kimliğiniz ve gizli anahtarınızla ekleyin veya güncelleyin (ANTIGRAVITY_CLIENT_ID ve ANTIGRAVITY_CLIENT_SECRET'ı oluşturulan OAuth 2.0 istemci kimliği ve gizli anahtarıyla değiştirin):

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

3. Ayarlar > Özelleştirmeler'e gidin ve Yüklü MCP Sunucuları bölümünde Yenile'yi tıklayın.
4. Kimliği doğrula'yı tıklayın ve OAuth akışını tamamlayın:
   • Google bu uygulamayı doğrulamadı istemiyle karşılaşırsanız devam etmek için Gelişmiş'i ve ardından antigravity.google'a git (güvenli değil) seçeneğini tıklayın. Bu uyarı, OAuth istemciniz doğrulanmadığı için gösterilir. Geliştirme sırasında devam etmek güvenlidir.
     
     
   • Gerekli kapsamları (Google Pay API entegrasyonlarınızı görüntüleme, düzenleme ve silme) seçin, ardından Antigravity'ye erişim izni vermek için Devam'ı tıklayın.
     
5. Yetkilendirme kodunu kopyalayın ve yetkilendirme kodu penceresine kodu gönderin.
   

Antigravity IDE

Antigravity IDE'yi yapılandırmak için:

1. Antigravity IDE'de Agent pane > MCP Servers > Manage MCP Servers (Aracı bölmesi > MCP Sunucuları > MCP Sunucularını Yönet) bölümündeki Ek seçenekler menüsünü tıklayın.
2. mcp_config.json dosyasını düzenlemek için MCP Sunucularını Yönet bölmesinin üst kısmındaki View raw config'i (Ham yapılandırmayı görüntüle) tıklayın (ANTIGRAVITY_CLIENT_ID ve ANTIGRAVITY_CLIENT_SECRET yerine oluşturulan OAuth 2.0 istemci kimliğini ve gizli anahtarını girin):

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

3. MCP sunucularını yönetin'e dönün ve Yenile'yi tıklayın. Kimlik doğrulama'yı tıkladığınızda Aracı Ayarları'ndaki Özelleştirmeler sekmesi açılır.
4. Kimliği doğrula'yı tıklayın ve OAuth akışını tamamlayın:
   • Google bu uygulamayı doğrulamadı istemiyle karşılaşırsanız devam etmek için Gelişmiş'i ve ardından antigravity.google'a git (güvenli değil) seçeneğini tıklayın. Bu uyarı, OAuth istemciniz doğrulanmadığı için gösterilir. Geliştirme sırasında devam etmek güvenlidir.
     
     
   • Gerekli kapsamları (Google Pay API entegrasyonlarınızı görüntüleme, düzenleme ve silme) seçin, ardından Antigravity'ye erişim izni vermek için Devam'ı tıklayın.
     
5. Yetkilendirme kodunu kopyalayın ve yetkilendirme kodu penceresine kodu gönderin.
   

Diğer yapay zeka araçları

Diğer yapay zeka araçlarını yapılandırmak için Yapay Zeka Uygulamanızı Yapılandırma Kılavuzu'na bakın.

4. Ödeme işlemine yeni Google Pay entegrasyonları ekleme

Geleneksel yazılım geliştirme genellikle kapsamlı API spesifikasyonlarında gezinmeyi, ortak metin kodunu kopyalamayı ve parametreleri bağlamayı gerektirir. Bunun aksine, Antigravity'de yapılandırılan Google Pay MCP sunucusu ile LLM'nizi üretime hazır bir ödeme deneyimi oluşturmaya yönlendirebilirsiniz.

1. Antigravity'den ödeme sürecini yapılandırmasını isteme: Etkin bir Antigravity sohbet oturumu açın (Google Pay MCP sunucusu etkin olmalıdır) ve aşağıdaki yapılandırma istemini gönderin:

   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. LLM'nin MCP araçlarına bağlanmasına izin verme: LLM, loadPaymentData isteği gibi sorgularla search_documentation yürütür. Google Pay MCP sunucusu, RAG vektör yerleştirmelerini sorgular ve Google Pay'in ihtiyaç duyduğu tam JSON şemasını döndürür.
3. Yürütmeyi ve kod oluşturmayı gözlemleyin: Antigravity, istemlerinizi MCP araçlarının çıkışıyla birleştirerek inceleyebileceğiniz ve ayarlama için yorum ekleyebileceğiniz veya onaylayabileceğiniz bir ilk tasarım oluşturur:
   
   Aşağıdaki resimde oluşturulan demo gösterilmektedir. Demo görünümünün, Antigravity bağlamınıza göre değişebileceğini unutmayın:
   
   

Sorun giderme

Oluşturulan ödeme deneyimi beklentilerinizi karşılamıyorsa Antigravity ile ayarlama yapabilirsiniz. Aşağıda bazı örnekler verilmiştir:

• Düğme kontrastını ve stilini ayarlama: Düğme, sitenizin görsel temasına uymuyorsa şu istemi kullanı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.
  

• Satıcı kimliklerini doğrulama: TEST ve PRODUCTION satıcı yapılandırmaları arasında geçiş yapmanız gerekiyorsa şu istemi kullanın:

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

• 3D Secure adım adım doğrulama sinyallerini kontrol etme: 3D Secure adım adım doğrulama işleminin assuranceDetails cihaz risk sinyallerine göre doğru şekilde değerlendirilip değerlendirilmediğini kontrol etmek için şu istemi kullanı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. Dinamik ek ücretler için kullanıcı deneyimini optimize etme

Satıcıların ve ÖSH'lerin bazen ek ücretleri, indirimleri veya dinamik fiyatlandırmayı temel kart türüne göre hesaplaması gerekir. Örneğin, banka/ön ödemeli kartlar için% 0,1 ek ücret, kredi kartları için% 0,5 ek ücret uygulanması. Google Pay, bu önemli sinyali cardFundingSource aracılığıyla sağlar.

cardFundingSource ile ilgili ince ayrımları anlama

Dinamik fiyatlandırmayı uygulamadan önce bu sinyalin farklı ortamlarda nasıl davrandığını anlamanız önemlidir:

• Test ortamı: TEST üzerindeki Google Pay ödeme sayfasında her zaman toplam fiyatın gösterildiğini unutmayın. Satıcılar, yanıttan gelen sinyali kullanmalı ve ödeme yetkilendirmesinden önce kendi sipariş onayı ekranlarında nihai fiyatı (ekstra ücretler dahil) göstermelidir. Bu işlem, bu örnekte gösterildiği gibi yapılmalıdır.
• Üretim dağıtımı: Google Pay'in ödeme sayfasında toplam fiyatı gizlemeniz gerekiyorsa satıcı kimliği için izin verilenler listesine ekleme konusunda Google'daki irtibat kişinizle iletişime geçin.

Dinamik fiyatlandırma için spesifikasyona dayalı geliştirme

1. Geliştirici belgelerine göz atmak için MCP aracını kullanma: Etkin Antigravity sohbet oturumunuzda SDD kullanarak LLM'ye istem girin:

   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. 
   

💡 İpucu: JS ve CSS dosyalarınızı değiştirdikten sonra, güncellemelerin test sayfanıza yansıtıldığından emin olmak için Ctrl+Shift+R veya Cmd+Shift+R komutlarını kullanarak tarayıcınızı zorunlu olarak yeniden yüklemeyi unutmayın.

2. LLM'nin uygulamasını doğrulama: LLM, MCP'yi kullanarak dokümanları doğrudan sorgulayarak fiyat hesaplama uygulamasını güncellemek için tam teknik özellikleri çıkarır. Onay ekranınızdaki ek ücret kullanıcı arayüzü değişikliklerini doğrulayıp incelemek için test sayfasını inceleyin:
   
   
   Aşağıda, LLM tarafından oluşturulan gelişmiş JavaScript kodu yer almaktadır:

   /**
    * 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. [İsteğe bağlı] Yinelenen ödemelerde ödeme başarısı oranını artırma

ℹ️ Not: Bu bölümde, abonelik modelleri için satıcı tarafından başlatılan işlemlerin (MIT) nasıl uygulanacağı gösterilmektedir. Entegrasyonunuz yinelenen ödemeler gerektiriyorsa bu isteğe bağlı alıştırmayı şimdi veya daha sonra tamamlayabilirsiniz.

İşletmeleriniz abonelik, yinelenen hizmet faturası veya üyelik modelleriyle çalışıyorsa kullanıcının her faturalandırma döneminde yeniden kimlik doğrulaması yapmasını gerektirmeden ödemeleri işlemeniz gerekebilir. Bu yinelenen ödemeler için. MIT spesifikasyonumuz, işlem türleri, fatura bilgileri ve sorunsuz ödeme devamlılığı için daha iyi görünürlük sağlar.

Spesifikasyon odaklı geliştirme uygulama

LLM'nin web'de rastgele arama yapmasına izin vermek yerine (bu durumda yanlış teknik özellikler kullanma riski vardır) LLM'nize Google Pay MCP sunucusunun search_documentation aracını kullanmasını söylersiniz.

1. Şartname alma istemi: Etkin Antigravity sohbet oturumunuzda LLM'ye istem girin:

   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. 
   

💡 İpucu: JS ve CSS dosyalarınızı değiştirdikten sonra, güncellemelerin test sayfanıza yansıtıldığından emin olmak için Ctrl+Shift+R veya Cmd+Shift+R komutlarını kullanarak tarayıcınızı zorunlu olarak yeniden yüklemeyi unutmayın.

2. Gelişmiş kod uygulamasını inceleyin: LLM, onGooglePaymentButtonClicked öğesini spesifikasyonla doğrulanmış MIT parametreleriyle günceller:

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

   Google Pay ödeme sayfasında yinelenen özel abonelik ayrıntılarının göründüğünü doğrulamak için test sayfasını inceleyin:

Sorun giderme

Bu hatayı alırsanız:

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

MCP aracını search_documentation kullanarak hatayı otomatik olarak düzeltmek için hatayı etkin Antigravity sohbet oturumunuza kopyalayabilirsiniz.

7. [İsteğe bağlı] Uzun vadeli yapay ajan izleme ile dönüşümleri koruma

ℹ️ Not: Bu bölümde, Google Pay entegrasyonunuzu sürekli olarak izlemek için Antigravity aracısının nasıl kullanılacağı gösterilmektedir. Entegrasyonunuzda temsilci izleme gerekiyorsa bu isteğe bağlı alıştırmayı şimdi veya daha sonra tamamlayabilirsiniz.

Yönetim ekibinizin size önemli bir hedef verdiğini düşünün: Bu yıl genel ödeme dönüşüm oranlarını% X artırın. Yüksek ödeme dönüşümü elde etmek ve sürdürmek yalnızca ilk entegrasyonla ilgili değildir. İşlemlerin sürekli olarak izlenmesi, API hatalarının anında tespit edilmesi ve veriye dayalı optimizasyonların proaktif olarak uygulanması gerekir.

Ödeme sorunlarını manuel olarak izlemek yerine sürekli izleme ve dönüşüm optimizasyonu görevlerini bir temsilciye devredebilirsiniz. Bu alıştırmada, izleme ve dönüşüm optimizasyonunu nasıl Antigravity Agent Skill olarak tanımlayacağımızı ve Long-Horizon Task olarak nasıl bağımsız bir şekilde yürüteceğimizi ele alıyoruz.

Antigravity aracısı becerisi oluşturma ve uzun vadeli görev olarak çalıştırma

1. İzleme ve düzeltme becerisini tanımlayın (SKILL.md): Çalışma alanınızın kök dizininde ~/.agents/skills/gpay-monitor-fix/SKILL.md (veya ~/.gemini/skills/gpay-monitor-fix/SKILL.md) adlı yapılandırılmış bir beceri oyun planı oluşturun. YOUR_MERCHANT_ID kısmını Google Pay Console'daki satıcı kimliğinizle değiştirin:

   ---
   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. Antigravity'de uzun vadeli arka plan görevini planlama: Beceri tanımlandıktan sonra etkin bir Antigravity oturumunda /schedule komutunu girerek Antigravity aracısını yapılandırın:

   /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."
   

   
   Etkin planlanmış görevlerinizin durumunu incelemek için /schedule komutunu herhangi bir bağımsız değişken olmadan tekrar girebilirsiniz.
   
   Alternatif olarak, süresiz bir süre boyunca izleme ve optimizasyon aracısı çalıştırmak için Antigravity'nin hedefe dayalı yürütmesini tetikleyebilirsiniz:

   /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. Otomatik optimizasyon sonuçlarını inceleyin: Satıcı kimliğinizden canlı üretim trafiği aktığını varsayarsak ertesi sabah ofise geldiğinizde bir optimizasyon raporuyla karşılaşırsınız. Raporun bir örneğini aşağıda görebilirsiniz:
   
   

8. [İsteğe bağlı] GPay ile hızlı misafir ödemesiyle dönüşümü artırın

ℹ️ Not: Bu bölümde, dönüşüm hunisindeki sürtünmeyi azaltmak için hızlı misafir ödeme özelliğinin doğrudan ürün ayrıntıları sayfasına nasıl uygulanacağı gösterilmektedir. İsteğe bağlı olan bu alıştırmayı şimdi veya daha sonra tamamlayabilirsiniz.

Geleneksel çok adımlı ödeme akışları genellikle kullanıcıların uzun kargo ve fatura bilgilerini manuel olarak girmesini veya hesap oluşturmasını gerektirir. Bu durum, sürtünmeye neden olur ve dönüşüm hunisinde bırakmalara yol açar. Google Pay ile doğrudan ürün ayrıntıları sayfasında hızlı misafir ödemesi uygulayarak kullanıcıların minimum tıklamayla ödeme yapmasına olanak tanır ve önceden depolanmış kimlik bilgilerini Google Hesaplarından güvenli bir şekilde çekerek manuel form girişini ortadan kaldırırsınız.

Giriş yapmadan ödeme için spesifikasyona dayalı geliştirme

1. Özellik alma ve misafir olarak ödeme uygulama istemi: Etkin Antigravity sohbet oturumunuzda LLM'ye şu istemi girin:

   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.
   

💡 İpucu: JS ve CSS dosyalarınızı değiştirdikten sonra, güncellemelerin test sayfanıza yansıtıldığından emin olmak için Ctrl+Shift+R veya Cmd+Shift+R komutlarını kullanarak tarayıcınızı zorunlu olarak yeniden yüklemeyi unutmayın.

2. Gelişmiş kod uygulamasını inceleyin: LLM, ödeme verileri isteğini güncelleyerek kargo, iletişim ve faturalandırma bilgilerini doğrudan Google Pay API aracılığıyla toplar:

   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 içinde fatura adresi parametreleri yapılandırılır:

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

3. Hızlı konuk ödeme testini yapın: Konuk ödeme düğmesinin, ürün ayrıntıları sayfasında doğrudan gerekli tüm özellikleri topladığını ve manuel girişi ortadan kaldırdığını doğrulamak için test sayfasını inceleyin:
   
   

9. Temizleme

Google Cloud projesini silme

⚠️ Dikkat: Bu Google Cloud projesinin silinmesi, bu codelab ile ilgili olmayan çalışmalar da dahil olmak üzere projedeki tüm kaynakları kalıcı olarak yok eder. Ayrıca, bu özel proje kimliğini gelecekte yeniden kullanamazsınız. Kimliği korumak için tüm projeyi değil, yalnızca bu laboratuvar sırasında oluşturulan belirli kaynakları silin.

Bu codelab'de kullanılan kaynaklar için Google Cloud hesabınızın ücretlendirilmesini önlemek istiyorsanız Google Cloud projesini silmenizi öneririz.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. Sonuç

Google Pay API: MCP sunucuları ve Antigravity ile vibe kodu ödeme sayfası atölyesini tamamlamış olmalısınız.

Google Pay MCP sunucusunu yapay zeka tabanlı bir araca bağlamayı, bağlam mühendisliğini kullanarak temiz ödeme entegrasyonları oluşturmayı, spesifikasyona dayalı geliştirme kullanarak abonelik ve dinamik fiyatlandırma iş akışlarını uygulamayı ve bağımsız LLM destekli izleme işlem hatlarını dağıtmayı öğrendiniz. Artık geleceğe hazır ödeme kullanıcı ön ucu ve yapay zeka destekli izleme iş akışları için vibe-code oluşturabilirsiniz.

Ek kaynaklar

• Discord'da #google-dev-community kanalına katılın.
• X'te@GooglePayDevs'i takip edin