एम्बेड की गई चेकआउट की सुविधा

एंबेड की गई चेकआउट की सुविधा को इंटिग्रेट करने से, वेब पर मौजूद चेकआउट की सुविधा को Google के प्लैटफ़ॉर्म पर एंबेड किया जा सकता है. अगर आपके प्रॉडक्ट के लिए जटिल लॉजिक (जैसे, कस्टमर के हिसाब से बनाए गए प्रॉडक्ट) की ज़रूरत है और नेटिव एपीआई इसका समर्थन नहीं करता, तो इस पाथ का इस्तेमाल करें. आपको चेकआउट यूज़र इंटरफ़ेस (यूआई) लागू करना होगा. इसे iframe के ज़रिए चेकआउट फ़्लो में एम्बेड किया जाएगा.

एम्बेड की गई चेकआउट की सुविधा क्या है?

एम्बेड किए गए चेकआउट (ईसी) की सुविधा की मदद से, Google Search या एआई एजेंट जैसे होस्ट, अपने ऐप्लिकेशन में वेब पर मौजूद आपके चेकआउट पेज को दिखा सकते हैं. इसके लिए, वे iframe या वेबव्यू का इस्तेमाल करते हैं. स्टैंडर्ड वेब रीडायरेक्ट के उलट, इससे दोनों तरफ़ से बातचीत की जा सकती है. मेज़बान, कुछ खास टास्क "डेलिगेट" कर सकता है. जैसे, सेव किया गया पता चुनना या सेव किए गए क्रेडेंशियल से पेमेंट करना. इससे आपको तेज़ी से और बेहतर अनुभव मिलता है. हालांकि, आप ही मर्चेंट ऑफ़ रिकॉर्ड बने रहते हैं और ऑर्डर बनाने का काम भी आपके पास ही रहता है.

कारोबारी या कंपनी के लिए लागू करने से जुड़ी चेकलिस्ट

एम्बेड किए गए चेकआउट की सुविधा के लिए, आपको UCP API और फ़्रंटएंड चेकआउट ऐप्लिकेशन, दोनों में ये ज़रूरी शर्तें पूरी करनी होंगी.

1. खोज करने की सुविधा चालू करना (UCP API)

आपको यह बताना होगा कि यूसीपी एपीआई के जवाबों में, एम्बेड किए गए एक्सटेंशन के साथ चेकआउट करने की सुविधा काम करती है.

• कार्रवाई: अपने यूसीपी रिस्पॉन्स की क्षमताओं के कलेक्शन में dev.ucp.shopping.embedded_checkout क्षमता वाला ऑब्जेक्ट जोड़ें.
• ज़रूरी शर्त: स्पेसिफ़िकेशन और स्कीमा के यूआरएल शामिल करें.
• ज़रूरी नहीं: अगर आपको चेकआउट पेज लोड करने के लिए पुष्टि करने की ज़रूरत है (जैसे, JWT टोकन), तो auth.required को सही पर सेट करें.

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

2. यूआरएल को शुरू करने की प्रोसेस को हैंडल करना (फ़्रंटएंड)

जब होस्ट आपका continue_url लोड करता है, तो वह कुछ क्वेरी पैरामीटर जोड़ता है. आपका फ़्रंटएंड, लोड होने के तुरंत बाद इन्हें पार्स करे.

• कार्रवाई: यूआरएल के इन क्वेरी पैरामीटर को पार्स करें:
  • ec_version: प्रोटोकॉल वर्शन (जैसे, 2026-01-11).
  • ec_auth: (अगर लागू हो) होस्ट से मिले पुष्टि करने वाले टोकन की पुष्टि करें. ऐसा तब करें, जब आपने auth.required: true सेट किया हो.
  • ec_delegate: कॉमा लगाकर अलग की गई उन कार्रवाइयों की सूची जिन्हें होस्ट नेटिव तरीके से हैंडल करना चाहता है (उदाहरण के लिए, payment.credential, fulfillment.address_change, payment.instruments_change).

3. कम्यूनिकेशन सेट अप करना (फ़्रंटएंड)

postMessage के साथ कम्यूनिकेशन, JSON-RPC 2.0 फ़ॉर्मैट का इस्तेमाल करके किया जाता है.

• कार्रवाई: message इवेंट के लिए लिसनर लागू करें.
• ज़रूरी शर्त: आपको हर मैसेज के ओरिजन की पुष्टि करनी होगी, ताकि यह पक्का किया जा सके कि वह होस्ट से मेल खाता है.
• नेटिव सपोर्ट: नेटिव ऐप्लिकेशन होस्ट के लिए, इंजेक्ट किए गए ग्लोबल की जांच करें और उनका इस्तेमाल करें. उदाहरण के लिए, window.EmbeddedCheckoutProtocolConsumer) अगर postMessage उपलब्ध नहीं है.

4. हैंडशेक करना (फ़्रंटएंड)

चेकआउट पेज दिखने के बाद, आपको होस्ट को यह बताना होगा कि आप तैयार हैं. साथ ही, आपको यह पुष्टि करनी होगी कि आपने कौनसी अनुमतियां स्वीकार की हैं.

• कार्रवाई: पेज लोड होने के तुरंत बाद, ec.ready अनुरोध भेजें.
• Payload: इसमें delegate ऐरे शामिल करें. इसमें उन सुविधाओं की सूची दी गई हो जिन्हें होस्ट को मैनेज करने की अनुमति दी गई है.
• उदाहरण: अगर अनुरोध किए गए यूआरएल में 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
  }
}), "*");

5. डेलिगेशन लॉजिक लागू करना (फ़्रंटएंड)

अगर आपने हैंडशेक में डेलिगेशन स्वीकार किया है, तो आपको टकराव से बचने के लिए, यूज़र इंटरफ़ेस (यूआई) के व्यवहार में बदलाव करना होगा.

• कार्रवाई: सौंपे गए टास्क के लिए, काम के यूज़र इंटरफ़ेस (यूआई) एलिमेंट छिपाएं.
• उदाहरण: अगर 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
  }
}), "*");

6. लाइफ़साइकल और स्थिति से जुड़े अपडेट भेजना (फ़्रंटएंड)

आपको होस्ट को चेकआउट के स्टेटस के बारे में जानकारी देनी होगी, ताकि वह अपने यूज़र इंटरफ़ेस (यूआई) को अपडेट कर सके या गड़बड़ियों को ठीक कर सके.

• कार्रवाई: स्थिति में बदलाव होने पर सूचनाएं (आईडी के बिना मैसेज) भेजें:
  • ec.start: जब चेकआउट पेज पूरी तरह से दिखता हो.
  • ec.line_items.change: अगर कार्ट में मौजूद सामान या कुल कीमत अपडेट होती है.
  • ec.buyer.change: खरीदार की जानकारी अपडेट होने पर.
  • ec.complete: जब ऑर्डर पूरा हो जाता है.
  • ec.error: गंभीर गड़बड़ी होने पर.

7. सुरक्षा (सर्वर/हेडर) लागू करना

आपको यह पक्का करना होगा कि बुरे मकसद से काम करने वाले लोग, आपके चेकआउट पेज को एम्बेड न कर पाएं.

• कार्रवाई: कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) के हेडर लागू करें.
• ज़रूरी शर्त: frame-ancestors <host_origin>; को सेट करें, ताकि सिर्फ़ भरोसेमंद होस्ट को एम्बेड करने की अनुमति मिले.
• नेविगेशन: ब्लॉक करने का ऐसा लॉजिक जो उपयोगकर्ता को चेकआउट फ़्लो से बाहर ले जाता है. उदाहरण के लिए, "खरीदारी जारी रखें" लिंक हटाना, जो आपके होम पेज पर ले जाते हैं. 3DS की पुष्टि या तीसरे पक्ष के पेमेंट रीडायरेक्ट के लिए, अपवादों की अनुमति है.