গুগল পে এপিআই: এমসিপি সার্ভার এবং অ্যান্টিগ্র্যাভিটি সহ ভাইব-কোড চেকআউট পেজ

১. সংক্ষিপ্ত বিবরণ

আধুনিক সফটওয়্যার ডেভেলপমেন্ট দ্রুত ইম্পারেটিভ প্রোগ্রামিং থেকে এআই-নেটিভ ডেভেলপমেন্টের দিকে সরে যাচ্ছে। এই কোডল্যাবে, আপনি Google Pay & Wallet Developer MCP সার্ভার (এরপরে Google Pay MCP সার্ভার হিসাবে উল্লেখিত) এবং অ্যান্টিগ্র্যাভিটি নামক একটি এআই-নেটিভ টুল ব্যবহার করে Google Pay ইন্টিগ্রেশন তৈরি ও উন্নত করতে শিখবেন।

মডেল কনটেক্সট প্রোটোকল (MCP) একটি উন্মুক্ত স্ট্যান্ডার্ড যা এআই মডেলগুলোকে নিরাপদে বাহ্যিক টুল, লাইভ ডকুমেন্টেশন এবং রিমোট এপিআই এন্ডপয়েন্ট অ্যাক্সেস করতে সক্ষম করে। অ্যান্টিগ্র্যাভিটিতে একটি এআই-নেটিভ ওয়ার্কফ্লোর মাধ্যমে, আপনি গুগল পে এমসিপি সার্ভারের সাথে যোগাযোগের জন্য আপনার পরিবেশ সেট আপ করবেন এবং একেবারে শুরু থেকে একটি চেকআউট পেজের জন্য দ্রুত একটি প্রোডাকশন-রেডি গুগল পে বাটন তৈরি করবেন।

পরবর্তীতে, আপনি নতুন এপিআই ফিচারগুলোর সাথে আপনার ইন্টিগ্রেশন উন্নত করতে স্পেক-ড্রাইভেন ডেভেলপমেন্ট পদ্ধতি ব্যবহার করবেন—বিশেষত পুনরাবৃত্ত পেমেন্টের জন্য মার্চেন্ট ইনিশিয়েটেড ট্রানজ্যাকশনস (MIT) সক্রিয় করবেন এবং ডাইনামিক রাউটিং ও প্রাইসিংয়ের জন্য cardFundingSource সিগন্যাল ব্যবহার করবেন। সবশেষে, আপনি রাতারাতি চেকআউটের সমস্যাগুলো পর্যবেক্ষণ ও সমাধান করার জন্য একটি স্বয়ংক্রিয় এলএলএম-চালিত মনিটরিং পাইপলাইন কনফিগার করবেন।

আপনি যা শিখবেন

• কীভাবে গুগল পে এমসিপি সার্ভারকে অ্যান্টিগ্র্যাভিটি বা অন্যান্য এআই টুলের সাথে সেট আপ এবং সংযুক্ত করবেন
• ডকুমেন্টেশন কোয়েরি করতে গুগল পে এমসিপি সার্ভার কীভাবে ব্যবহার করবেন
• অ্যান্টিগ্র্যাভিটিতে সরাসরি একটি সেরা মানের গুগল পে চেকআউট ইন্টিগ্রেশন কীভাবে তৈরি করবেন
• স্পেক-ড্রাইভেন ডেভেলপমেন্টের মাধ্যমে কীভাবে ডাইনামিক রাউটিং এবং প্রাইসিং বাস্তবায়ন করা যায়
• স্পেক-চালিত উন্নয়নের মাধ্যমে পুনরাবৃত্ত সাবস্ক্রিপশন ব্যবহারের ক্ষেত্রগুলিকে কীভাবে উন্নত করা যায়
• অ্যান্টিগ্র্যাভিটি ব্যবহার করে কীভাবে দীর্ঘমেয়াদী পর্যবেক্ষণ এবং স্বয়ংক্রিয় এজেন্টিক পাইপলাইন স্থাপন করা যায়
• কনভার্সন ফানেল অপ্টিমাইজ করতে কীভাবে এক্সপ্রেস গেস্ট চেকআউট প্রয়োগ করবেন

২. সেটআপ এবং প্রয়োজনীয়তা

শুরু করার আগে

Google Pay MCP সার্ভার ব্যবহার করার জন্য, আপনাকে একটি Google Cloud প্রজেক্ট তৈরি করতে হবে এবং Google Pay & Wallet Developer API সক্রিয় করতে হবে।

⚠️ সতর্কতা : এই ল্যাবটি বিলযোগ্য ক্লাউড রিসোর্স ব্যবহার করে। চলমান চার্জ এড়াতে, ল্যাবের শেষে পরিষ্করণ ধাপগুলো অনুসরণ করুন। নতুন ব্যবহারকারীরা ৩০০ মার্কিন ডলারের ফ্রি ট্রায়ালের জন্য যোগ্য।

1. আপনার ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
   প্রজেক্ট সিলেক্টরে যান
2. Google Pay ও Wallet ডেভেলপার API সক্রিয় করুন।
   এপিআই সক্রিয় করুন
   • এপিআই (API) সক্রিয় করতে আপনার সার্ভিস ইউসেজ অ্যাডমিন (Service Usage Admin) আইএএম (IAM) রোল ( roles/serviceusage.serviceUsageAdmin ) প্রয়োজন, যেটিতে serviceusage.services.enable পারমিশনটি রয়েছে। কীভাবে রোল প্রদান করতে হয় তা জানুন ।
   

প্রয়োজনীয় ভূমিকা

Google Pay MCP সার্ভার ব্যবহারের জন্য প্রয়োজনীয় অনুমতি পেতে, আপনার অ্যাডমিনিস্ট্রেটরকে Google Cloud প্রজেক্টে নিম্নলিখিত IAM রোলগুলি মঞ্জুর করার জন্য অনুরোধ করুন:

• এমসিপি টুল কল করুন: এমসিপি টুল ব্যবহারকারী ( roles/mcp.toolUser )

আরও তথ্যের জন্য, ‘প্রকল্পগুলিতে অ্যাক্সেস পরিচালনা’ দেখুন।

প্রমাণীকরণ এবং অনুমোদন

গুগল পে এমসিপি সার্ভার প্রমাণীকরণ এবং অনুমোদনের জন্য আইএএম সহ ওঅথ ২.০ প্রোটোকল ব্যবহার করে।

আপনার MCP টুলগুলির Google Cloud রিসোর্স অ্যাক্সেস করার জন্য একটি OAuth 2.0 ক্লায়েন্ট আইডি এবং সিক্রেট তৈরি করতে এই ধাপগুলি অনুসরণ করুন:

1. Google Cloud কনসোলে, Google Auth Platform > Clients > Create client- এ যান।
   ক্লায়েন্ট তৈরি করতে যান
2. অ্যাপ্লিকেশন টাইপ তালিকা থেকে আপনার এআই অ্যাপ্লিকেশনের জন্য উপযুক্ত টাইপটি নির্বাচন করুন:
   • Antigravity , Claude.ai , Claude Code , এবং ChatGPT- এর জন্য, ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।
   • Gemini CLI এবং VS Code- এর জন্য ডেস্কটপ অ্যাপ নির্বাচন করুন।
3. Name ফিল্ডে আপনার অ্যাপ্লিকেশনের জন্য একটি নাম লিখুন (উদাহরণস্বরূপ, Antigravity )।
4. অনুমোদিত রিডাইরেক্ট ইউআরআই (Authorized redirect URIs) বিভাগে, + ইউআরআই যোগ করুন (+ Add URI) এ ক্লিক করুন, এবং তারপরে আপনার এআই অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় রিডাইরেক্ট ইউআরআই যোগ করুন:
   • অ্যান্টিগ্রাভিটি : https://antigravity.google/oauth-callback
   • অন্যান্য এআই টুল : OAuth ক্লায়েন্ট সেটআপ দেখুন।
5. Create-এ ক্লিক করুন। তৈরি হয়ে গেলে, ক্লায়েন্টের বিবরণে যান। ক্লায়েন্ট আইডি এবং ক্লায়েন্ট সিক্রেট কপি করে নিরাপদে সংরক্ষণ করুন।
6. Google Cloud কনসোলে, Google Auth Platform > Audience- এ যান, Publish app-এ ক্লিক করুন, এবং তারপর Publishing status-কে In production- এ পরিবর্তন করতে Confirm- এ ক্লিক করুন।
   দর্শকের কাছে যান
   
   

৩. এমসিপি সার্ভারগুলি কনফিগার করুন

আপনার এআই অ্যাপ্লিকেশন কনফিগার করুন

এরপরে, আপনাকে আপনার এআই অ্যাপ্লিকেশনকে সার্ভার কনফিগারেশনের বিবরণ প্রদান করতে হবে।

অ্যান্টিগ্র্যাভিটি ২.০

অ্যান্টিগ্র্যাভিটি ২.০ কনফিগার করতে:

1. সেটিংস > কাস্টমাইজেশন- এ যান এবং ইনস্টলড এমসিপি সার্ভারস-এর অধীনে, অ্যান্টিগ্র্যাভিটি কনফিগারেশন ফাইলটি (উদাহরণ: ~/.gemini/antigravity/mcp_config.json ) খোলার জন্য ওপেন এমসিপি কনফিগ-এ ক্লিক করুন।
2. আপনার OAuth ক্লায়েন্ট আইডি এবং সিক্রেট দিয়ে mcpServers এ থাকা google-pay-wallet-dev এন্ট্রিটি যোগ বা আপডেট করুন ( 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. Authenticate-এ ক্লিক করুন এবং OAuth প্রক্রিয়াটি সম্পূর্ণ করুন:
   • যদি "Google hasn’t verified this app" লেখাটি আসে, তাহলে "Advanced"- এ ক্লিক করুন এবং তারপরে এগিয়ে যাওয়ার জন্য "Go to antigravity.google (unsafe)"-এ ক্লিক করুন। এই সতর্কতাটি দেখানো হয় কারণ আপনার OAuth ক্লায়েন্টটি যাচাই করা হয়নি। ডেভেলপমেন্ট পর্যায়ে এগিয়ে যাওয়া নিরাপদ।
     
     
   • প্রয়োজনীয় পরিধিগুলো নির্বাচন করুন ( আপনার Google Pay API ইন্টিগ্রেশনগুলো দেখুন, সম্পাদনা করুন এবং মুছে ফেলুন ), এবং তারপরে Antigravity-কে অ্যাক্সেস দেওয়ার জন্য 'চালিয়ে যান'-এ ক্লিক করুন।
     
5. অনুমোদন কোডটি কপি করুন এবং অনুমোদন কোড উইন্ডোতে কোডটি জমা দিন।
   

অ্যান্টিগ্র্যাভিটি আইডিই

Antigravity IDE কনফিগার করতে:

1. Antigravity IDE-তে, Agent প্যানে থাকা Additional options মেনুতে ক্লিক করুন > MCP Servers > Manage MCP Servers ।
2. Manage MCP Servers পেনের শীর্ষে, mcp_config.json ফাইলটি সম্পাদনা করতে View raw config-এ ক্লিক করুন ( 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. Authenticate-এ ক্লিক করুন এবং OAuth প্রক্রিয়াটি সম্পূর্ণ করুন:
   • যদি "Google hasn’t verified this app" লেখাটি আসে, তাহলে "Advanced"- এ ক্লিক করুন এবং তারপরে এগিয়ে যাওয়ার জন্য "Go to antigravity.google (unsafe)"-এ ক্লিক করুন। এই সতর্কতাটি দেখানো হয় কারণ আপনার OAuth ক্লায়েন্টটি যাচাই করা হয়নি। ডেভেলপমেন্ট পর্যায়ে এগিয়ে যাওয়া নিরাপদ।
     
     
   • প্রয়োজনীয় পরিধিগুলো নির্বাচন করুন ( আপনার Google Pay API ইন্টিগ্রেশনগুলো দেখুন, সম্পাদনা করুন এবং মুছে ফেলুন ), এবং তারপরে Antigravity-কে অ্যাক্সেস দেওয়ার জন্য 'চালিয়ে যান'-এ ক্লিক করুন।
     
5. অনুমোদন কোডটি কপি করুন এবং অনুমোদন কোড উইন্ডোতে কোডটি জমা দিন।
   

অন্যান্য এআই সরঞ্জাম

অন্যান্য এআই টুল কনফিগার করতে, আপনার এআই অ্যাপ্লিকেশন কনফিগার করার নির্দেশিকা দেখুন।

৪. চেকআউটে নতুন গুগল পে ইন্টিগ্রেশনগুলোকে ধাপে ধাপে অন্তর্ভুক্ত করুন।

প্রচলিত সফটওয়্যার ডেভেলপমেন্টে প্রায়শই বিস্তৃত এপিআই স্পেসিফিকেশন বোঝা, বয়লারপ্লেট কোড কপি করা এবং প্যারামিটার সংযুক্ত করার প্রয়োজন হয়। এর বিপরীতে, অ্যান্টিগ্র্যাভিটিতে গুগল পে এমসিপি সার্ভার কনফিগার করা থাকলে, আপনি আপনার এলএলএম-কে একটি প্রোডাকশন-রেডি চেকআউট অভিজ্ঞতা স্কাফোল্ড করার জন্য নির্দেশ দিতে পারেন।

1. অ্যান্টিগ্র্যাভিটিকে স্ক্যাফোল্ড চেকআউট করতে নির্দেশ দিন: একটি সক্রিয় অ্যান্টিগ্র্যাভিটি চ্যাট সেশন খুলুন (যেখানে 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.
   

2. এলএলএম-কে এমসিপি টুলসের সাথে সংযুক্ত হতে দিন: এলএলএম loadPaymentData অনুরোধের মতো কোয়েরি ব্যবহার করে search_documentation সম্পাদন করে। গুগল পে এমসিপি সার্ভার তার RAG ভেক্টর এমবেডিংগুলো কোয়েরি করে এবং গুগল পে-র জন্য প্রয়োজনীয় সঠিক JSON স্কিমাটি ফেরত দেয়।
3. কার্য সম্পাদন এবং কোড জেনারেশন পর্যবেক্ষণ করুন: অ্যান্টিগ্র্যাভিটি আপনার প্রম্পটগুলোকে এমসিপি টুলসের আউটপুটের সাথে একত্রিত করে একটি প্রাথমিক ডিজাইন তৈরি করে, যা আপনি পর্যালোচনা করে পরিবর্তনের জন্য মন্তব্য যোগ করতে বা অনুমোদন করতে পারেন।
   
   নিচের ছবিতে তৈরি করা ডেমোটি দেখানো হয়েছে। উল্লেখ্য যে, আপনার 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 স্টেপ-আপ সিগন্যাল পরীক্ষা করা: 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.
  

৫. ডাইনামিক সারচার্জের জন্য ইউএক্স অপ্টিমাইজ করুন

মার্চেন্ট এবং পিএসপি-দের কখনও কখনও কার্ডের ধরনের ওপর ভিত্তি করে সারচার্জ ফি, ডিসকাউন্ট বা ডাইনামিক প্রাইসিং গণনা করার প্রয়োজন হয়। উদাহরণস্বরূপ, ক্রেডিট কার্ডের জন্য ০.৫% সারচার্জের পরিবর্তে ডেবিট/প্রিপেইড কার্ডের জন্য ০.১% অতিরিক্ত ফি প্রয়োগ করা। গুগল পে cardFundingSource এর মাধ্যমে এই গুরুত্বপূর্ণ সংকেতটি প্রদান করে।

cardFundingSource সূক্ষ্ম বিষয়গুলো বোঝা

ডাইনামিক প্রাইসিং প্রয়োগ করার আগে, বিভিন্ন পরিবেশে এই সিগন্যালটি কীভাবে আচরণ করে তা বোঝা অপরিহার্য:

• পরীক্ষার পরিবেশ : লক্ষ্য করুন যে, TEST মোডে Google Pay-এর পে-শিটে সর্বদা মোট মূল্য প্রদর্শিত হয়। মার্চেন্টদের অবশ্যই রেসপন্স থেকে প্রাপ্ত সিগন্যালটি গ্রহণ করতে হবে এবং পেমেন্ট অনুমোদনের আগে, এই উদাহরণে দেখানো অনুযায়ী, তাদের নিজস্ব অর্ডার কনফার্মেশন স্ক্রিনে চূড়ান্ত মূল্য (অতিরিক্ত ফি সহ) প্রদর্শন করতে হবে।
• প্রোডাকশন ডেপ্লয়মেন্ট: গুগল পে-এর পে-শিটে মোট মূল্য গোপন করার প্রয়োজন হলে, মার্চেন্ট আইডি অ্যালাওলিস্টিং-এর জন্য আপনার গুগল পয়েন্ট অফ কন্ট্যাক্টের সাথে যোগাযোগ করুন।

গতিশীল মূল্য নির্ধারণের জন্য স্পেক-চালিত উন্নয়ন

1. ডেভেলপার ডকুমেন্টেশন দেখতে MCP টুল ব্যবহার করুন: আপনার সক্রিয় Antigravity চ্যাট সেশনে, SDD ব্যবহার করে LLM-কে প্রম্পট করুন:

   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 এবং CSS ফাইলগুলো পরিবর্তন করার পর, টেস্টিং পেজে আপডেটগুলো প্রতিফলিত হয়েছে কিনা তা নিশ্চিত করতে Ctrl+Shift+R অথবা Cmd+Shift+R কমান্ড ব্যবহার করে আপনার ব্রাউজারটি হার্ড-রিলোড করতে ভুলবেন না।

2. LLM-এর বাস্তবায়ন যাচাই করুন: MCP ব্যবহার করে সরাসরি ডকুমেন্টেশন কোয়েরি করার মাধ্যমে, LLM মূল্য গণনার বাস্তবায়ন আপডেট করার জন্য সঠিক টেকনিক্যাল স্পেসিফিকেশন সংগ্রহ করে। আপনার কনফার্মেশন স্ক্রিনে সারচার্জ UI-এর পরিবর্তনগুলো যাচাই ও পর্যালোচনা করতে টেস্ট পেজটি পর্যবেক্ষণ করুন:
   
   
   নিম্নে এলএলএম দ্বারা তৈরি উন্নত জাভাস্ক্রিপ্ট কোডটি দেওয়া হলো:

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

৬. [ঐচ্ছিক] পুনরাবৃত্ত পেমেন্টের সফলতার হার বৃদ্ধি করুন

ℹ️ দ্রষ্টব্য : এই বিভাগে দেখানো হয়েছে কিভাবে সাবস্ক্রিপশন মডেলের জন্য মার্চেন্ট ইনিশিয়েটেড ট্রানজ্যাকশন (MIT) প্রয়োগ করতে হয়। আপনার ইন্টিগ্রেশনে যদি পুনরাবৃত্ত পেমেন্টের প্রয়োজন হয়, তবে আপনি এই ঐচ্ছিক অনুশীলনটি এখনই বা পরেও সম্পন্ন করতে পারেন।

আপনার ব্যবসা যদি সাবস্ক্রিপশন, পুনরাবৃত্ত ইউটিলিটি বিলিং বা মেম্বারশিপ মডেলে পরিচালিত হয়, তাহলে প্রতিটি বিলিং সাইকেলে ব্যবহারকারীকে পুনরায় প্রমাণীকরণের প্রয়োজন ছাড়াই পেমেন্ট প্রক্রিয়া করার প্রয়োজন হতে পারে। এই ধরনের পুনরাবৃত্ত পেমেন্টের জন্য, আমাদের MIT স্পেসিফিকেশন ট্রানজ্যাকশন টাইপ, বিলিং বিবরণ এবং নির্বিঘ্ন পেমেন্ট ধারাবাহিকতার ক্ষেত্রে উন্নত ভিজিবিলিটি প্রদান করে।

স্পেক-চালিত উন্নয়ন প্রয়োগ করা

এলএলএম-কে ওয়েবে যথেচ্ছভাবে খোঁজাখুঁজি করতে দেওয়ার পরিবর্তে—যাতে ভুল টেকনিক্যাল স্পেসিফিকেশন ব্যবহারের ঝুঁকি থাকে—আপনি আপনার এলএলএম-কে গুগল পে এমসিপি সার্ভারের search_documentation টুলটি ব্যবহার করার নির্দেশ দিন।

1. স্পেক পুনরুদ্ধারের জন্য অনুরোধ: আপনার সক্রিয় অ্যান্টিগ্র্যাভিটি চ্যাট সেশনে, এলএলএম-কে অনুরোধ করুন:

   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 এবং CSS ফাইলগুলো পরিবর্তন করার পর, টেস্টিং পেজে আপডেটগুলো প্রতিফলিত হয়েছে কিনা তা নিশ্চিত করতে Ctrl+Shift+R অথবা Cmd+Shift+R কমান্ড ব্যবহার করে আপনার ব্রাউজারটি হার্ড-রিলোড করতে ভুলবেন না।

2. উন্নত কোড বাস্তবায়নটি পর্যালোচনা করুন: LLM, স্পেক-ভ্যালিডেটেড MIT প্যারামিটার ব্যবহার করে 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 চ্যাট সেশনে কপি করে MCP টুল search_documentation ব্যবহার করে স্বয়ংক্রিয়ভাবে ত্রুটিটি সমাধান করতে পারেন।

৭. [ঐচ্ছিক] দীর্ঘমেয়াদী এজেন্টিক পর্যবেক্ষণের মাধ্যমে রূপান্তর সুরক্ষিত করুন

ℹ️ দ্রষ্টব্য : এই বিভাগে দেখানো হয়েছে কিভাবে আপনার Google Pay ইন্টিগ্রেশনকে ক্রমাগত নিরীক্ষণ করতে Antigravity এজেন্ট ব্যবহার করতে হয়। আপনি এই ঐচ্ছিক অনুশীলনটি এখনই বা পরেও সম্পন্ন করতে পারেন, যদি আপনার ইন্টিগ্রেশনের জন্য এজেন্টভিত্তিক নিরীক্ষণের প্রয়োজন হয়।

ধরুন, আপনার নেতৃত্বাধীন দলটি আপনাকে এইমাত্র একটি গুরুত্বপূর্ণ লক্ষ্য দিয়েছে: এই বছর সামগ্রিক পেমেন্ট কনভার্সন রেট X% বৃদ্ধি করা । উচ্চ চেকআউট কনভার্সন অর্জন এবং বজায় রাখা কেবল প্রাথমিক ইন্টিগ্রেশনের মধ্যেই সীমাবদ্ধ নয়—এর জন্য প্রয়োজন ক্রমাগত লেনদেন পর্যবেক্ষণ করা, তাৎক্ষণিকভাবে API ত্রুটি শনাক্ত করা এবং সক্রিয়ভাবে ডেটা-ভিত্তিক অপ্টিমাইজেশন বাস্তবায়ন করা।

পেমেন্ট সংক্রান্ত সমস্যাগুলো ম্যানুয়ালি পর্যবেক্ষণ করার পরিবর্তে, আপনি নিরবচ্ছিন্ন পর্যবেক্ষণ এবং কনভার্সন অপটিমাইজেশনের দায়িত্ব কোনো এজেন্টের ওপর অর্পণ করতে পারেন। এই অনুশীলনে, আমরা দেখব কীভাবে পর্যবেক্ষণ এবং কনভার্সন অপটিমাইজেশনকে একটি অ্যান্টিগ্র্যাভিটি এজেন্ট স্কিল হিসেবে সংজ্ঞায়িত করা যায় এবং এটিকে একটি লং-হরাইজন টাস্ক হিসেবে স্বয়ংক্রিয়ভাবে সম্পাদন করা যায়।

অ্যান্টিগ্র্যাভিটি এজেন্ট স্কিল তৈরি করুন এবং এটিকে দীর্ঘমেয়াদী টাস্ক হিসেবে চালান।

1. মনিটরিং এবং প্রতিকার দক্ষতা ( SKILL.md ) সংজ্ঞায়িত করুন: আপনার ওয়ার্কস্পেস রুটে ~/.agents/skills/gpay-monitor-fix/SKILL.md (অথবা ~/.gemini/skills/gpay-monitor-fix/SKILL.md ) নামে একটি স্ট্রাকচার্ড স্কিল প্লেবুক তৈরি করুন। Google Pay কনসোল থেকে আপনার মার্চেন্ট আইডি দিয়ে 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. অ্যান্টিগ্র্যাভিটিতে দীর্ঘমেয়াদী ব্যাকগ্রাউন্ড টাস্ক শিডিউল করুন: আপনার স্কিলটি সংজ্ঞায়িত হয়ে গেলে, একটি সক্রিয় অ্যান্টিগ্র্যাভিটি সেশনে, একটি অ্যান্টিগ্র্যাভিটি এজেন্ট কনফিগার করতে /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 কমান্ডটি প্রবেশ করাতে পারেন।
   
   বিকল্পভাবে, অনির্দিষ্টকালের জন্য একটি মনিটরিং এবং অপ্টিমাইজেশন এজেন্ট চালানোর জন্য, আপনি অ্যান্টিগ্র্যাভিটির লক্ষ্য-চালিত এক্সিকিউশন ট্রিগার করতে পারেন:

   /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. স্বয়ংক্রিয় অপ্টিমাইজেশনের ফলাফল পর্যালোচনা করুন: ধরে নিন আপনার মার্চেন্ট আইডির মাধ্যমে লাইভ প্রোডাকশন ট্র্যাফিক প্রবাহিত হচ্ছে, পরের দিন সকালে অফিসে পৌঁছালে আপনি একটি অপ্টিমাইজেশন রিপোর্ট দেখতে পাবেন। রিপোর্টটির একটি উদাহরণ নিচে দেওয়া হলো:
   
   

৮. [ঐচ্ছিক] GPay এক্সপ্রেস গেস্ট চেকআউটের মাধ্যমে কনভার্সন উন্নত করুন।

ℹ️ দ্রষ্টব্য : এই বিভাগে দেখানো হয়েছে কীভাবে কনভার্সন ফানেলের বাধা কমাতে সরাসরি প্রোডাক্ট ডিটেইলস পেজে এক্সপ্রেস গেস্ট চেকআউট প্রয়োগ করা যায়। আপনি এই ঐচ্ছিক অনুশীলনটি এখন বা পরে সম্পন্ন করতে পারেন।

প্রচলিত বহু-ধাপের চেকআউট পদ্ধতিতে প্রায়শই ব্যবহারকারীদের ম্যানুয়ালি দীর্ঘ শিপিং ও বিলিং তথ্য লিখতে হয়, এমনকি অ্যাকাউন্টও তৈরি করতে হয়, যা প্রক্রিয়াটিতে জটিলতা তৈরি করে এবং কনভার্সন ফানেল জুড়ে ব্যবহারকারীদের ঝরে পড়ার কারণ হয়। প্রোডাক্ট ডিটেইলস পেজেই সরাসরি গুগল পে ব্যবহার করে এক্সপ্রেস গেস্ট চেকআউট চালু করার মাধ্যমে, আপনি ব্যবহারকারীদের ন্যূনতম ক্লিকে চেকআউট করার সুযোগ দেন এবং তাদের গুগল অ্যাকাউন্ট থেকে আগে থেকে সংরক্ষিত ক্রেডেনশিয়ালগুলো নিরাপদে নিয়ে ম্যানুয়াল ফর্ম পূরণের প্রয়োজনীয়তা দূর করেন।

গেস্ট চেকআউটের জন্য স্পেক-চালিত উন্নয়ন

1. স্পেক পুনরুদ্ধার এবং গেস্ট চেকআউট বাস্তবায়নের জন্য অনুরোধ: আপনার সক্রিয় অ্যান্টিগ্র্যাভিটি চ্যাট সেশনে, এলএলএম-কে অনুরোধ করুন:

   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 এবং CSS ফাইলগুলো পরিবর্তন করার পর, টেস্টিং পেজে আপডেটগুলো প্রতিফলিত হয়েছে কিনা তা নিশ্চিত করতে Ctrl+Shift+R অথবা Cmd+Shift+R কমান্ড ব্যবহার করে আপনার ব্রাউজারটি হার্ড-রিলোড করতে ভুলবেন না।

2. উন্নত কোড বাস্তবায়ন পর্যালোচনা করুন: 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
     }
   });
   

3. এক্সপ্রেস গেস্ট চেকআউট পরীক্ষা করুন: টেস্ট পেজটি পর্যবেক্ষণ করে যাচাই করুন যে, প্রোডাক্ট ডিটেইলস পেজে থাকা গেস্ট চেকআউট বাটনটি ম্যানুয়াল এন্ট্রির প্রয়োজন ছাড়াই সমস্ত প্রয়োজনীয় অ্যাট্রিবিউট সংগ্রহ করছে।
   
   

৯. পরিষ্কার করুন

গুগল ক্লাউড প্রজেক্টটি মুছে ফেলুন

⚠️ সতর্কতা : এই গুগল ক্লাউড প্রজেক্টটি ডিলিট করলে এর ভেতরের সমস্ত রিসোর্স স্থায়ীভাবে মুছে যাবে, যার মধ্যে এই কোডল্যাবের সাথে সম্পর্কহীন যেকোনো কাজও অন্তর্ভুক্ত। এছাড়াও, আপনি ভবিষ্যতে এই কাস্টম প্রজেক্ট আইডিটি পুনরায় ব্যবহার করতে পারবেন না। আইডিটি ধরে রাখতে, পুরো প্রজেক্টটি ডিলিট না করে শুধুমাত্র এই ল্যাবের সময় তৈরি করা নির্দিষ্ট রিসোর্সগুলো ডিলিট করুন।

এই কোডল্যাবে ব্যবহৃত রিসোর্সগুলোর জন্য আপনার গুগল ক্লাউড অ্যাকাউন্টে কোনো চার্জ হওয়া এড়াতে, আমরা আপনাকে গুগল ক্লাউড প্রজেক্টটি ডিলিট করে দেওয়ার পরামর্শ দিচ্ছি।

gcloud projects delete $GOOGLE_CLOUD_PROJECT

১০. উপসংহার

আপনি Google Pay API: Vibe-code checkout page with MCP servers এবং Antigravity ওয়ার্কশপটি সম্পন্ন করেছেন!

আপনি শিখেছেন কীভাবে গুগল পে এমসিপি সার্ভারকে একটি এআই-নেটিভ টুলের সাথে সংযুক্ত করতে হয়, কনটেক্সট ইঞ্জিনিয়ারিং ব্যবহার করে পরিচ্ছন্ন চেকআউট ইন্টিগ্রেশন তৈরি করতে হয়, স্পেক-ড্রাইভেন ডেভেলপমেন্ট ব্যবহার করে সাবস্ক্রিপশন ও ডাইনামিক প্রাইসিং ওয়ার্কফ্লো বাস্তবায়ন করতে হয় এবং স্বায়ত্তশাসিত এলএলএম-চালিত মনিটরিং পাইপলাইন স্থাপন করতে হয়। আপনি এখন ভবিষ্যৎ-উপযোগী চেকআউট ইউজার ফ্রন্ট-এন্ড এবং এআই-চালিত মনিটরিং ওয়ার্কফ্লো ভাইব-কোড করার জন্য প্রস্তুত।

অতিরিক্ত সম্পদ

• ডিসকর্ডে #google-dev-community চ্যানেলে যোগ দিন
• X-এ @GooglePayDevs-কে অনুসরণ করুন