# กรณีใช้งาน Commerce API: เจ็ดสิ่งที่วิดเจ็ตทำให้ไม่ได้

> เมื่อวิดเจ็ตหน้าร้านไม่ใช่รูปแบบที่ใช่: คอมเมิร์ซฝังใน SaaS แคตตาล็อกหลายช่องทาง ร้านแบบ white-label ประสบการณ์ผู้ใช้แบบกำหนดเอง AI agent และ BI แบบกำหนดเอง พร้อมตัวอย่างโค้ดจาก Shoprocket JS SDK

Ryan Badger - 4 สิงหาคม 2568 - อ่าน 5 นาที

## API อีคอมเมิร์ซสำหรับการฝังมีไว้ทำอะไร

แพลตฟอร์มอีคอมเมิร์ซส่วนใหญ่ให้วิดเจ็ตมา วางสคริปต์ ได้หน้าร้าน ใช้ได้ดีกับร้านค้า 95%

Commerce API คือสิ่งที่คุณหยิบมาใช้เมื่ออยากทำสิ่งที่วิดเจ็ตทำไม่ได้: แสดงสินค้าใน UI ของคุณเอง ฝังการชำระเงินในแดชบอร์ด SaaS กระจายแคตตาล็อกไปหลายช่องทาง (เว็บ + มือถือ + เสียง) หรือสร้างเส้นทางผู้ซื้อแบบกำหนดเองที่ไม่มีแพลตฟอร์มไหนมีให้

Shoprocket มีให้ทั้งสองแบบ [วิดเจ็ต](https://v3.shoprocket.io/th/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md)เป็นค่าเริ่มต้น ส่วน [SDK `@shoprocket/core`](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' })

// ผู้ใช้กดปุ่ม "เพิ่มเครดิต"
await sr.cart.addItem(addon.id, 1)
```

### 2. แคตตาล็อกหลายช่องทาง (เว็บ + แอปเนทีฟ + เสียง + แชต)

แคตตาล็อกสินค้าชุดเดียว แสดงต่างกันในแต่ละที่ หน้าร้านเว็บแสดงรายละเอียดสินค้าเต็ม แอป iOS แสดงเป็นรายการกะทัดรัด ผู้ช่วยเสียงอ่านรายการออกเสียง การเชื่อมต่อแชตตอบกลับด้วยลิงก์ที่ซื้อได้

ทั้งสี่ช่องทางเรียก API เดียวกัน เมื่อคุณอัปเดตราคาสินค้าในแดชบอร์ด Shoprocket ทุกช่องทางสะท้อนผลในการดึงข้อมูลครั้งถัดไป ไม่ต้องซิงก์เนื้อหาแยกต่อช่องทาง

### 3. หน้าร้านแบบ white-label / ของพันธมิตร

คุณเป็นแพลตฟอร์มที่คนอื่นมาขายของ: มาร์เก็ตเพลสชุมชน ไดเรกทอรีพันธมิตร เครือข่ายแฟรนไชส์ที่ตัวแทนแต่ละรายมีเว็บของตัวเอง พันธมิตรแต่ละรายมีแบรนด์ของตัวเอง ไม่ใช่ของคุณ

เว็บของพันธมิตรแต่ละรายรันเฟรมเวิร์กของคุณ แต่เรียก commerce API ด้วย `publicKey` ของเขา สินค้าของเขา ออเดอร์ของเขา การจ่ายเงินของเขา ทั้งหมดแยกตามบัญชี ไม่มีวิดเจ็ตมาขวางแบรนด์ของเขา

### 4. ประสบการณ์ผู้ซื้อแบบกำหนดเองทั้งหมด

ตัวกำหนดค่าสินค้าแบบโต้ตอบ (ประกอบพีซี เครื่องประดับเฉพาะบุคคล เฟอร์นิเจอร์สั่งทำ) ตัวดูสินค้า 3 มิติ แกลเลอรีรูป "ช้อปทั้งห้อง" ที่คลิกพิกเซลในรูปแล้วเพิ่มสินค้าลงตะกร้า ปุ่มสั่งซ้ำด่วนในอีเมล

วิดเจ็ตทำสิ่งเหล่านี้ไม่ได้ API ทำได้ คุณแสดง UI แบบไหนก็ได้ที่ดีไซเนอร์ของคุณฝันไว้ ส่วน API จัดการกลไกคอมเมิร์ซเบื้องหลัง

### 5. AI agent และ agentic commerce

AI agent (ChatGPT, Claude หรือ agent ที่สร้างเอง) ที่เลือกดูสินค้าและซื้อแทนผู้ใช้ได้ agent ต้องเข้าถึงแคตตาล็อกและตะกร้าของคุณด้วยโปรแกรม ไม่ใช่วิดเจ็ต DOM ที่ต้องมานั่งแยกวิเคราะห์

Shoprocket มีฟีดสำหรับโปรโตคอลคอมเมิร์ซของ AI ควบคู่กับการเข้าถึง API มาตรฐาน เมื่อถาม agent ว่า "อะไรมีของและราคาต่ำกว่า $50 พร้อมส่งฟรี" ก็ได้คำตอบที่มีโครงสร้าง ไม่ใช่การดึงข้อมูลจากหน้าจอ

### 6. คอมเมิร์ซฝังในเครื่องมือคอนเทนต์

หน้า Notion ที่บล็อกต่างๆ ซื้อได้ ดีไซน์ Framer ที่มีจุดกดซื้อ เครื่องมือจดหมายข่าวที่ผู้สมัครแตะการ์ดสินค้าแล้วจ่ายเงินได้โดยไม่ต้องออกจากอีเมล ทั้งหมดสร้างบน API

### 7. รายงานและแดชบอร์ด BI แบบกำหนดเอง

แดชบอร์ด Shoprocket แสดงรายได้ อัตราการซื้อ สินค้ายอดนิยม สิ่งที่มันไม่แสดงคือตัวชี้วัดแบบกำหนดเอง *ของคุณ*: มูลค่าตลอดอายุลูกค้าตามกลุ่ม (cohort) ออเดอร์ต่อแหล่งที่มา กำไรหลังหักต้นทุนซัพพลายเออร์ 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-first เป็นความผิดพลาด

บางกรณีที่วิดเจ็ตคือคำตอบที่ถูก และ API เกินความจำเป็น:

- **หน้าร้านธรรมดาที่มีสินค้า 10-200 รายการ** วิดเจ็ตแสดงผลได้สมบูรณ์แบบ การเขียน UI แคตตาล็อกเองคือการทำซ้ำสิ่งที่แก้ไปแล้ว
- **คุณไม่มีกำลังวิศวกรฟรอนต์เอนด์โดยเฉพาะ** API-first ต้องส่งมอบและดูแลสถานะการโหลด UI ตัวเลือกสินค้า การจัดการข้อผิดพลาด การเข้าถึง (accessibility) และ i18n ครบ 21 ภาษาเอง นั่นคืองานหลายสัปดาห์ที่วิดเจ็ตให้คุณฟรี
- **ความกังวลหลักคือความเร็วในการเปิดตัว** วิดเจ็ตใช้เวลาเป็นนาที API-first อย่างน้อยเป็นสัปดาห์

ใช้วิดเจ็ตเป็นค่าเริ่มต้น หยิบ API มาใช้เมื่อเจอสิ่งที่วิดเจ็ตทำไม่ได้

## โปรเจกต์แรกที่เป็นไปได้จริง

โปรเจกต์แบบ "ฉันต้องใช้ API" ที่พบบ่อยที่สุด: ผลิตภัณฑ์ SaaS ที่อยากขายเครดิต การสมัครสมาชิก หรือส่วนเสริมครั้งเดียวในแดชบอร์ดของตัวเอง

แนวทาง:

1. ติดตั้ง `@shoprocket/core` ในฟรอนต์เอนด์ของคุณ
2. สร้างหมวดใน Shoprocket ชื่อ "Add-ons" หรือคล้ายกัน
3. เพิ่มสินค้าพร้อมราคา / คำอธิบายตามที่ต้องการ
4. แสดงรายการสินค้าในแดชบอร์ดด้วยไลบรารีคอมโพเนนต์ของคุณเอง
5. เมื่อคลิก เพิ่มลงตะกร้า + ส่งไปหน้าชำระเงินที่ Shoprocket โฮสต์ให้ (หรือฝังหน้าชำระเงินในหน้าเดียวกัน ถ้าคุณพร้อมกับงานเพิ่ม)
6. ตั้งค่า endpoint ของ webhook เพื่อรับอีเวนต์ `order.paid` แล้วจัดสรรสิ่งที่การซื้อปลดล็อก (เครดิต สิทธิ์เข้าถึง การจัดส่ง)

แค่นั้น ไฟล์ไม่กี่ไฟล์ งานหนึ่งวันสำหรับคนที่คุ้นกับการเรียก API ไม่มีวิดเจ็ต ไม่มี iframe ไม่ต้องประนีประนอม UI ของผลิตภัณฑ์คุณ

## สิ่งที่เราไม่แนะนำ

อย่าสร้าง UI แคตตาล็อกเต็มรูปแบบที่คล้ายกับที่วิดเจ็ตทำอยู่แล้ว ถ้าคุณใช้เวลาหลายสัปดาห์กับ "กริดสินค้าพร้อมตัวกรองและการค้นหา" คุณกำลังเขียนสิ่งที่วิดเจ็ตส่งมอบให้ในไม่กี่นาที ใช้วิดเจ็ตกับรูปแบบนั้น และใช้ API กับรูปแบบที่ต่างออกไปจริงๆ

> **เคล็ดลับ:** ถ้าคุณกำลังคิดจะไป API-first เพราะสไตล์เริ่มต้นของวิดเจ็ตไม่เข้ากับแบรนด์ ให้ลอง[จุดปรับสไตล์ของวิดเจ็ต](https://github.com/shoprocket/shoprocket-js)ก่อน วิดเจ็ตรองรับการปรับแต่ง CSS ได้มากกว่าที่ดูเหมือน การสร้างใหม่ด้วย API เต็มรูปแบบเป็นงานที่หนักกว่ามาก

## สรุปสั้นๆ

- **วิดเจ็ต** = ค่าเริ่มต้น ครอบคลุมร้านค้า 95%
- **API / SDK** = เมื่อวิดเจ็ตไม่ใช่รูปแบบที่ใช่ (คอมเมิร์ซฝังใน SaaS หลายช่องทาง white-label UX แบบกำหนดเอง AI agent BI แบบกำหนดเอง)
- **ขอบเขตของ SDK วันนี้:** สินค้า ตะกร้า เซสชัน รวมถึง REST API เต็มรูปแบบสำหรับออเดอร์ / ลูกค้า / ส่วนลด
- **รูปแบบโปรเจกต์แรก:** แดชบอร์ด SaaS ที่ขายเครดิตหรือส่วนเสริมผ่าน SDK + การจัดสรรที่ขับเคลื่อนด้วย webhook
- **อย่าสร้างใหม่ด้วย API** ในสิ่งที่วิดเจ็ตทำได้ดีอยู่แล้ว เลือกรูปแบบให้ถูก

[เริ่มทดลองใช้ฟรี](https://app-v3.shoprocket.io/signup) แล้วรับ public key SDK ใช้ฟรีในทุกแผนของ Shoprocket 14 วัน ไม่ต้องใช้บัตร

---

- HTML version: https://v3.shoprocket.io/th/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget
- Language: ไทย (th)
- 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), [हिन्दी](https://v3.shoprocket.io/hi/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), [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)