# कॉमर्स API के उपयोग: सात बिल्ड जो विजेट से नहीं हो सकते

> जब स्टोरफ़्रंट विजेट सही आकार का न हो: SaaS में एम्बेडेड कॉमर्स, मल्टी-सरफ़ेस कैटलॉग, व्हाइट-लेबल स्टोर, कस्टम UX, AI एजेंट और कस्टम BI। साथ में Shoprocket JS SDK के कोड उदाहरण।

Ryan Badger - 4 अगस्त 2025 - 5 मिनट में पढ़ें

## एम्बेडिंग के लिए ईकॉमर्स API किस काम की है

ज़्यादातर ईकॉमर्स प्लेटफ़ॉर्म आपको एक विजेट देते हैं। स्क्रिप्ट पेस्ट कीजिए, स्टोरफ़्रंट पाइए। 95% स्टोरों के लिए यह ठीक काम करता है।

कॉमर्स API तब काम आती है जब आप कुछ ऐसा करना चाहते हैं जो विजेट नहीं करता: प्रोडक्ट अपने ही UI के भीतर रेंडर करना, SaaS डैशबोर्ड के अंदर चेकआउट एम्बेड करना, कैटलॉग को कई सतहों (वेब + मोबाइल + वॉइस) में बाँटना, या ऐसे कस्टम ख़रीदार फ़्लो बनाना जो कोई प्लेटफ़ॉर्म तैयार नहीं देता।

Shoprocket दोनों देता है। [विजेट](https://v3.shoprocket.io/hi/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md) डिफ़ॉल्ट है। [`@shoprocket/core` SDK](https://github.com/shoprocket/shoprocket-js) तब है जब आप विजेट से आगे निकल जाएँ या आपको उसकी कभी ज़रूरत ही न रही हो।

## वे उपयोग जिनमें विजेट नहीं, API चाहिए

ये वे बिल्ड हैं जिनमें विजेट काफ़ी नहीं है। अगर आपका आइडिया इस सूची में है, तो आप API के इलाक़े में हैं।

### 1. आपके SaaS प्रोडक्ट के अंदर कॉमर्स

आपके SaaS डैशबोर्ड का अपना UI पहले से है। आप चाहते हैं कि ग्राहक ऐड-ऑन, क्रेडिट पैक, प्रीमियम टियर या भौतिक मर्च आपका ऐप छोड़े बिना ख़रीदें।

विजेट यहाँ ग़लत आकार का होगा: वह आपके यूज़र्स के बारे में नहीं जानता, आपके डिज़ाइन सिस्टम से मेल नहीं खाता, और पूरे पेज के स्टोरफ़्रंट की धारणा पर चलता है। API से आप प्रोडक्ट कार्ड अपने कॉम्पोनेंट से रेंडर कर सकते हैं, बटन क्लिक पर `cart.addItem()` कॉल कर सकते हैं, और अपना चेकआउट पैनल खोल सकते हैं (या अगर कम्प्लायंस का काम टालना चाहें तो होस्टेड चेकआउट पर रीडायरेक्ट कर सकते हैं)।

```
import { ShoprocketCore } from '@shoprocket/core'

const sr = new ShoprocketCore({ publicKey: 'pk_...' })

// अपने SaaS डैशबोर्ड के अंदर ऐड-ऑन टाइल रेंडर करें
const addons = await sr.products.list({ category: 'addons' })

// यूज़र "Add credits" बटन पर क्लिक करता है
await sr.cart.addItem(addon.id, 1)
```

### 2. मल्टी-सरफ़ेस कैटलॉग (वेब + नेटिव ऐप + वॉइस + चैट)

प्रोडक्ट का एक ही कैटलॉग, हर जगह अलग तरह से रेंडर होता है। वेब स्टोरफ़्रंट पूरा प्रोडक्ट विवरण दिखाता है, नेटिव iOS ऐप कॉम्पैक्ट सूची, वॉइस असिस्टेंट आइटम बोलकर बताता है, और चैट इंटीग्रेशन ख़रीदने लायक लिंक के साथ जवाब देता है।

चारों सतहें एक ही API को कॉल करती हैं। जब आप Shoprocket डैशबोर्ड में किसी प्रोडक्ट की कीमत बदलते हैं, तो हर सतह अगले फ़ेच में उसे दिखा देती है। हर सतह के लिए अलग कंटेंट सिंक नहीं।

### 3. व्हाइट-लेबल / पार्टनर स्टोरफ़्रंट

आप ऐसा प्लेटफ़ॉर्म हैं जहाँ दूसरे लोग अपना सामान बेचते हैं: कम्युनिटी मार्केटप्लेस, पार्टनर डायरेक्टरी, या अलग-अलग डीलर साइटों वाला फ़्रैंचाइज़ नेटवर्क। हर पार्टनर की ब्रांडिंग उसकी अपनी है, आपकी नहीं।

हर पार्टनर की साइट आपके फ़्रेमवर्क पर चलती है लेकिन अपनी `publicKey` के साथ कॉमर्स API को कॉल करती है। उनके प्रोडक्ट, उनके ऑर्डर, उनके पेआउट, सब अकाउंट के हिसाब से अलग। कोई विजेट उनकी ब्रांडिंग के आड़े नहीं आता।

### 4. पूरी तरह कस्टम ख़रीदार UX

इंटरैक्टिव प्रोडक्ट कॉन्फ़िगरेटर (कस्टम PC बिल्ड, पर्सनलाइज़्ड गहने, ऑर्डर पर बनने वाला फ़र्नीचर)। 3D प्रोडक्ट व्यूअर। "कमरा ख़रीदें" फ़ोटो गैलरी, जहाँ इमेज के पिक्सेल पर क्लिक करने से प्रोडक्ट कार्ट में जुड़ जाता है। ईमेल के अंदर क्विक-रीऑर्डर बटन।

विजेट इनमें से कुछ नहीं कर सकता। API कर सकती है। आपका डिज़ाइनर जो भी UI सोचे, आप उसे रेंडर करें; उसके पीछे कॉमर्स की मशीनरी API संभालती है।

### 5. AI एजेंट और एजेंटिक कॉमर्स

एक AI एजेंट (ChatGPT, Claude, कोई कस्टम एजेंट) जो यूज़र की ओर से प्रोडक्ट ब्राउज़ करे और ख़रीदारी पूरी करे। एजेंट को आपके कैटलॉग और कार्ट तक प्रोग्रामेटिक पहुँच चाहिए, ऐसा DOM विजेट नहीं जिसे उसे पार्स करना पड़े।

Shoprocket स्टैंडर्ड API एक्सेस के साथ AI कॉमर्स प्रोटोकॉल के फ़ीड भी देता है। "$50 से कम में कौन-सा स्टॉक में है और मुफ़्त शिपिंग वाला" पूछने पर एजेंट को स्ट्रक्चर्ड जवाब मिलता है, स्क्रीन स्क्रैप नहीं।

### 6. कंटेंट टूल में एम्बेडेड कॉमर्स

एक Notion पेज जिसके ब्लॉक ख़रीदने लायक हों। क्लिक-टू-परचेज़ हॉटस्पॉट वाला Framer डिज़ाइन। एक न्यूज़लेटर टूल जहाँ सब्सक्राइबर प्रोडक्ट कार्ड पर टैप करके ईमेल छोड़े बिना भुगतान कर सकें। सब API के ऊपर बना।

### 7. कस्टम रिपोर्टिंग और BI डैशबोर्ड

Shoprocket डैशबोर्ड रेवेन्यू, कन्वर्ज़न, टॉप प्रोडक्ट दिखाता है। जो वह नहीं दिखाता वे *आपके* कस्टम मेट्रिक हैं: ग्राहक कोहोर्ट के हिसाब से लाइफ़टाइम वैल्यू, रेफ़रल स्रोत के हिसाब से ऑर्डर, सप्लायर लागत के बाद मार्जिन। API ऑर्डर और ग्राहक डेटा खोलती है ताकि आप उसे अपने BI टूल, स्प्रेडशीट या आंतरिक डैशबोर्ड में भेज सकें।

## आज SDK आपको क्या देता है

`@shoprocket/core` से:

```
// Products
sr.products.list({ limit, offset, sort, category })
sr.products.get(productId)

// Cart
sr.cart.get()
sr.cart.addItem(productId, quantity)
sr.cart.updateItem(itemId, quantity)
sr.cart.removeItem(itemId)

// Session
sr.session.create()
sr.setSessionToken(token)
```

इसके अलावा पूरी REST API उन सबके लिए, जिन्हें SDK अभी नहीं लपेटता (ऑर्डर, ग्राहक, डिस्काउंट, प्रोडक्ट लिखना)। पूरे संदर्भ के लिए [api.shoprocket.io/docs](https://api.shoprocket.io/docs) देखें।

## जहाँ API-फ़र्स्ट ग़लती है

कुछ मामले जहाँ विजेट सही चुनाव है और API ज़रूरत से ज़्यादा:

- **10-200 प्रोडक्ट वाला साधारण स्टोरफ़्रंट।** विजेट इसे बढ़िया रेंडर करता है; अपना कैटलॉग UI लिखना सुलझे हुए काम को दोबारा करना है।
- **आपके पास समर्पित फ़्रंटएंड इंजीनियरिंग क्षमता नहीं है।** API-फ़र्स्ट में अपने लोडिंग स्टेट, वेरिएंट UI, एरर हैंडलिंग, एक्सेसिबिलिटी और 21 लोकेल का i18n ख़ुद भेजना और संभालना पड़ता है। यह हफ़्तों का काम है जो विजेट मुफ़्त में देता है।
- **आपकी मुख्य चिंता लॉन्च की रफ़्तार है।** विजेट मिनटों का है; API-फ़र्स्ट कम से कम हफ़्तों का।

डिफ़ॉल्ट रूप से विजेट चुनिए। API तब उठाइए जब कोई ऐसी चीज़ आए जो विजेट नहीं कर सकता।

## एक व्यावहारिक पहला प्रोजेक्ट

"मुझे API चाहिए" वाला सबसे आम प्रोजेक्ट: एक SaaS प्रोडक्ट जो अपने ही डैशबोर्ड में क्रेडिट, सब्सक्रिप्शन या एक बार के ऐड-ऑन बेचना चाहता है।

तरीक़ा:

1. अपने फ़्रंटएंड में `@shoprocket/core` इंस्टॉल करें
2. Shoprocket में "Add-ons" या ऐसा ही कोई नाम वाली श्रेणी बनाएँ
3. ठीक वही कीमत / विवरण वाले प्रोडक्ट जोड़ें जो आप चाहते हैं
4. अपनी कॉम्पोनेंट लाइब्रेरी से अपने डैशबोर्ड में प्रोडक्ट सूची रेंडर करें
5. क्लिक पर कार्ट में जोड़ें + Shoprocket के होस्टेड चेकआउट पर रीडायरेक्ट करें (या अतिरिक्त काम में सहज हों तो चेकआउट इनलाइन एम्बेड करें)
6. `order.paid` इवेंट पाने के लिए एक वेबहुक एंडपॉइंट कॉन्फ़िगर करें, ताकि ख़रीद से जो भी खुलता है (क्रेडिट, एक्सेस, शिपमेंट) उसे आप प्रोविज़न कर सकें

बस इतना ही। मुट्ठी भर फ़ाइलें, API कॉल करने के आदी किसी व्यक्ति के लिए एक दिन का काम। न विजेट, न iframe, आपके प्रोडक्ट के UI से कोई समझौता नहीं।

## हम क्या नहीं सुझाते

ऐसा पूरा कैटलॉग UI दोबारा मत बनाइए जो विजेट के किए से बहुत मिलता-जुलता हो। अगर आप "फ़िल्टर और सर्च वाली प्रोडक्ट ग्रिड" पर हफ़्ते लगा रहे हैं, तो आप वही लिख रहे हैं जो विजेट मिनटों में दे देता है। उस आकार के लिए विजेट इस्तेमाल कीजिए, सच में अलग आकारों के लिए API।

> **टिप:** अगर आप API-फ़र्स्ट इसलिए सोच रहे हैं क्योंकि विजेट की डिफ़ॉल्ट स्टाइलिंग आपके ब्रांड से मेल नहीं खाती, तो पहले [विजेट के स्टाइलिंग हुक](https://github.com/shoprocket/shoprocket-js) आज़माइए। विजेट दिखने से कहीं ज़्यादा CSS कस्टमाइज़ेशन मानता है। पूरा API रीबिल्ड कहीं भारी काम है।

## संक्षेप में

- **विजेट** = डिफ़ॉल्ट, 95% स्टोरों को कवर करता है
- **API / SDK** = जब विजेट सही आकार का न हो (SaaS एम्बेडेड कॉमर्स, मल्टी-सरफ़ेस, व्हाइट-लेबल, कस्टम UX, AI एजेंट, कस्टम BI)
- **आज का SDK दायरा:** प्रोडक्ट, कार्ट, सेशन; साथ में ऑर्डर / ग्राहक / डिस्काउंट के लिए पूरी REST API
- **पहले प्रोजेक्ट का पैटर्न:** SDK + वेबहुक-चालित प्रोविज़निंग से क्रेडिट या ऐड-ऑन बेचने वाला SaaS डैशबोर्ड
- **API से दोबारा मत बनाइए** वह जो विजेट पहले से अच्छा करता है; अपना आकार चुनिए

[फ़्री ट्रायल शुरू कीजिए](https://app-v3.shoprocket.io/signup) और पब्लिक की ले लीजिए; SDK किसी भी Shoprocket प्लान पर मुफ़्त है। 14 दिन, कार्ड नहीं।

---

- HTML version: https://v3.shoprocket.io/hi/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget
- Language: हिन्दी (hi)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Deutsch](https://v3.shoprocket.io/de/blog/commerce-api-anwendungsfaelle-sieben-builds-ohne-widget.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [English](https://v3.shoprocket.io/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Español](https://v3.shoprocket.io/es/blog/casos-de-uso-api-de-comercio-siete-proyectos-que-un-widget-no-puede-hacer.md), [Français](https://v3.shoprocket.io/fr/blog/api-commerce-sept-cas-usage-impossibles-avec-un-widget.md), [עברית](https://v3.shoprocket.io/he/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/kasus-penggunaan-commerce-api-tujuh-hal-yang-tidak-bisa-dilakukan-widget.md), [Italiano](https://v3.shoprocket.io/it/blog/api-commerce-sette-casi-duso-che-un-widget-non-copre.md), [日本語](https://v3.shoprocket.io/ja/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/prekybos-api-panaudojimo-atvejai-septyni-sprendimai-kuriu-nepadarysite-su-valdykle.md), [Norsk](https://v3.shoprocket.io/nb/blogg/handels-api-sju-ting-du-ikke-kan-bygge-med-en-widget.md), [Nederlands](https://v3.shoprocket.io/nl/blog/commerce-api-use-cases-zeven-projecten-zonder-widget.md), [Polski](https://v3.shoprocket.io/pl/blog/api-do-e-commerce-siedem-zastosowan-ktorych-nie-zrobisz-widzetem.md), [Português](https://v3.shoprocket.io/pt/blog/casos-de-uso-api-de-commerce-sete-projetos-que-widget-nao-faz.md), [Română](https://v3.shoprocket.io/ro/blog/cazuri-de-utilizare-api-comert-sapte-proiecte-fara-widget.md), [Русский](https://v3.shoprocket.io/ru/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [ไทย](https://v3.shoprocket.io/th/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Türkçe](https://v3.shoprocket.io/tr/blog/commerce-api-kullanim-senaryolari-widget-ile-yapilamayan-yedi-proje.md), [中文](https://v3.shoprocket.io/zh/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md)