Google Pay API: एमसीपी सर्वर और Antigravity की मदद से, चेकआउट पेज के लिए वाइब-कोड जनरेट करना

1. खास जानकारी

सॉफ़्टवेयर डेवलपमेंट के मौजूदा तरीके में तेज़ी से बदलाव हो रहा है. अब इंपरेटिव प्रोग्रामिंग की जगह, एआई-नेटिव डेवलपमेंट का इस्तेमाल किया जा रहा है. इस कोडलैब में, Google Pay & Wallet Developer MCP server (इसे Google Pay MCP server भी कहा जाता है) और एआई-नेटिव टूल Antigravity का इस्तेमाल करके, Google Pay इंटिग्रेशन बनाने और उन्हें बेहतर बनाने का तरीका बताया गया है.

मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) एक ओपन स्टैंडर्ड है. इसकी मदद से एआई मॉडल, बाहरी टूल, लाइव दस्तावेज़, और रिमोट एपीआई एंडपॉइंट को सुरक्षित तरीके से ऐक्सेस कर सकते हैं. Antigravity में एआई-नेटिव वर्कफ़्लो की मदद से, Google Pay एमसीपी सर्वर से कम्यूनिकेट करने के लिए अपना एनवायरमेंट सेट अप करें. साथ ही, चेकआउट पेज के लिए, प्रोडक्शन के लिए तैयार Google Pay बटन को स्क्रैच से तेज़ी से तैयार करें.

इसके बाद, आपको नई एपीआई सुविधाओं के साथ इंटिग्रेशन को बेहतर बनाने के लिए, स्पेसिफ़िकेशन के आधार पर डेवलपमेंट की प्रोसेस का इस्तेमाल करना होगा. खास तौर पर, बार-बार होने वाले पेमेंट के लिए कारोबारी या कंपनी की ओर से शुरू किए गए लेन-देन (एमआईटी) की सुविधा चालू करनी होगी. साथ ही, डाइनैमिक राउटिंग और कीमत के लिए cardFundingSource सिग्नल का इस्तेमाल करना होगा. आखिर में, आपको एलएलएम पर आधारित मॉनिटरिंग पाइपलाइन को कॉन्फ़िगर करना होगा. इससे चेकआउट से जुड़ी समस्याओं का पता लगाया जा सकेगा और उन्हें रातों-रात ठीक किया जा सकेगा.

आपको क्या सीखने को मिलेगा

• Google Pay के एमसीपी सर्वर को Antigravity या अन्य एआई टूल से सेट अप और कनेक्ट करने का तरीका
• दस्तावेज़ के बारे में क्वेरी करने के लिए, Google Pay के एमसीपी सर्वर का इस्तेमाल कैसे करें
• Antigravity में सीधे तौर पर, Google Pay के चेकआउट इंटिग्रेशन को सबसे बेहतर तरीके से लागू करने का तरीका
• स्पेसिफ़िकेशन के हिसाब से डेवलपमेंट की मदद से, डाइनैमिक रूटिंग और कीमत तय करने की सुविधा को लागू करने का तरीका
• स्पेक-ड्रिवन डेवलपमेंट की मदद से, बार-बार होने वाली सदस्यता के इस्तेमाल के उदाहरणों को बेहतर बनाने का तरीका
• Antigravity का इस्तेमाल करके, लंबी अवधि तक निगरानी करने और एजेंटिक पाइपलाइन को अपने-आप डिप्लॉय करने का तरीका
• कन्वर्ज़न फ़नल को ऑप्टिमाइज़ करने के लिए, एक्सप्रेस गेस्ट चेकआउट की सुविधा लागू करने का तरीका

2. सेटअप और ज़रूरी शर्तें

शुरू करने से पहले

Google Pay MCP सर्वर का इस्तेमाल करने के लिए, आपको एक Google Cloud प्रोजेक्ट बनाना होगा. साथ ही, Google Pay और Wallet Developer API को चालू करना होगा.

⚠️ चेतावनी: इस लैब में, बिल किए जा सकने वाले Cloud संसाधनों का इस्तेमाल किया जाता है. लगातार लगने वाले शुल्क से बचने के लिए, लैब के आखिर में दिए गए निर्देशों का पालन करके सेटअप हटाएं. नए उपयोगकर्ता, 300 डॉलर के मुफ़्त में आज़माने की सुविधा का फ़ायदा पा सकते हैं.

1. Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर जाकर, कोई Google Cloud प्रोजेक्ट चुनें या बनाएं.
   प्रोजेक्ट चुनने वाले टूल पर जाएं
2. Google Pay और Wallet Developer API चालू करें.
   एपीआई को चालू करना
   • एपीआई चालू करने के लिए, आपके पास Service Usage Admin IAM की भूमिका (roles/serviceusage.serviceUsageAdmin) होनी चाहिए. इसमें serviceusage.services.enable अनुमति शामिल होती है. भूमिकाएं असाइन करने का तरीका जानें.
   

ज़रूरी भूमिकाएं

Google Pay MCP सर्वर का इस्तेमाल करने के लिए ज़रूरी अनुमतियां पाने के लिए, अपने एडमिन से कहें कि वह आपको Google Cloud प्रोजेक्ट पर, आईएएम की ये भूमिकाएं असाइन करे:

• एमसीपी टूल कॉल करें: MCP Tool User (roles/mcp.toolUser)

ज़्यादा जानकारी के लिए, प्रोजेक्ट का ऐक्सेस मैनेज करना लेख पढ़ें.

पुष्टि करना और अनुमति देना

Google Pay का एमसीपी सर्वर, पुष्टि करने और अनुमति देने के लिए IAM के साथ OAuth 2.0 प्रोटोकॉल का इस्तेमाल करता है.

Google Cloud संसाधनों को ऐक्सेस करने के लिए, अपने एमसीपी टूल के लिए OAuth 2.0 क्लाइंट आईडी और सीक्रेट बनाने के लिए, यह तरीका अपनाएं:

1. Google Cloud Console में, Google Auth Platform > Clients > Create client पर जाएं.
   क्लाइंट खाता बनाने के लिए यहां जाएं
2. ऐप्लिकेशन टाइप सूची में, अपने एआई ऐप्लिकेशन के लिए सही टाइप चुनें:
   • Antigravity, Claude.ai, Claude Code, और ChatGPT के लिए, वेब ऐप्लिकेशन चुनें.
   • Gemini CLI और VS Code के लिए, डेस्कटॉप ऐप्लिकेशन चुनें.
3. नाम फ़ील्ड में, अपने ऐप्लिकेशन के लिए कोई नाम डालें. उदाहरण के लिए, Antigravity.
4. रीडायरेक्ट करने के लिए अनुमति वाले यूआरआई सेक्शन में जाकर, + यूआरआई जोड़ें पर क्लिक करें. इसके बाद, अपने एआई ऐप्लिकेशन के लिए ज़रूरी रीडायरेक्ट यूआरआई जोड़ें:
   • Antigravity: https://antigravity.google/oauth-callback
   • अन्य एआई टूल: OAuth क्लाइंट सेटअप देखें.
5. बनाएं पर क्लिक करें. खाता बनाने के बाद, क्लाइंट की जानकारी वाले पेज पर जाएं. क्लाइंट आईडी और क्लाइंट सीक्रेट को कॉपी करें और उन्हें सुरक्षित तरीके से सेव करें.
6. Google Cloud Console में, Google Auth Platform > Audience पर जाएं. इसके बाद, Publish app पर क्लिक करें. इसके बाद, Publishing status को In production में बदलने के लिए, Confirm पर क्लिक करें.
   ऑडियंस पर जाएं
   
   

3. एमसीपी सर्वर कॉन्फ़िगर करना

अपने एआई ऐप्लिकेशन को कॉन्फ़िगर करना

इसके बाद, आपको अपने एआई ऐप्लिकेशन को सर्वर कॉन्फ़िगरेशन की जानकारी देनी होगी.

Antigravity 2.0

Antigravity 2.0 को कॉन्फ़िगर करने के लिए:

1. सेटिंग > पसंद के मुताबिक बनाएं पर जाएं. इसके बाद, इंस्टॉल किए गए एमसीपी सर्वर में जाकर, Antigravity की कॉन्फ़िगरेशन फ़ाइल (उदाहरण: ~/.gemini/antigravity/mcp_config.json) खोलने के लिए, एमसीपी कॉन्फ़िगरेशन खोलें पर क्लिक करें.
2. mcpServers में google-pay-wallet-dev एंट्री जोड़ें या उसे अपडेट करें. इसके लिए, अपने OAuth क्लाइंट आईडी और सीक्रेट का इस्तेमाल करें. बनाए गए OAuth 2.0 क्लाइंट आईडी और सीक्रेट से ANTIGRAVITY_CLIENT_ID और ANTIGRAVITY_CLIENT_SECRET को बदलें:

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

3. सेटिंग > पसंद के मुताबिक बनाएं पर जाएं. इसके बाद, इंस्टॉल किए गए एमसीपी सर्वर में जाकर, रीफ़्रेश करें पर क्लिक करें.
4. पुष्टि करें पर क्लिक करें और OAuth फ़्लो पूरा करें:
   • अगर आपको Google ने इस ऐप्लिकेशन की पुष्टि नहीं की है मैसेज दिखता है, तो आगे बढ़ने के लिए ऐडवांस पर क्लिक करें. इसके बाद, antigravity.google पर जाएं (सुरक्षित नहीं है) पर क्लिक करें. यह चेतावनी इसलिए दिखती है, क्योंकि आपके OAuth क्लाइंट की पुष्टि नहीं हुई है. डेवलपमेंट के दौरान आगे बढ़ना सुरक्षित है.
     
     
   • ज़रूरी स्कोप (Google Pay API के आपके इंटिग्रेशन देखना, उनमें बदलाव करना, और उन्हें मिटाना) चुनें. इसके बाद, Antigravity को ऐक्सेस देने के लिए, जारी रखें पर क्लिक करें.
     
5. ऑथराइज़ेशन कोड को कॉपी करें और ऑथराइज़ेशन कोड विंडो में सबमिट करें.
   

Antigravity IDE

Antigravity IDE को कॉन्फ़िगर करने के लिए:

1. Antigravity IDE में, एजेंट पैन > एमसीपी सर्वर > एमसीपी सर्वर मैनेज करें में जाकर, ज़्यादा विकल्प मेन्यू पर क्लिक करें.
2. एमसीपी सर्वर मैनेज करें पैनल में सबसे ऊपर, रॉ कॉन्फ़िगरेशन देखें पर क्लिक करके, 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"
         }
       }
     }
   }
   

3. एमसीपी सर्वर मैनेज करें पर वापस जाएं और रीफ़्रेश करें पर क्लिक करें. पुष्टि करें पर क्लिक करने से, एजेंट की सेटिंग में कस्टम सेटिंग टैब खुल जाता है.
4. पुष्टि करें पर क्लिक करें और OAuth फ़्लो पूरा करें:
   • अगर आपको Google ने इस ऐप्लिकेशन की पुष्टि नहीं की है मैसेज दिखता है, तो आगे बढ़ने के लिए ऐडवांस पर क्लिक करें. इसके बाद, antigravity.google पर जाएं (सुरक्षित नहीं है) पर क्लिक करें. यह चेतावनी इसलिए दिखती है, क्योंकि आपके OAuth क्लाइंट की पुष्टि नहीं हुई है. डेवलपमेंट के दौरान आगे बढ़ना सुरक्षित है.
     
     
   • ज़रूरी स्कोप (Google Pay API के आपके इंटिग्रेशन देखना, उनमें बदलाव करना, और उन्हें मिटाना) चुनें. इसके बाद, Antigravity को ऐक्सेस देने के लिए, जारी रखें पर क्लिक करें.
     
5. ऑथराइज़ेशन कोड को कॉपी करें और ऑथराइज़ेशन कोड विंडो में सबमिट करें.
   

अन्य एआई टूल

अन्य एआई टूल कॉन्फ़िगर करने के लिए, एआई ऐप्लिकेशन कॉन्फ़िगर करने से जुड़ी गाइड देखें.

4. चेकआउट में Google Pay के नए इंटिग्रेशन को जोड़ना

सॉफ़्टवेयर डेवलपमेंट के पारंपरिक तरीके में, अक्सर एपीआई की खास बातों को समझना, छोटे-मोटे बदलाव वाले कोड को कॉपी करना, और पैरामीटर को सेट अप करना पड़ता है. इसके उलट, Antigravity में कॉन्फ़िगर किए गए Google Pay MCP सर्वर की मदद से, एलएलएम को प्रॉडक्शन के लिए तैयार चेकआउट पेज बनाने के लिए कहा जा सकता है.

1. Antigravity को चेकआउट की सुविधा के बारे में जानकारी देने के लिए प्रॉम्प्ट करें: Google Pay MCP सर्वर चालू करके, Antigravity के साथ चैट का कोई चालू सेशन खोलें. इसके बाद, चेकआउट की सुविधा के बारे में जानकारी देने के लिए यह प्रॉम्प्ट दें:

   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. एलएलएम को एमसीपी टूल से कनेक्ट करने की अनुमति दें: एलएलएम, loadPaymentData जैसी क्वेरी के साथ search_documentation को एक्ज़ीक्यूट करता है. Google Pay का एमसीपी सर्वर, अपने आरएजी वेक्टर एम्बेडिंग से क्वेरी करता है और Google Pay के लिए ज़रूरी JSON स्कीमा दिखाता है.
3. कोड जनरेट करने और उसे लागू करने की प्रोसेस देखें: Antigravity, आपके प्रॉम्प्ट को एमसीपी टूल के आउटपुट के साथ जोड़ता है, ताकि आपके लिए शुरुआती डिज़ाइन तैयार किया जा सके. इसके बाद, आपको इस डिज़ाइन की समीक्षा करने का मौका मिलता है. साथ ही, इसमें बदलाव करने के लिए टिप्पणियां जोड़ने या इसे मंज़ूरी देने का विकल्प मिलता है:
   
   इस इमेज में, जनरेट किया गया डेमो दिखाया गया है. ध्यान दें कि 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 स्टेप-अप सिग्नल की जांच करना: यह देखने के लिए कि 3D-Secure स्टेप-अप पुष्टि की प्रोसेस, 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 की बारीकियों को समझना

डाइनैमिक कीमत लागू करने से पहले, यह समझना ज़रूरी है कि अलग-अलग एनवायरमेंट में यह सिग्नल कैसे काम करता है:

• टेस्ट एनवायरमेंट: ध्यान दें कि Google Pay की पेस्लिप पर TEST हमेशा कुल कीमत दिखती है. कारोबारियों या कंपनियों को जवाब से मिले सिग्नल का इस्तेमाल करना होगा. साथ ही, पेमेंट की अनुमति मिलने से पहले, उन्हें ऑर्डर की पुष्टि करने वाली अपनी स्क्रीन पर, आखिरी कीमत (इसमें अतिरिक्त शुल्क भी शामिल हैं) दिखानी होगी. इस उदाहरण में दिखाया गया है कि ऐसा कैसे किया जाता है.
• प्रोडक्शन डिप्लॉयमेंट: अगर आपको Google Pay की पेस्लिप पर कुल कीमत छिपानी है, तो अपने Merchant ID को अनुमति वाली सूची में शामिल करने के लिए, Google की तरफ़ से संपर्क करने वाले व्यक्ति से संपर्क करें.

डाइनैमिक प्राइसिंग के लिए स्पेसिफ़िकेशन के आधार पर डेवलपमेंट

1. डेवलपर दस्तावेज़ देखने के लिए, MCP टूल का इस्तेमाल करें: Antigravity के चालू चैट सेशन में, 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. 
   

💡 सलाह: अपनी JS और सीएसएस फ़ाइलों में बदलाव करने के बाद, अपने ब्राउज़र को Ctrl+Shift+R या Cmd+Shift+R कमांड का इस्तेमाल करके हार्ड-रीलोड करना न भूलें. इससे यह पक्का किया जा सकेगा कि अपडेट आपके टेस्टिंग पेज पर दिख रहे हैं.

2. एलएलएम के लागू होने की पुष्टि करें: एमसीपी का इस्तेमाल करके, सीधे तौर पर दस्तावेज़ से क्वेरी करने पर एलएलएम, कीमत के हिसाब से लागू करने के लिए सटीक तकनीकी जानकारी निकालता है. पुष्टि करने वाली स्क्रीन पर, सरचार्ज के यूज़र इंटरफ़ेस (यूआई) में हुए बदलावों की पुष्टि करने और उनकी समीक्षा करने के लिए, टेस्ट पेज देखें:
   
   
   यहां एलएलएम से जनरेट किया गया बेहतर JavaScript कोड दिया गया है:

   /**
    * 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. [ज़रूरी नहीं] बार-बार होने वाले पेमेंट के लिए, पेमेंट के सफल होने की दर बढ़ाना

ℹ️ ध्यान दें: इस सेक्शन में, सदस्यता मॉडल के लिए कारोबारी या कंपनी की ओर से शुरू किए गए लेन-देन (एमआईटी) को लागू करने का तरीका बताया गया है. अगर आपके इंटिग्रेशन के लिए बार-बार होने वाले पेमेंट की ज़रूरत है, तो इस वैकल्पिक टास्क को अभी या बाद में पूरा किया जा सकता है.

अगर आपके कारोबार, सदस्यता, बार-बार होने वाले यूटिलिटी बिलिंग या सदस्यता मॉडल पर काम करते हैं, तो आपको हर बिलिंग साइकल में उपयोगकर्ता से फिर से पुष्टि कराए बिना पेमेंट प्रोसेस करने की ज़रूरत पड़ सकती है. बार-बार होने वाले इन पेमेंट के लिए. हमारे एमआईटी स्पेसिफ़िकेशन से, लेन-देन के टाइप, बिलिंग की जानकारी, और पेमेंट की प्रोसेस को बेहतर तरीके से समझने में मदद मिलती है.

स्पेसिफ़िकेशन के हिसाब से डेवलपमेंट लागू करना

एलएलएम को पूरे वेब पर खोज करने की अनुमति देने के बजाय, उसे Google Pay MCP सर्वर के search_documentation टूल का इस्तेमाल करने का निर्देश दें. इससे तकनीकी जानकारी के गलत इस्तेमाल का जोखिम कम हो जाता है.

1. स्पेसिफ़िकेशन पाने के लिए प्रॉम्प्ट: Antigravity के मौजूदा चैट सेशन में, एलएलएम को यह प्रॉम्प्ट दें:

   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. 
   

💡 सलाह: अपनी JS और सीएसएस फ़ाइलों में बदलाव करने के बाद, अपने ब्राउज़र को Ctrl+Shift+R या Cmd+Shift+R कमांड का इस्तेमाल करके हार्ड-रीलोड करना न भूलें. इससे यह पक्का किया जा सकेगा कि अपडेट आपके टेस्टिंग पेज पर दिख रहे हैं.

2. बेहतर कोड लागू करने की समीक्षा करें: एलएलएम, onGooglePaymentButtonClicked को स्पेसिफ़िकेशन के हिसाब से मान्य किए गए एमआईटी पैरामीटर के साथ अपडेट करता है:

   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 की पे-शीट में, बार-बार होने वाले पेमेंट वाली सदस्यता की जानकारी दिख रही है या नहीं:

समस्या का हल

अगर आपको गड़बड़ी का यह मैसेज मिलता है, तो:

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

गड़बड़ी को अपने चालू Antigravity चैट सेशन में कॉपी करें, ताकि एमसीपी टूल search_documentation का इस्तेमाल करके गड़बड़ी को अपने-आप ठीक किया जा सके.

7. [ज़रूरी नहीं] लंबे समय तक एजेंट की गतिविधि को मॉनिटर करके कन्वर्ज़न को सुरक्षित रखें

ℹ️ ध्यान दें: इस सेक्शन में बताया गया है कि Google Pay इंटिग्रेशन की लगातार निगरानी करने के लिए, Antigravity एजेंट का इस्तेमाल कैसे करें. अगर आपके इंटिग्रेशन के लिए एजेंट की निगरानी ज़रूरी है, तो इस वैकल्पिक गतिविधि को अभी या बाद में पूरा किया जा सकता है.

मान लें कि आपकी लीडरशिप टीम ने आपको एक अहम लक्ष्य दिया है: इस साल पेमेंट कन्वर्ज़न रेट को X% तक बढ़ाना है. चेकआउट कन्वर्ज़न को बेहतर बनाना और उसे बनाए रखना, सिर्फ़ शुरुआती इंटिग्रेशन के बारे में नहीं है. इसके लिए, लेन-देन को लगातार मॉनिटर करना, एपीआई की गड़बड़ियों का तुरंत पता लगाना, और डेटा के आधार पर ऑप्टिमाइज़ेशन को तुरंत लागू करना ज़रूरी है.

पेमेंट से जुड़ी समस्याओं को मैन्युअल तरीके से मॉनिटर करने के बजाय, किसी एजेंट को लगातार मॉनिटर करने और कन्वर्ज़न ऑप्टिमाइज़ेशन का काम सौंपा जा सकता है. इस अभ्यास में, हम यह पता लगाएंगे कि मॉनिटरिंग और कन्वर्ज़न ऑप्टिमाइज़ेशन को Antigravity Agent Skill के तौर पर कैसे तय किया जाता है. साथ ही, इसे Long-Horizon Task के तौर पर अपने-आप कैसे लागू किया जाता है.

Antigravity एजेंट की स्किल बनाना और उसे लंबे समय तक चलने वाले टास्क के तौर पर चलाना

1. समस्या की निगरानी करने और उसे ठीक करने की स्किल तय करें (SKILL.md): अपने वर्कस्पेस के रूट में, ~/.agents/skills/gpay-monitor-fix/SKILL.md (या ~/.gemini/skills/gpay-monitor-fix/SKILL.md) नाम की स्ट्रक्चर्ड स्किल प्लेबुक बनाएं. Google Pay console में जाकर, YOUR_MERCHANT_ID की जगह अपना कारोबारी या कंपनी आईडी डालें:

   ---
   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 में लंबे समय तक चलने वाले बैकग्राउंड टास्क को शेड्यूल करना: अपनी स्किल तय करने के बाद, चालू Antigravity सेशन में, Antigravity एजेंट को कॉन्फ़िगर करने के लिए /schedule कमांड डालें:

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

3. ऑटोमैटिक ऑप्टिमाइज़ेशन के नतीजों की समीक्षा करें: मान लें कि आपके कारोबारी या कंपनी के आईडी से लाइव प्रोडक्शन ट्रैफ़िक आ रहा है. ऐसे में, अगली सुबह ऑफ़िस पहुंचने पर आपको ऑप्टिमाइज़ेशन रिपोर्ट दिखेगी. यह रिपोर्ट का इलस्ट्रेशन है:
   
   

8. [ज़रूरी नहीं] GPay के एक्सप्रेस गेस्ट चेकआउट की मदद से कन्वर्ज़न बढ़ाना

ℹ️ नोट: इस सेक्शन में बताया गया है कि कन्वर्ज़न फ़नल में आने वाली रुकावटों को कम करने के लिए, प्रॉडक्ट की जानकारी वाले पेज पर सीधे तौर पर एक्सप्रेस लॉग इन किए बिना खरीदारी की सुविधा कैसे लागू करें. इस ज़रूरी नहीं है कि आप इस अभ्यास को अभी पूरा करें. इसे बाद में भी पूरा किया जा सकता है.

चेकआउट के लिए, कई चरणों वाली प्रोसेस में अक्सर लोगों को शिपिंग और बिलिंग की लंबी जानकारी मैन्युअल तरीके से डालनी पड़ती है. इसके अलावा, उन्हें खाते भी बनाने पड़ सकते हैं. इससे लोगों को परेशानी होती है और कन्वर्ज़न फ़नल के दौरान, वे खरीदारी छोड़ देते हैं. Google Pay की मदद से, प्रॉडक्ट के बारे में जानकारी देने वाले पेज पर सीधे तौर पर एक्सप्रेस गेस्ट चेकआउट की सुविधा लागू करके, उपयोगकर्ताओं को कम से कम क्लिक में चेक आउट करने की अनुमति दी जा सकती है. साथ ही, उनके Google खातों से पहले से सेव किए गए क्रेडेंशियल को सुरक्षित तरीके से पुल करके, मैन्युअल तरीके से फ़ॉर्म भरने की ज़रूरत को खत्म किया जा सकता है.

लॉग इन किए बिना खरीदारी करने की सुविधा के लिए, स्पेसिफ़िकेशन के हिसाब से डेवलपमेंट

1. स्पेसिफ़िकेशन पाने और मेहमान के तौर पर चेकआउट करने की सुविधा लागू करने के लिए प्रॉम्प्ट: Antigravity के चालू चैट सेशन में, एलएलएम को यह प्रॉम्प्ट दें:

   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.
   

💡 सलाह: अपनी JS और सीएसएस फ़ाइलों में बदलाव करने के बाद, अपने ब्राउज़र को Ctrl+Shift+R या Cmd+Shift+R कमांड का इस्तेमाल करके हार्ड-रीलोड करना न भूलें. इससे यह पक्का किया जा सकेगा कि अपडेट आपके टेस्टिंग पेज पर दिख रहे हैं.

2. बेहतर कोड लागू करने की सुविधा की समीक्षा करें: एलएलएम, पेमेंट डेटा के अनुरोध को अपडेट करता है, ताकि Google Pay API के ज़रिए सीधे तौर पर शिपिंग, संपर्क, और बिलिंग की जानकारी इकट्ठा की जा सके:

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

3. बिना खाता बनाए चेकआउट करने की सुविधा की जांच करें: टेस्ट पेज पर जाकर देखें कि प्रॉडक्ट की जानकारी वाले पेज पर मौजूद 'बिना खाता बनाए चेकआउट करें' बटन, सभी ज़रूरी एट्रिब्यूट की जानकारी इकट्ठा करता है. इससे मैन्युअल तरीके से जानकारी डालने की ज़रूरत नहीं पड़ती:
   
   

9. व्यवस्थित करें

Google Cloud प्रोजेक्ट मिटाना

⚠️ चेतावनी: इस Google Cloud प्रोजेक्ट को मिटाने से, इसके सभी संसाधन हमेशा के लिए मिट जाएंगे. इनमें इस कोडलैब से जुड़ा काम भी शामिल है. इसके अलावा, आने वाले समय में इस कस्टम प्रोजेक्ट आईडी का दोबारा इस्तेमाल नहीं किया जा सकेगा. आईडी को बनाए रखने के लिए, पूरे प्रोजेक्ट के बजाय सिर्फ़ इस लैब के दौरान बनाए गए संसाधनों को मिटाएं.

हमारा सुझाव है कि आप Google Cloud प्रोजेक्ट को मिटा दें, ताकि इस कोडलैब में इस्तेमाल किए गए संसाधनों के लिए, आपके Google Cloud खाते से शुल्क न लिया जाए.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. नतीजा

आपने Google Pay API: एमसीपी सर्वर और Antigravity के साथ वाइब-कोड चेकआउट पेज वर्कशॉप पूरी कर ली है!

आपने Google Pay MCP सर्वर को एआई-नेटिव टूल से कनेक्ट करने, कॉन्टेक्स्ट इंजीनियरिंग का इस्तेमाल करके क्लीन चेकआउट इंटिग्रेशन को स्कैफ़ोल्ड करने, स्पेसिफ़िकेशन-ड्रिवन डेवलपमेंट का इस्तेमाल करके सदस्यता और डाइनैमिक प्राइसिंग वर्कफ़्लो लागू करने, और एलएलएम पर आधारित मॉनिटरिंग पाइपलाइन को डिप्लॉय करने का तरीका सीखा है. अब आपके पास, चेकआउट करने वाले उपयोगकर्ता के फ़्रंट-एंड और एआई की मदद से मॉनिटरिंग करने वाले वर्कफ़्लो को वाइब-कोड करने की सुविधा है.

अन्य संसाधन

• Discord पर#google-dev-community चैनल में शामिल हों
• X पर@GooglePayDevs को फ़ॉलो करें