এমবেডেড চেকআউট

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

এমবেডেড চেকআউট কী?

এমবেডেড চেকআউট (EC) একটি হোস্টকে (যেমন Google Search অথবা AI এজেন্ট) তাদের অ্যাপ্লিকেশনের মধ্যে আপনার বিদ্যমান ওয়েব-ভিত্তিক চেকআউট প্রদর্শন করতে দেয় (একটি iframe অথবা webview ব্যবহার করে)। একটি স্ট্যান্ডার্ড ওয়েব রিডাইরেক্টের বিপরীতে, এটি দ্বি-মুখী যোগাযোগের সুযোগ করে দেয়। হোস্ট একটি দ্রুত, নেটিভ-অনুভূতি অভিজ্ঞতা প্রদানের জন্য একটি সংরক্ষিত ঠিকানা নির্বাচন করা বা একটি সংরক্ষিত শংসাপত্র দিয়ে অর্থ প্রদানের মতো নির্দিষ্ট কাজগুলিকে "অর্পণ" করতে পারে, যখন আপনি মার্চেন্ট অফ রেকর্ড থাকবেন এবং প্রকৃত অর্ডার তৈরি পরিচালনা করবেন।

মার্চেন্ট বাস্তবায়ন চেকলিস্ট

এমবেডেড চেকআউট সমর্থন করার জন্য, আপনাকে আপনার UCP API এবং আপনার ফ্রন্টএন্ড চেকআউট অ্যাপ্লিকেশন জুড়ে নিম্নলিখিত প্রয়োজনীয়তাগুলি বাস্তবায়ন করতে হবে।

১. আবিষ্কার সক্ষম করুন (UCP API)

আপনাকে অবশ্যই ঘোষণা করতে হবে যে আপনার চেকআউট আপনার UCP API প্রতিক্রিয়াগুলিতে এমবেডেড এক্সটেনশন সমর্থন করে।

• অ্যাকশন : আপনার UCP রেসপন্স ক্যাপাবিলিটিস অ্যারেতে dev.ucp.shopping.embedded_checkout ক্যাপাবিলিটি অবজেক্ট যোগ করুন।
• প্রয়োজনীয়তা : স্পেক এবং স্কিমা URL গুলি অন্তর্ভুক্ত করুন।
• ঐচ্ছিক : চেকআউট লোড করার জন্য যদি আপনার প্রমাণীকরণের (যেমন, একটি JWT টোকেন) প্রয়োজন হয়, তাহলে auth.required কে true এ সেট করুন।

"capabilities": [
  {
    "name": "dev.ucp.shopping.embedded_checkout",
    "version": "2026-01-11",
    "spec": "https://ucp.dev/specs/shopping/embedded_checkout",
    "config": {
        "auth": { "required": true }
    }
  }
]

২. ইউআরএল ইনিশিয়ালাইজেশন (ফ্রন্টএন্ড) পরিচালনা করুন

যখন হোস্ট আপনার continue_url লোড করবে, তখন তারা নির্দিষ্ট কোয়েরি প্যারামিটার যুক্ত করবে। লোড হওয়ার সাথে সাথেই আপনার ফ্রন্টএন্ডকে এগুলি পার্স করতে হবে।

• ক্রিয়া : নিম্নলিখিত URL কোয়েরি প্যারামিটারগুলি পার্স করুন:
  • ec_version : প্রোটোকল সংস্করণ (যেমন, 2026-01-11 )।
  • ec_auth : (প্রযোজ্য ক্ষেত্রে) যদি আপনি auth.required: true সেট করেন, তাহলে হোস্ট দ্বারা প্রদত্ত auth টোকেনটি যাচাই করুন।
  • ec_delegate : হোস্ট যে সকল কর্মকাণ্ড স্থানীয়ভাবে পরিচালনা করতে চায় তার একটি কমা দ্বারা পৃথক তালিকা (যেমন, payment.credential , fulfillment.address_change , payment.instruments_change )।

৩. যোগাযোগ স্থাপন (ফ্রন্টএন্ড)

JSON-RPC 2.0 ফর্ম্যাট ব্যবহার করে postMessage ব্যবহার করে যোগাযোগ করা হয়।

• ক্রিয়া : message ইভেন্টের জন্য একটি শ্রোতা প্রয়োগ করুন।
• প্রয়োজনীয়তা : হোস্টের সাথে মেলে তা নিশ্চিত করার জন্য আপনাকে প্রতিটি বার্তার উৎপত্তি যাচাই করতে হবে।
• নেটিভ সাপোর্ট : নেটিভ অ্যাপ হোস্টের জন্য, যদি postMessage উপলব্ধ না থাকে তবে ইনজেক্টেড গ্লোবালগুলি (যেমন, window.EmbeddedCheckoutProtocolConsumer ) পরীক্ষা করুন এবং ব্যবহার করুন।

৪. হ্যান্ডশেক করুন (ফ্রন্টএন্ড)

আপনার চেকআউট রেন্ডার হওয়ার সাথে সাথে, আপনাকে হোস্টকে বলতে হবে যে আপনি প্রস্তুত এবং কোন প্রতিনিধিদল গ্রহণ করবেন তা নিশ্চিত করতে হবে।

• পদক্ষেপ : লোড করার সাথে সাথেই ec.ready অনুরোধটি পাঠান।
• পেলোড : হোস্টকে আপনি যে ক্ষমতাগুলি পরিচালনা করতে দিতে সম্মত হন তার তালিকা সহ একটি delegate অ্যারে অন্তর্ভুক্ত করুন।
• উদাহরণ : যদি URL টি ec_delegate=payment.credential অনুরোধ করে এবং আপনি তা গ্রহণ করেন, তাহলে ec.ready পেলোডে "payment.credential" অন্তর্ভুক্ত করুন।

// Example: Sending the ec.ready message
const hostWindow = window.parent;
hostWindow.postMessage(JSON.stringify({
  "jsonrpc": "2.0",
  "id": "ready_1",
  "method": "ec.ready",
  "params": {
    "delegate": ["payment.credential"] // List capabilities you accept to delegate
  }
}), "*");

৫. ডেলিগেশন লজিক (ফ্রন্টএন্ড) বাস্তবায়ন করুন

যদি আপনি হ্যান্ডশেকের সময় কোনও প্রতিনিধিদল গ্রহণ করে থাকেন, তাহলে দ্বন্দ্ব এড়াতে আপনাকে অবশ্যই আপনার UI আচরণ পরিবর্তন করতে হবে।

• ক্রিয়া : অর্পিত কাজের জন্য প্রাসঙ্গিক UI উপাদানগুলি লুকান।
• উদাহরণ : যদি fulfillment.address_change ডেলিগেট করা হয়, তাহলে আপনার ঠিকানা ফর্মটি লুকান এবং পরিবর্তে "ঠিকানা পরিবর্তন করুন" বোতামটি দেখান।
• অ্যাকশন : ব্যবহারকারী যখন সেই বোতামে ক্লিক করেন, তখন হোস্টকে একটি _request বার্তা (যেমন, ec.fulfillment.address_change_request ) পাঠান।
• ক্রিয়া : হোস্টের প্রতিক্রিয়ার জন্য অপেক্ষা করুন। প্রতিক্রিয়াতে নতুন ডেটা থাকবে (যেমন, নির্বাচিত ঠিকানা)।
• প্রয়োজনীয়তা : হোস্ট কর্তৃক প্রদত্ত ডেটার উপর ভিত্তি করে PUT-স্টাইল প্রতিস্থাপন (পুরো অবজেক্ট বিভাগটি প্রতিস্থাপন) ব্যবহার করে আপনার চেকআউট অবস্থা আপডেট করুন।

// Example: requesting payment credential
hostWindow.postMessage(JSON.stringify({
  "jsonrpc": "2.0",
  "id": "req_1",
  "method": "ec.payment.credential_request",
  "params": {
      "checkout": currentCheckoutState // Pass the full current checkout object
  }
}), "*");

৬. জীবনচক্র এবং অবস্থা আপডেট পাঠান (ফ্রন্টএন্ড)

আপনাকে অবশ্যই হোস্টকে চেকআউটের অবস্থা সম্পর্কে অবহিত রাখতে হবে যাতে তারা তাদের UI আপডেট করতে পারে বা ত্রুটিগুলি পরিচালনা করতে পারে।

• ক্রিয়া : অবস্থা পরিবর্তন হলে বিজ্ঞপ্তি (আইডি ছাড়া বার্তা) পাঠান:
  • ec.start : যখন চেকআউট সম্পূর্ণরূপে দৃশ্যমান হবে।
  • ec.line_items.change : যদি কার্টের বিষয়বস্তু বা মোট তথ্য আপডেট হয়।
  • ec.buyer.change : ক্রেতার বিবরণ আপডেট হলে।
  • ec.complete : যখন অর্ডারটি সফলভাবে স্থাপন করা হয়।
  • ec.error : যদি কোন গুরুতর ত্রুটি ঘটে।

৭. নিরাপত্তা জোরদার করুন (সার্ভার/শিরোনাম)

আপনার চেকআউটটি ক্ষতিকারক ব্যক্তিদের দ্বারা এম্বেড করা না যায় তা নিশ্চিত করতে হবে।

• পদক্ষেপ : কন্টেন্ট সিকিউরিটি পলিসি (CSP) হেডার বাস্তবায়ন করুন।
• প্রয়োজনীয়তা : শুধুমাত্র বিশ্বস্ত হোস্ট দ্বারা এম্বেডিং করার অনুমতি দেওয়ার জন্য frame-ancestors <host_origin>; সেট করুন।
• নেভিগেশন : ব্যবহারকারীকে চেকআউট প্রবাহ থেকে দূরে সরিয়ে দেয় এমন লজিক ব্লক করুন (যেমন, আপনার হোমপেজে নিয়ে যাওয়া "কন্টিনিউ শপিং" লিঙ্কগুলি সরিয়ে ফেলুন)। 3DS যাচাইকরণ বা তৃতীয় পক্ষের পেমেন্ট পুনঃনির্দেশের ক্ষেত্রে ব্যতিক্রম অনুমোদিত।