Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

‫Google Pay API: תכנות בשיטת Vibe coding של דף תשלום באמצעות שרתי MCP ו-Antigravity

1. סקירה כללית

פיתוח תוכנה מודרני עובר במהירות מגישה של תכנות אימפרטיבי לגישה של פיתוח מבוסס-AI. בשיעור Codelab הזה תלמדו איך ליצור שילובים של Google Pay ולשפר אותם באמצעות שרת ה-MCP של Google Pay ו-Wallet למפתחים (להלן: שרת ה-MCP של Google Pay) ו-Antigravity, כלי מבוסס-AI.

‫Model Context Protocol‏ (MCP) הוא תקן פתוח שמאפשר למודלים של AI לגשת בצורה מאובטחת לכלים חיצוניים, לתיעוד פעיל ולנקודות קצה מרוחקות של API. בתהליך עבודה מבוסס-AI ב-Antigravity, תגדירו את הסביבה שלכם כדי ליצור תקשורת עם שרת ה-MCP של Google Pay, ותבנו במהירות לחצן Google Pay מוכן לייצור לדף תשלום מאפס.

לאחר מכן, תשתמשו במתודולוגיות פיתוח מבוססות-מפרט כדי לשפר את השילוב עם תכונות חדשות של API – במיוחד הפעלת עסקאות שמתחילות על ידי מוֹכר (MIT) לתשלומים חוזרים ושימוש באות cardFundingSource לניתוב דינמי ולתמחור. לבסוף, תגדירו צינור עיבוד נתונים אוטונומי מבוסס-LLM למעקב ולתיקון בעיות בתהליך התשלום במהלך הלילה.

מה תלמדו

איך מגדירים ומחברים את שרת ה-MCP של Google Pay ל-Antigravity או לכלים אחרים מבוססי-AI
איך משתמשים בשרת Google Pay MCP כדי לשלוח שאילתות לתיעוד
איך ליצור תשתית לשילוב של תהליך תשלום ב-Google Pay ברמה הכי גבוהה ישירות ב-Antigravity
איך מטמיעים ניתוב דינמי ותמחור דינמי באמצעות פיתוח מונחה-מפרט
איך לשפר תרחישי שימוש במינויים חוזרים באמצעות פיתוח מבוסס-מפרט
איך פורסים צינורות עיבוד נתונים ארוכי טווח ואוטומטיים באמצעות Antigravity
איך מטמיעים תהליך מהיר לתשלום כאורח כדי לבצע אופטימיזציה של משפך ההמרה

2. הגדרה ודרישות

לפני שמתחילים

כדי להשתמש בשרת Google Pay MCP, צריך ליצור פרויקט ב-Google Cloud ולהפעיל את Google Pay & Wallet Developer API.

במסוף Cloud, בדף לבחירת הפרויקט, בוחרים פרויקט או יוצרים פרויקט חדש ב-Google Cloud.
מפעילים את Google Pay & Wallet Developer API.
- כדי להפעיל ממשקי API, צריך את תפקיד ה-IAM 'אדמין של שימוש בשירות' (roles/serviceusage.serviceUsageAdmin), שכולל את ההרשאה serviceusage.services.enable. איך מקצים תפקידים

התפקידים הנדרשים

כדי לקבל את ההרשאות שנדרשות לשימוש בשרת MCP של Google Pay, צריך לבקש מהאדמין להקצות לכם את תפקידי ה-IAM הבאים בפרויקט Google Cloud:

ביצוע קריאות לכלי ה-MCP: ‏ MCP Tool User (roles/mcp.toolUser)

מידע נוסף זמין במאמר ניהול הגישה לפרויקטים.

אימות והרשאה

שרת ה-MCP של Google Pay משתמש בפרוטוקול OAuth 2.0 עם IAM לאימות ולהרשאה.

כדי ליצור מזהה לקוח וסוד לקוח מסוג OAuth 2.0 עבור כלי ה-MCP שלכם כדי לגשת למשאבי Google Cloud, צריך לבצע את השלבים הבאים:

במסוף Google Cloud, עוברים אל Google Auth Platform > Clients > Create client.
ברשימה Application type (סוג האפליקציה), בוחרים את הסוג המתאים לאפליקציית ה-AI שלכם:
- ל-Antigravity,‏ Claude.ai,‏ Claude Code ו-ChatGPT, בוחרים באפשרות Web application (אפליקציית אינטרנט).
- ל-Gemini CLI ול-VS Code, בוחרים באפשרות אפליקציית מחשב.
בשדה שם, מזינים שם לאפליקציה (לדוגמה, Antigravity).
בקטע Authorized redirect URIs (כתובות URI מורשות להפניה אוטומטית), לוחצים על + Add URI (הוספת כתובת URI), ואז מוסיפים את כתובת ה-URI הנדרשת להפניה אוטומטית עבור אפליקציית ה-AI:
- Antigravity: https://antigravity.google/oauth-callback
- כלי AI אחרים: ראו הגדרת לקוח OAuth.
לוחצים על יצירה. אחרי שיוצרים את הלקוח, עוברים לפרטים שלו. מעתיקים את מזהה הלקוח ואת סוד הלקוח ושומרים אותם בצורה מאובטחת.
במסוף Google Cloud, עוברים אל Google Auth Platform > Audience, לוחצים על Publish app ואז על Confirm כדי לשנות את Publishing status ל-In production.

3. הגדרת שרתי MCP

הגדרת אפליקציית ה-AI

בשלב הבא, צריך לספק לאפליקציית ה-AI את פרטי הגדרת השרת.

‫Antigravity 2.0

כדי להגדיר את Antigravity 2.0:

עוברים אל הגדרות > התאמות אישיות, ובקטע Installed MCP Servers (שרתי MCP שהותקנו) לוחצים על Open MCP Config (פתיחת הגדרות ה-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"
      }
    }
  }
}
```
עוברים אל הגדרות > התאמות אישיות ובקטע Installed MCP Servers (שרתי MCP מותקנים) לוחצים על Refresh (רענון).
לוחצים על אימות ומשלימים את תהליך OAuth:
- אם מופיעה ההודעה Google לא אימתה את האפליקציה הזו, לוחצים על מתקדם ואז על מעבר אל antigravity.google (לא בטוח) כדי להמשיך. האזהרה הזו מוצגת כי לקוח ה-OAuth שלך לא אומת. במהלך הפיתוח, אפשר להמשיך בבטחה.
- בוחרים את ההיקפים הנדרשים (צפייה, עריכה ומחיקה של השילובים שלך עם Google Pay API) ולוחצים על המשך כדי להעניק גישה ל-Antigravity.
מעתיקים את קוד ההרשאה ושולחים אותו בחלון קוד ההרשאה.

Antigravity IDE

כדי להגדיר את Antigravity IDE:

ב-Antigravity IDE, לוחצים על התפריט אפשרויות נוספות בחלונית Agent > שרתי MCP > ניהול שרתי MCP.
בחלק העליון של החלונית Manage MCP Servers (ניהול שרתי MCP), לוחצים על 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"
      }
    }
  }
}
```
חוזרים אל ניהול שרתי MCP ולוחצים על רענון. לחיצה על אימות פותחת את הכרטיסייה התאמות אישיות בהגדרות הסוכן.
לוחצים על אימות ומשלימים את תהליך OAuth:
- אם מופיעה ההודעה Google לא אימתה את האפליקציה הזו, לוחצים על מתקדם ואז על מעבר אל antigravity.google (לא בטוח) כדי להמשיך. האזהרה הזו מוצגת כי לקוח ה-OAuth שלך לא אומת. במהלך הפיתוח, אפשר להמשיך בבטחה.
- בוחרים את ההיקפים הנדרשים (צפייה, עריכה ומחיקה של השילובים שלך עם Google Pay API) ולוחצים על המשך כדי להעניק גישה ל-Antigravity.
מעתיקים את קוד ההרשאה ושולחים אותו בחלון קוד ההרשאה.

כלים נוספים מבוססי-AI

כדי להגדיר כלי AI אחרים, אפשר לעיין במדריך בנושא הגדרת אפליקציית AI.

4. יצירת תשתית לשילובים חדשים של Google Pay בתהליך התשלום

פיתוח תוכנה מסורתי דורש לעיתים קרובות עיון במפרטי API נרחבים, העתקה של קוד boilerplate וחיבור פרמטרים. לעומת זאת, אם שרת Google Pay MCP מוגדר ב-Antigravity, אפשר להנחות את ה-LLM ליצור מסגרת לחוויית תשלום שמוכנה להטמעה בסביבת ייצור.

מבקשים מ-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. שרת ה-MCP של Google Pay שולח שאילתות להטמעות וקטוריות של 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: כדי לבדוק אם אותות הסיכון של מכשיר assuranceDetails מוערכים בצורה נכונה בהשוואה לאימות נוסף של 3D-Secure, מזינים את ההנחיה:
```
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 כדי להוסיף את מספר המוכר שלכם לרשימת ההיתרים.

פיתוח מבוסס-מפרט לתמחור דינמי

שימוש בכלי 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 של שרת ה-MCP של Google Pay.

הנחיה לאחזור המפרט: בסשן הצ'אט הפעיל שלכם ב-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 שעברו אימות לפי המפרט:

‫

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: ממשק משתמש של גיליון תשלומים חוזרים ב-Google Pay MIT

ממשק משתמש של גיליון תשלומים חוזרים ב-Google Pay MIT

פתרון בעיות

אם מופיעה השגיאה:

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

אפשר להעתיק את השגיאה לסשן הצ'אט הפעיל ב-Antigravity כדי לתקן את השגיאה באופן אוטומטי באמצעות הכלי MCP search_documentation.

7. [אופציונלי] הגנה על ההמרות באמצעות מעקב ארוך טווח אחרי סוכנים

נניח שהצוות הניהולי שלכם הציב לכם יעד חשוב: הגדלת שיעורי ההמרה הכוללים של תשלומים ב-X% השנה. כדי להשיג ולשמור על שיעור המרה גבוה בדף התשלום, לא מספיק לבצע שילוב ראשוני – צריך לעקוב באופן רציף אחרי עסקאות, לזהות שגיאות ב-API באופן מיידי וליישם אופטימיזציות מבוססות-נתונים באופן יזום.

במקום לעקוב אחרי בעיות בתשלומים באופן ידני, אפשר להעביר את המעקב הרציף ואת אופטימיזציית ההמרות לסוכן. בתרגיל הזה נסביר איך להגדיר מעקב ואופטימיזציה של המרות כמיומנות של סוכן Antigravity, ולהפעיל אותם באופן אוטונומי כמשימה ארוכת טווח.

יצירת יכולת של סוכן 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: אחרי שמגדירים את המיומנות, מזינים את הפקודה /schedule בסשן פעיל של Antigravity כדי להגדיר סוכן של 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 (); 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 מעדכן את בקשת נתוני התשלום כדי לאסוף פרטי משלוח, פרטים ליצירת קשר ופרטי חיוב ישירות דרך 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
  }
});

בדיקת תהליך מהיר לתשלום כאורח: בודקים את דף הבדיקה כדי לוודא שבלחיצה על כפתור התשלום המהיר כאורח בדף פרטי המוצר נאספים כל המאפיינים הנדרשים, בלי שהמשתמש יצטרך להזין אותם באופן ידני:

9. הסרת המשאבים

מחיקת פרויקט בענן ב-Google Cloud

כדי להימנע מחיובים בחשבון Google Cloud על המשאבים שבהם השתמשתם ב-codelab הזה, מומלץ למחוק את הפרויקט ב-Google Cloud.

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. סיכום

סיימתם את הסדנה Google Pay API: Vibe-code checkout page with MCP servers and Antigravity.

למדתם איך לחבר את שרת Google Pay MCP לכלי מבוסס-AI, ליצור שילובים של תהליכי תשלום באמצעות Context Engineering, להטמיע תהליכי עבודה של מינויים ותמחור דינמי באמצעות Spec-Driven Development ולפרוס צינורות מעקב אוטונומיים מבוססי-LLM. עכשיו יש לכם את כל מה שצריך כדי ליצור קוד שמתאים לשינויים עתידיים של ממשק המשתמש של דף התשלום, ולבנות תהליכי עבודה של מעקב מבוסס-AI.

מקורות מידע נוספים

הצטרפות לערוץ #google-dev-community ב-Discord
עקבו אחרי ‎@GooglePayDevs ב-X

‫Google Pay API: תכנות בשיטת Vibe coding של דף תשלום באמצעות שרתי MCP ו-Antigravity

1. סקירה כללית

מה תלמדו

2. הגדרה ודרישות

לפני שמתחילים

התפקידים הנדרשים

אימות והרשאה

3. הגדרת שרתי MCP

הגדרת אפליקציית ה-AI

‫Antigravity 2.0

Antigravity IDE

כלים נוספים מבוססי-AI

4. יצירת תשתית לשילובים חדשים של Google Pay בתהליך התשלום

פתרון בעיות

5. אופטימיזציה של חוויית המשתמש לחיובים דינמיים

הבנת cardFundingSource ניואנסים

פיתוח מבוסס-מפרט לתמחור דינמי

6. [אופציונלי] הגדלת שיעור ההצלחה של תשלומים חוזרים

יישום של פיתוח מונחה-מפרט

פתרון בעיות

7. [אופציונלי] הגנה על ההמרות באמצעות מעקב ארוך טווח אחרי סוכנים

יצירת יכולת של סוכן Antigravity והרצה כמשימה ארוכת טווח

8. [אופציונלי] שיפור ההמרות באמצעות תשלום מהיר ב-GPay ללקוחות שלא נרשמו

פיתוח מבוסס-מפרט לתשלום כאורח

9. הסרת המשאבים

מחיקת פרויקט בענן ב-Google Cloud

10. סיכום

מקורות מידע נוספים

הבנת `cardFundingSource` ניואנסים