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

Google Pay API: Vibe-code หน้าชำระเงินด้วยเซิร์ฟเวอร์ 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 อื่นๆ
วิธีใช้เซิร์ฟเวอร์ MCP ของ Google Pay เพื่อค้นหาเอกสารประกอบ
วิธีสร้างการผสานรวมการชำระเงินของ Google Pay ที่ดีที่สุดใน Antigravity โดยตรง
วิธีใช้การกำหนดเส้นทางและการกำหนดราคาแบบไดนามิกด้วยการพัฒนาที่ขับเคลื่อนด้วยข้อมูลจำเพาะ
วิธีปรับปรุง Use Case ของการสมัครใช้บริการแบบเรียกเก็บเงินตามรอบด้วยการพัฒนาที่อิงตามข้อกำหนด
วิธีติดตั้งใช้งานการตรวจสอบระยะยาวและไปป์ไลน์เอเจนต์อัตโนมัติโดยใช้ Antigravity
วิธีใช้การชำระเงินของผู้ใช้ที่ไม่ได้ลงทะเบียนแบบด่วนเพื่อเพิ่มประสิทธิภาพ Funnel Conversion

2. การตั้งค่าและข้อกำหนด

ก่อนเริ่มต้น

หากต้องการใช้เซิร์ฟเวอร์ MCP ของ Google Pay คุณต้องสร้างโปรเจ็กต์ Google Cloud และเปิดใช้ Google Pay & Wallet Developer API

ใน Cloud Console ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
เปิดใช้ Google Pay และ Wallet Developer API
- หากต้องการเปิดใช้ API คุณต้องมีบทบาท IAM ของผู้ดูแลการใช้งานบริการ (roles/serviceusage.serviceUsageAdmin) ซึ่งมีสิทธิ์ serviceusage.services.enable ดูวิธีให้สิทธิ์บทบาท

บทบาทที่จำเป็น

หากต้องการรับสิทธิ์ที่จำเป็นสำหรับการใช้เซิร์ฟเวอร์ MCP ของ Google Pay ให้ขอให้ผู้ดูแลระบบมอบบทบาท IAM ต่อไปนี้ในโปรเจ็กต์ Google Cloud ให้แก่คุณ

โทรหาเครื่องมือ MCP: ผู้ใช้เครื่องมือ MCP (roles/mcp.toolUser)

ดูข้อมูลเพิ่มเติมได้ที่จัดการสิทธิ์เข้าถึงโปรเจ็กต์

การตรวจสอบสิทธิ์และการให้สิทธิ์

เซิร์ฟเวอร์ MCP ของ Google Pay ใช้โปรโตคอล OAuth 2.0 กับ IAM สำหรับการตรวจสอบสิทธิ์และการให้สิทธิ์

ทำตามขั้นตอนต่อไปนี้เพื่อสร้างรหัสไคลเอ็นต์และรหัสลับ OAuth 2.0 สำหรับเครื่องมือ MCP เพื่อเข้าถึงทรัพยากร Google Cloud

ในคอนโซล Google Cloud ให้ไปที่ Google Auth Platform > ไคลเอ็นต์ > สร้างไคลเอ็นต์
ในรายการประเภทแอปพลิเคชัน ให้เลือกประเภทที่เหมาะสมสำหรับแอปพลิเคชัน AI ของคุณ
- สำหรับ Antigravity, Claude.ai, Claude Code และ ChatGPT ให้เลือกเว็บแอปพลิเคชัน
- สำหรับ Gemini CLI และ VS Code ให้เลือกแอปเดสก์ท็อป
ในช่องชื่อ ให้ป้อนชื่อแอปพลิเคชัน (เช่น Antigravity)
ในส่วน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต ให้คลิก + เพิ่ม URI แล้วเพิ่ม URI การเปลี่ยนเส้นทางที่จำเป็นสำหรับแอปพลิเคชัน AI
- Antigravity: https://antigravity.google/oauth-callback
- เครื่องมือ AI อื่นๆ: ดูการตั้งค่าไคลเอ็นต์ OAuth
คลิกสร้าง เมื่อสร้างแล้ว ให้ไปที่รายละเอียดลูกค้า คัดลอกรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ แล้วจัดเก็บอย่างปลอดภัย
ในคอนโซล Google Cloud ให้ไปที่ Google Auth Platform > Audience คลิกเผยแพร่แอป แล้วคลิกยืนยันเพื่อเปลี่ยนสถานะการเผยแพร่เป็นในเวอร์ชันที่ใช้งานจริง

3. กำหนดค่าเซิร์ฟเวอร์ MCP

กำหนดค่าแอปพลิเคชัน AI

จากนั้นคุณต้องระบุรายละเอียดการกำหนดค่าเซิร์ฟเวอร์ให้กับแอปพลิเคชัน AI

Antigravity 2.0

วิธีกำหนดค่า Antigravity 2.0

ไปที่การตั้งค่า > การปรับแต่ง แล้วคลิกเปิดการกำหนดค่า MCP ใต้เซิร์ฟเวอร์ MCP ที่ติดตั้งเพื่อเปิดไฟล์การกำหนดค่า Antigravity (เช่น ~/.gemini/antigravity/mcp_config.json)
เพิ่มหรืออัปเดตรายการ google-pay-wallet-dev ใน mcpServers ด้วยรหัสไคลเอ็นต์และรหัสลับ OAuth (แทนที่ ANTIGRAVITY_CLIENT_ID และ ANTIGRAVITY_CLIENT_SECRET ด้วยรหัสไคลเอ็นต์และรหัสลับ OAuth 2.0 ที่สร้างขึ้น)
```
{
  "mcpServers": {
    "google-pay-wallet-dev": {
      "serverUrl": "https://paydeveloper.googleapis.com/mcp",
      "oauth": {
        "clientId": "ANTIGRAVITY_CLIENT_ID",
        "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
      }
    }
  }
}
```
ไปที่การตั้งค่า > การปรับแต่ง แล้วคลิกรีเฟรชในส่วนเซิร์ฟเวอร์ MCP ที่ติดตั้ง
คลิกตรวจสอบสิทธิ์และทำโฟลว์ OAuth ให้เสร็จสมบูรณ์
- หากได้รับข้อความแจ้งว่า Google ยังไม่ได้ยืนยันแอปนี้ ให้คลิกขั้นสูง แล้วคลิกไปที่ antigravity.google (ไม่ปลอดภัย) เพื่อดำเนินการต่อ คำเตือนนี้แสดงขึ้นเนื่องจากไคลเอ็นต์ OAuth ของคุณยังไม่ได้รับการยืนยัน คุณดำเนินการต่อได้อย่างปลอดภัยในระหว่างการพัฒนา
- เลือกขอบเขตที่จำเป็น (ดู แก้ไข และลบการผสานรวม Google Pay API) แล้วคลิกดำเนินการต่อเพื่อให้สิทธิ์เข้าถึง Antigravity
คัดลอกรหัสการให้สิทธิ์และส่งรหัสในหน้าต่างรหัสการให้สิทธิ์

Antigravity IDE

วิธีกำหนดค่า Antigravity IDE

ใน Antigravity IDE ให้คลิกเมนูตัวเลือกเพิ่มเติมในแผง Agent > เซิร์ฟเวอร์ MCP > จัดการเซิร์ฟเวอร์ MCP
ที่ด้านบนของแผง "จัดการเซิร์ฟเวอร์ MCP" ให้คลิกดูการกำหนดค่าดิบเพื่อแก้ไขไฟล์ mcp_config.json (แทนที่ ANTIGRAVITY_CLIENT_ID และ ANTIGRAVITY_CLIENT_SECRET ด้วยรหัสไคลเอ็นต์และรหัสลับ OAuth 2.0 ที่สร้างขึ้น)
```
{
  "mcpServers": {
    "google-pay-wallet-dev": {
      "serverUrl": "https://paydeveloper.googleapis.com/mcp",
      "oauth": {
        "clientId": "ANTIGRAVITY_CLIENT_ID",
        "clientSecret": "ANTIGRAVITY_CLIENT_SECRET"
      }
    }
  }
}
```
กลับไปที่จัดการเซิร์ฟเวอร์ MCP แล้วคลิกรีเฟรช การคลิกตรวจสอบสิทธิ์จะเปิดแท็บการปรับแต่งในการตั้งค่าตัวแทน
คลิกตรวจสอบสิทธิ์และทำโฟลว์ OAuth ให้เสร็จสมบูรณ์
- หากได้รับข้อความแจ้งว่า Google ยังไม่ได้ยืนยันแอปนี้ ให้คลิกขั้นสูง แล้วคลิกไปที่ antigravity.google (ไม่ปลอดภัย) เพื่อดำเนินการต่อ คำเตือนนี้แสดงขึ้นเนื่องจากไคลเอ็นต์ OAuth ของคุณยังไม่ได้รับการยืนยัน คุณดำเนินการต่อได้อย่างปลอดภัยในระหว่างการพัฒนา
- เลือกขอบเขตที่จำเป็น (ดู แก้ไข และลบการผสานรวม Google Pay API) แล้วคลิกดำเนินการต่อเพื่อให้สิทธิ์เข้าถึง Antigravity
คัดลอกรหัสการให้สิทธิ์และส่งรหัสในหน้าต่างรหัสการให้สิทธิ์

เครื่องมือ AI อื่นๆ

หากต้องการกำหนดค่าเครื่องมือ AI อื่นๆ โปรดดูคู่มือการกำหนดค่าแอปพลิเคชัน AI

4. วางโครงสร้างการผสานรวม Google Pay ใหม่ในการชำระเงิน

การพัฒนาซอฟต์แวร์แบบเดิมมักต้องดูข้อกำหนดเฉพาะของ API ที่ครอบคลุม คัดลอกโค้ดมาตรฐาน และเชื่อมต่อพารามิเตอร์ ในทางตรงกันข้าม เมื่อกำหนดค่าเซิร์ฟเวอร์ MCP ของ Google Pay ใน Antigravity แล้ว คุณจะแจ้งให้ LLM สร้างประสบการณ์การชำระเงินที่พร้อมใช้งานจริงได้

แจ้ง 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.

อนุญาตให้ 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.
```
การตรวจสอบรหัสผู้ขาย: หากต้องการสลับระหว่างการกำหนดค่าผู้ขาย TEST กับ PRODUCTION ให้ใช้พรอมต์ต่อไปนี้
```
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. เพิ่มประสิทธิภาพ UX สำหรับค่าธรรมเนียมเพิ่มเติมแบบไดนามิก

บางครั้งผู้ขายและ PSP จำเป็นต้องคำนวณค่าธรรมเนียมเพิ่มเติม ส่วนลด หรือราคาแบบไดนามิกตามประเภทบัตรพื้นฐาน เช่น การเรียกเก็บค่าธรรมเนียมเพิ่มเติม 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 ดึงข้อกำหนดทางเทคนิคที่แน่นอนเพื่ออัปเดตการติดตั้งใช้งานการคำนวณราคา สังเกตหน้าทดสอบเพื่อยืนยันและตรวจสอบการเปลี่ยนแปลง UI ของค่าธรรมเนียมเพิ่มเติมในหน้าจอการยืนยัน
หน้าจอคำสั่งซื้อสุดท้ายของการกำหนดราคาแบบไดนามิกและค่าธรรมเนียมเพิ่มเติม

หน้าจอคำสั่งซื้อสุดท้ายของการกำหนดราคาแบบไดนามิกและค่าธรรมเนียมเพิ่มเติม

ด้านล่างนี้คือโค้ด 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 ของเราช่วยเพิ่มระดับการมองเห็นประเภทธุรกรรม รายละเอียดการเรียกเก็บเงิน และการชำระเงินอย่างต่อเนื่องที่ราบรื่น

การใช้การพัฒนาที่ขับเคลื่อนด้วยข้อกำหนด

แทนที่จะปล่อยให้ LLM ค้นหาอย่างอิสระทั่วทั้งเว็บ ซึ่งเสี่ยงต่อการใช้ข้อกำหนดทางเทคนิคที่ไม่ถูกต้อง คุณสั่งให้ LLM ใช้เครื่องมือ 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 UI ของเพย์ชีตที่เกิดซ้ำของ Google Pay MIT

UI ของเพย์ชีตที่เกิดซ้ำของ Google Pay MIT

การแก้ปัญหา

หากได้รับข้อผิดพลาดต่อไปนี้

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

คุณสามารถคัดลอกข้อผิดพลาดลงในเซสชันแชท Antigravity ที่ใช้งานอยู่เพื่อแก้ไขข้อผิดพลาดโดยอัตโนมัติโดยใช้เครื่องมือ MCP search_documentation

7. [ไม่บังคับ] ปกป้อง Conversion ด้วยการตรวจสอบแบบเอเจนต์ในระยะยาว

สมมติว่าทีมผู้นำเพิ่งมอบวัตถุประสงค์ที่สำคัญให้คุณ นั่นคือ เพิ่มอัตรา Conversion การชำระเงินโดยรวม X% ในปีนี้ การบรรลุและรักษา Conversion การชำระเงินให้สูงไม่ได้ขึ้นอยู่กับการผสานรวมครั้งแรกเท่านั้น แต่ต้องมีการตรวจสอบธุรกรรมอย่างต่อเนื่อง ตรวจหาข้อผิดพลาดของ API ในทันที และใช้การเพิ่มประสิทธิภาพที่อิงตามข้อมูลอย่างเชิงรุก

คุณสามารถมอบหมายการตรวจสอบอย่างต่อเนื่องและการเพิ่มประสิทธิภาพ Conversion ให้กับตัวแทนแทนที่จะตรวจสอบปัญหาการชำระเงินด้วยตนเอง ในแบบฝึกหัดนี้ เราจะมาดูวิธีกำหนดการตรวจสอบและการเพิ่มประสิทธิภาพ Conversion เป็นทักษะของเอเจนต์ 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. [ไม่บังคับ] ปรับปรุง Conversion ด้วยการชำระเงินของผู้เข้าชมแบบด่วนด้วย GPay

ขั้นตอนการชำระเงินแบบหลายขั้นตอนแบบเดิมมักกำหนดให้ผู้ใช้ป้อนข้อมูลการจัดส่งและการเรียกเก็บเงินที่ยาวด้วยตนเอง หรือแม้กระทั่งสร้างบัญชี ซึ่งทำให้เกิดอุปสรรคและทำให้ผู้ใช้เลิกทำกลางคันใน Funnel Conversion การติดตั้งใช้งานการชำระเงินของผู้ใช้ที่ไม่ลงทะเบียนโดยตรงในหน้าข้อมูลผลิตภัณฑ์ด้วย 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

⚠️ ข้อควรระวัง: การลบโปรเจ็กต์ Google Cloud นี้จะทำลายทรัพยากรทั้งหมดภายในโปรเจ็กต์อย่างถาวร ซึ่งรวมถึงงานใดๆ ที่ไม่เกี่ยวข้องกับ Codelab นี้ นอกจากนี้ คุณจะใช้รหัสโปรเจ็กต์ที่กำหนดเองนี้ซ้ำในอนาคตไม่ได้ หากต้องการเก็บรหัสไว้ ให้ลบเฉพาะทรัพยากรที่สร้างขึ้นในระหว่างแล็บนี้แทนที่จะลบทั้งโปรเจ็กต์

เราขอแนะนำให้คุณลบโปรเจ็กต์ Google Cloud เพื่อหลีกเลี่ยงการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ใน Codelab นี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

10. บทสรุป

คุณได้เข้าร่วมเวิร์กช็อป Google Pay API: หน้าชำระเงิน Vibe-code ที่มีเซิร์ฟเวอร์ MCP และ Antigravity จนจบแล้ว

คุณได้เรียนรู้วิธีเชื่อมต่อเซิร์ฟเวอร์ MCP ของ Google Pay กับเครื่องมือที่สร้างขึ้นโดยใช้ AI, การผสานรวมการชำระเงินที่สะอาดโดยใช้ Context Engineering, การติดตั้งใช้งานเวิร์กโฟลว์การสมัครใช้บริการและการกำหนดราคาแบบไดนามิกโดยใช้ Spec-Driven Development และการติดตั้งใช้งานไปป์ไลน์การตรวจสอบที่ขับเคลื่อนด้วย LLM แบบอัตโนมัติ ตอนนี้คุณพร้อมที่จะใช้รหัสไวบ์เพื่อสร้างฟรอนต์เอนด์ของผู้ใช้ในขั้นตอนชำระเงินที่พร้อมรับอนาคตและเวิร์กโฟลว์การตรวจสอบที่ขับเคลื่อนด้วย AI แล้ว

แหล่งข้อมูลเพิ่มเติม

เข้าร่วมช่อง#google-dev-community ใน Discord
ติดตาม @GooglePayDevs บน X

Google Pay API: Vibe-code หน้าชำระเงินด้วยเซิร์ฟเวอร์ MCP และ Antigravity

1. ภาพรวม

สิ่งที่คุณจะได้เรียนรู้

2. การตั้งค่าและข้อกำหนด

ก่อนเริ่มต้น

บทบาทที่จำเป็น

การตรวจสอบสิทธิ์และการให้สิทธิ์

3. กำหนดค่าเซิร์ฟเวอร์ MCP

กำหนดค่าแอปพลิเคชัน AI

Antigravity 2.0

Antigravity IDE

เครื่องมือ AI อื่นๆ

4. วางโครงสร้างการผสานรวม Google Pay ใหม่ในการชำระเงิน

การแก้ปัญหา

5. เพิ่มประสิทธิภาพ UX สำหรับค่าธรรมเนียมเพิ่มเติมแบบไดนามิก

ทำความเข้าใจcardFundingSourceรายละเอียดเล็กๆ น้อยๆ

การพัฒนาที่อิงตามข้อกำหนดสำหรับการกำหนดราคาแบบไดนามิก

6. [ไม่บังคับ] เพิ่มอัตราการชำระเงินที่สำเร็จสำหรับการเรียกเก็บเงินตามรอบ

การใช้การพัฒนาที่ขับเคลื่อนด้วยข้อกำหนด

การแก้ปัญหา

7. [ไม่บังคับ] ปกป้อง Conversion ด้วยการตรวจสอบแบบเอเจนต์ในระยะยาว

สร้างทักษะของเอเจนต์ Antigravity และเรียกใช้เป็นงานระยะยาว

8. [ไม่บังคับ] ปรับปรุง Conversion ด้วยการชำระเงินของผู้เข้าชมแบบด่วนด้วย GPay

การพัฒนาที่อิงตามข้อกำหนดสำหรับการชำระเงินโดยไม่ลงชื่อเข้าใช้

9. ล้างข้อมูล

ลบโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google

10. บทสรุป

แหล่งข้อมูลเพิ่มเติม

ทำความเข้าใจ`cardFundingSource`รายละเอียดเล็กๆ น้อยๆ