‫Google Pay API: البرمجة الوصفية لصفحة الدفع باستخدام خوادم MCP وAntigravity

1. نظرة عامة

يتغيّر تطوير البرامج الحديثة بسرعة من البرمجة الإجرائية إلى التطوير المستند إلى الذكاء الاصطناعي. في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إنشاء عمليات دمج Google Pay وتحسينها باستخدام خادم MCP الخاص بأداة المطوّرين في Google Pay و"محفظة Google" (يُشار إليه من الآن فصاعدًا باسم خادم MCP الخاص بـ Google Pay) وAntigravity، وهي أداة تستند إلى الذكاء الاصطناعي.

‫Model Context Protocol (MCP) هو معيار مفتوح يتيح لنماذج الذكاء الاصطناعي الوصول بأمان إلى الأدوات الخارجية والمستندات المباشرة ونقاط نهاية واجهة برمجة التطبيقات البعيدة. من خلال سير عمل مدمج في Antigravity يستند إلى الذكاء الاصطناعي، يمكنك إعداد بيئتك للتواصل مع خادم MCP الخاص بخدمة Google Pay وإنشاء زر Google Pay جاهز للاستخدام في صفحة الدفع بسرعة ومن البداية.

بعد ذلك، ستستخدم منهجيات التطوير المستندة إلى المواصفات لتحسين عملية الدمج مع ميزات واجهة برمجة التطبيقات الجديدة، وتحديدًا تفعيل المعاملات التي يبدأها التاجر (MIT) للدفعات المتكررة واستخدام إشارة cardFundingSource للتوجيه الديناميكي وتحديد الأسعار. أخيرًا، ستُعدّ إعدادات مسار مراقبة مستقل يستند إلى نموذج لغوي كبير (LLM) لرصد مشاكل الدفع وحلّها خلال الليل.

أهداف الدورة التعليمية

• كيفية إعداد خادم MCP من Google Pay وربطه بأداة Antigravity أو أدوات الذكاء الاصطناعي الأخرى
• كيفية استخدام خادم MCP في Google Pay للاستعلام عن المستندات
• كيفية إنشاء عملية دمج ممتازة لصفحة الدفع في Google Pay مباشرةً في Antigravity
• كيفية تنفيذ التوجيه والتسعير الديناميكيَّين باستخدام نهج Spec-Driven Development
• كيفية تحسين حالات استخدام الاشتراكات المتكرّرة من خلال التطوير المستند إلى المواصفات
• كيفية تفعيل عمليات رصد طويلة الأمد ومسارات تستند إلى الذكاء الاصطناعي الوكيل تلقائيًا باستخدام 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.
   تفعيل واجهة برمجة التطبيقات
   • لتفعيل واجهات برمجة التطبيقات، يجب أن يكون لديك دور "مشرف استخدام الخدمة" في إدارة الهوية وإمكانية الوصول (IAM) (roles/serviceusage.serviceUsageAdmin)، والذي يتضمّن الإذن serviceusage.services.enable. كيفية منح الأدوار
   

الأدوار المطلوبة

للحصول على الأذونات المطلوبة لاستخدام خادم Google Pay MCP، اطلب من المشرف منحك أدوار "إدارة الهوية وإمكانية الوصول" التالية في مشروع Google Cloud:

• إجراء طلبات إلى أداة MCP: مستخدم أداة MCP (roles/mcp.toolUser)

لمزيد من المعلومات، يُرجى الاطّلاع على إدارة إذن الوصول إلى المشاريع.

المصادقة والتفويض

يستخدم خادم MCP في Google Pay بروتوكول OAuth 2.0 مع إدارة الهوية وإمكانية الوصول للمصادقة والتفويض.

اتّبِع الخطوات التالية لإنشاء معرّف عميل وسرّ عميل OAuth 2.0 لأدوات MCP من أجل الوصول إلى موارد Google Cloud:

1. في Google Cloud Console، انتقِل إلى منصة Google للمصادقة > العملاء > إنشاء عميل.
   الانتقال إلى "إنشاء عميل"
2. في قائمة نوع التطبيق، اختَر النوع المناسب لتطبيق الذكاء الاصطناعي:
   • بالنسبة إلى Antigravity وClaude.ai وClaude Code وChatGPT، اختَر تطبيق ويب.
   • بالنسبة إلى Gemini CLI وVS Code، اختَر تطبيق سطح المكتب.
3. في حقل الاسم، أدخِل اسمًا لتطبيقك (على سبيل المثال، Antigravity).
4. في قسم معرّفات الموارد المنتظمة (URI) المعتمَدة لإعادة التوجيه، انقر على + إضافة معرّف موارد منتظمة (URI)، ثم أضِف معرّف الموارد المنتظمة (URI) المطلوب لإعادة التوجيه لتطبيق الذكاء الاصطناعي:
   • Antigravity: https://antigravity.google/oauth-callback
   • أدوات الذكاء الاصطناعي الأخرى: يُرجى الاطّلاع على إعداد عميل OAuth.
5. انقر على إنشاء. بعد إنشاء الحساب، انتقِل إلى تفاصيل العميل. انسخ معرّف العميل وسر العميل، وخزِّنهما بأمان.
6. في Google Cloud Console، انتقِل إلى Google Auth Platform > الجمهور، ثم انقر على نشر التطبيق، ثم على تأكيد لتغيير حالة النشر إلى في مرحلة الإنتاج.
   الانتقال إلى "الجمهور"
   
   

3- إعداد خوادم MCP

إعداد تطبيق الذكاء الاصطناعي

بعد ذلك، عليك تزويد تطبيق الذكاء الاصطناعي بتفاصيل إعدادات الخادم.

Antigravity 2.0

لضبط إعدادات Antigravity 2.0، اتّبِع الخطوات التالية:

1. انتقِل إلى الإعدادات > التخصيصات، وضِمن خوادم MCP المثبَّتة، انقر على فتح إعدادات MCP لفتح ملف إعدادات Antigravity (مثال: ~/.gemini/antigravity/mcp_config.json).
2. أضِف أو عدِّل الإدخال 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"
         }
       }
     }
   }
   

3. انتقِل إلى الإعدادات > التخصيصات، ثم انقر على إعادة تحميل ضمن خوادم MCP المثبَّتة.
4. انقر على مصادقة وأكمِل عملية OAuth:
   • إذا ظهرت لك الرسالة لم تتحقّق Google من هذا التطبيق، انقر على خيارات متقدمة، ثم انقر على الانتقال إلى antigravity.google (غير آمن) للمتابعة. يظهر هذا التحذير لأنّ عميل OAuth غير مثبَت الملكية. يمكنك المتابعة بأمان أثناء التطوير.
     
     
   • اختَر النطاقات المطلوبة (الاطّلاع على عمليات دمج Google Pay API وتعديلها وحذفها)، ثم انقر على متابعة لمنح Antigravity إذن الوصول.
     
5. انسخ رمز التفويض وأرسِله في نافذة رمز التفويض.
   

Antigravity IDE

لضبط Antigravity IDE، اتّبِع الخطوات التالية:

1. في Antigravity IDE، انقر على قائمة خيارات إضافية في لوحة Agent > خوادم MCP > إدارة خوادم MCP.
2. في أعلى لوحة "إدارة خوادم MCP" (Manage MCP Servers)، انقر على عرض الإعدادات الأولية (View raw config) لتعديل ملف 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. ارجع إلى إدارة خوادم MCP وانقر على إعادة التحميل. يؤدي النقر على المصادقة إلى فتح علامة التبويب التخصيصات في إعدادات الوكيل.
4. انقر على مصادقة وأكمِل عملية OAuth:
   • إذا ظهرت لك الرسالة لم تتحقّق Google من هذا التطبيق، انقر على خيارات متقدمة، ثم انقر على الانتقال إلى antigravity.google (غير آمن) للمتابعة. يظهر هذا التحذير لأنّ عميل OAuth غير مثبَت الملكية. يمكنك المتابعة بأمان أثناء التطوير.
     
     
   • اختَر النطاقات المطلوبة (الاطّلاع على عمليات دمج Google Pay API وتعديلها وحذفها)، ثم انقر على متابعة لمنح Antigravity إذن الوصول.
     
5. انسخ رمز التفويض وأرسِله في نافذة رمز التفويض.
   

أدوات الذكاء الاصطناعي الأخرى

لضبط أدوات الذكاء الاصطناعي الأخرى، اطّلِع على دليل إعداد تطبيق الذكاء الاصطناعي.

4. إنشاء عمليات دمج جديدة في Google Pay ضمن عملية الدفع

يتطلّب تطوير البرامج التقليدية في كثير من الأحيان التنقّل بين مواصفات واجهة برمجة التطبيقات الشاملة ونسخ رمز النص النموذجي وإعداد المَعلَمات. في المقابل، عند إعداد خادم Google Pay MCP في Antigravity، يمكنك أن تطلب من النموذج اللغوي الكبير إنشاء تجربة دفع جاهزة للاستخدام.

1. اطلب من Antigravity إنشاء إطار لعملية الدفع: افتح جلسة دردشة نشطة في Antigravity (مع تفعيل خادم MCP في Google Pay) وأدخِل طلب إنشاء الإطار التالي:

   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. السماح للنموذج اللغوي الكبير بالاتصال بأدوات MCP: ينفّذ النموذج اللغوي الكبير search_documentation مع طلبات بحث مثل طلب loadPaymentData. يطلب خادم MCP في Google Pay عمليات تضمين متجهات RAG ويعرض مخطط JSON الدقيق الذي يتطلبه Google Pay.
3. مراقبة التنفيذ وإنشاء الرموز البرمجية: يجمع 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: للتحقّق مما إذا كان يتم تقييم المصادقة الإضافية في 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، يُرجى التواصل مع جهة التواصل المعنية في 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. 
   

💡 ملاحظة: بعد تعديل ملفات JavaScript وCSS، تذكَّر إعادة تحميل المتصفّح بشكل كامل باستخدام الأمرين Ctrl+Shift+R أو Cmd+Shift+R للتأكّد من أنّ التعديلات تظهر على صفحة الاختبار.

2. التحقّق من تنفيذ النموذج اللغوي الكبير: من خلال طلب البحث مباشرةً في المستندات باستخدام MCP، يستخرج النموذج اللغوي الكبير المواصفات الفنية الدقيقة لتعديل عملية تنفيذ احتساب الأسعار. راقِب صفحة الاختبار للتحقّق من التغييرات في واجهة مستخدم الرسوم الإضافية ومراجعتها على شاشة التأكيد:
   
   
   في ما يلي رمز 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. [اختياري] زيادة معدّل نجاح عمليات الدفع المتكرّرة

ℹ️ ملاحظة: يوضّح هذا القسم كيفية تنفيذ "المعاملات التي يبدأها التاجر" (MIT) لنماذج الاشتراكات. يمكنك إكمال هذا التمرين الاختياري الآن أو لاحقًا إذا كان الدمج يتطلّب دفعات متكرّرة.

إذا كانت مؤسساتك تعمل بنماذج الاشتراكات أو الفوترة المتكرّرة للمرافق أو العضويات، قد تحتاج إلى معالجة الدفعات بدون أن تطلب من المستخدم إعادة المصادقة في كل دورة فوترة. لهذه الدفعات المتكرّرة. يوفّر مواصفات "التجارة المتكررة" إمكانية رؤية محسّنة لأنواع المعاملات وتفاصيل الفوترة واستمرار الدفع بسلاسة.

تطبيق نهج التطوير المستند إلى المواصفات

بدلاً من السماح للنموذج اللغوي الكبير بالبحث بشكل عشوائي على الويب، ما قد يؤدي إلى استخدام مواصفات فنية غير دقيقة، يمكنك توجيه النموذج اللغوي الكبير لاستخدام أداة search_documentation في خادم بروتوكول سياق النموذج (MCP) في Google Pay.

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. 
   

💡 ملاحظة: بعد تعديل ملفات JavaScript وCSS، تذكَّر إعادة تحميل المتصفّح بشكل كامل باستخدام الأمرين Ctrl+Shift+R أو Cmd+Shift+R للتأكّد من أنّ التعديلات تظهر على صفحة الاختبار.

2. مراجعة عملية تنفيذ الرمز المحسّن: تعدّل نماذج اللغات الكبيرة onGooglePaymentButtonClicked باستخدام مَعلمات MIT التي تم التحقّق من صحتها وفقًا للمواصفات:

   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 النشطة لإصلاحه تلقائيًا باستخدام أداة MCP search_documentation.

7. [اختياري] حماية الإحالات الناجحة من خلال المراقبة المستندة إلى وكيل على المدى الطويل

ℹ️ ملاحظة: يوضّح هذا القسم كيفية استخدام وكيل Antigravity لمراقبة عملية دمج Google Pay باستمرار. يمكنك إكمال هذا التمرين الاختياري الآن أو لاحقًا إذا كان الدمج يتطلّب مراقبة قائمة على الوكالة.

لنفترض أنّ فريق القيادة قد حدّد لك هدفًا مهمًا: زيادة معدّلات الإحالات الناجحة الإجمالية للدفع بنسبة X% هذا العام. لا يقتصر تحقيق معدّل إحالات ناجحة مرتفع والحفاظ عليه في عملية الدفع على الدمج الأوّلي، بل يتطلّب أيضًا مراقبة المعاملات باستمرار، ورصد أخطاء واجهة برمجة التطبيقات على الفور، وتنفيذ تحسينات استباقية مستندة إلى البيانات.

بدلاً من مراقبة مشاكل الدفع يدويًا، يمكنك تفويض وكيل بمهمة المراقبة المستمرة وتحسين الإحالات الناجحة. في هذا التمرين، نستكشف كيفية تحديد مراقبة الأداء وتحسين الإحالات الناجحة كـ مهارة من مهارات Antigravity Agent وتنفيذها بشكل مستقل كـ مهمة طويلة الأمد.

إنشاء مهارة وكيل Antigravity وتشغيلها كمهمة طويلة الأمد

1. تحديد مهارة المراقبة والإصلاح (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.
   

2. جدولة مهمة الخلفية طويلة الأمد في 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.
   

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.
   

💡 ملاحظة: بعد تعديل ملفات JavaScript وCSS، تذكَّر إعادة تحميل المتصفّح بشكل كامل باستخدام الأمرين 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: صفحة الدفع باستخدام البرمجة الوصفية مع خوادم MCP وAntigravity.

تعرّفت على كيفية ربط خادم Google Pay MCP بأداة تستند إلى الذكاء الاصطناعي، وإنشاء عمليات تكامل سلسة للدفع باستخدام Context Engineering، وتنفيذ اشتراكات وسير عمل لتحديد الأسعار بشكل ديناميكي باستخدام Spec-Driven Development، ونشر مسارات مراقبة مستقلة مستندة إلى نماذج اللغات الكبيرة. أصبحت الآن مجهّزًا لإنشاء واجهة أمامية للمستخدمين في عملية الدفع متوافقة مع أحدث التقنيات، بالإضافة إلى سير عمل للمراقبة مستند إلى الذكاء الاصطناعي.

مراجع إضافية

• الانضمام إلى قناة ‎#google-dev-community على Discord
• متابعة ‎@GooglePayDevs على X