From b2c
Calls Shopper Commerce APIs (SCAPI) for headless storefronts: search products, manage baskets, submit orders, access customer data, set shopper context. Includes SLAS authentication and performance optimization.
How this skill is triggered — by the user, by Claude, or both
Slash command
/b2c:b2c-scapi-shopperThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides you through consuming standard Shopper APIs for building headless commerce experiences. Shopper APIs are RESTful endpoints designed for customer-facing storefronts.
This skill guides you through consuming standard Shopper APIs for building headless commerce experiences. Shopper APIs are RESTful endpoints designed for customer-facing storefronts.
Note: For creating custom API endpoints, see b2c-custom-api-development. This skill focuses on consuming standard Shopper APIs.
This skill provides quick-start patterns and examples for B2C Commerce Shopper APIs (SCAPI) used in headless storefronts — authentication, checkout, product APIs, and Shopper Context. The examples are version-agnostic and illustrative. Before answering questions that reference specific API versions, authentication flows, quota limits, default scopes, or before emitting code the user will run, confirm current details via b2c docs search/b2c docs read (CLI) or the docs_search/docs_read MCP tools. The official Commerce API documentation at developer.salesforce.com is the authoritative source for API specifications, current authentication patterns, and version-specific behavior.
Canonical docs:
commerce-api/work-with-baskets-orders - Build Baskets and Place Orders guidecommerce-api/shopper-context-api - Shopper Context API referencecommerce-api/shopper-context-best-practices - Shopper Context best practicescommerce-api/auth-z-scope-catalog - Authorization Scopes Catalogcommerce-api/slas - SLAS Overviewcommerce-api/hook-method-details - Hook Method Detailscommerce-api/use-shopper-api - Use Shopper API guidecommerce-api/performance - Performance optimization guideShopper APIs are designed for frontend commerce applications:
https://{shortCode}.api.commercecloud.salesforce.com/{apiFamily}/{apiName}/v1/organizations/{organizationId}/{resource}?siteId={siteId}
Example:
https://kv7kzm78.api.commercecloud.salesforce.com/product/shopper-products/v1/organizations/f_ecom_zzte_053/products/25518823M?siteId=RefArchGlobal
Note: Shopper Baskets API supports both v1 and v2. See Shopper Baskets API reference or b2c docs read commerce-api/work-with-baskets-orders for current version guidance.
| Value | Description | Example |
|---|---|---|
shortCode | 8-character API routing code | kv7kzm78 |
organizationId | Instance identifier | f_ecom_zzte_053 |
siteId | Site/channel name | RefArchGlobal |
Find these in Business Manager: Administration > Site Development > Salesforce Commerce API Settings
Shopper APIs require SLAS tokens. SLAS supports guest and registered shopper flows.
# Create client with default scopes for a shopping app
b2c slas client create \
--tenant-id zzte_053 \
--channels RefArchGlobal \
--default-scopes \
--redirect-uri http://localhost:3000/callback
See b2c-slas skill for full client management.
Illustrative of the flow; confirm current SLAS authentication patterns (guest/registered, public/private client, PKCE) with
b2c docs read commerce-api/slas.
const response = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/shopper/auth/v1/organizations/${orgId}/oauth2/token`,
{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Basic ${btoa(clientId + ':' + clientSecret)}`
},
body: new URLSearchParams({
grant_type: 'client_credentials',
channel_id: siteId
})
}
);
const { access_token, refresh_token } = await response.json();
All Shopper API scopes must be configured on your SLAS client. See Scopes Reference for the complete list.
| API Family | Scope |
|---|---|
| Products | sfcc.shopper-products |
| Search | sfcc.shopper-product-search |
| Baskets | sfcc.shopper-baskets-orders.rw |
| Orders | sfcc.shopper-baskets-orders |
| Customers | sfcc.shopper-customers.login, sfcc.shopper-myaccount.rw |
Retrieve product details, pricing, and availability.
// Get product by ID
const product = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/product/shopper-products/v1/organizations/${orgId}/products/${productId}?siteId=${siteId}`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
// Get multiple products
const products = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/product/shopper-products/v1/organizations/${orgId}/products?ids=prod1,prod2,prod3&siteId=${siteId}`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
Product search and suggestions.
// Search products
const results = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/search/shopper-search/v1/organizations/${orgId}/product-search?siteId=${siteId}&q=shirt&limit=25`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
// Get search suggestions
const suggestions = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/search/shopper-search/v1/organizations/${orgId}/search-suggestions?siteId=${siteId}&q=shi`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
Create and manage shopping carts. See Checkout Flow Reference for the complete flow.
// Create basket
const basket = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/checkout/shopper-baskets/v1/organizations/${orgId}/baskets?siteId=${siteId}`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({})
}
).then(r => r.json());
// Add item to basket
await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/checkout/shopper-baskets/v1/organizations/${orgId}/baskets/${basketId}/items?siteId=${siteId}`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify([{
productId: '25518823M',
quantity: 1
}])
}
);
Submit orders and retrieve order history.
// Create order from basket
const order = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/checkout/shopper-orders/v1/organizations/${orgId}/orders?siteId=${siteId}`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
basketId: basket.basketId
})
}
).then(r => r.json());
The POST does not finish the order. SCAPI creates the order in
CREATEDstatus — payment is not authorized and the order is not placed by this call. A server-sidedw.ocapi.shop.order.afterPOSThook is responsible for authorizing payment and advancing the order toNEW(OrderMgr.placeOrder) orFAILED(OrderMgr.failOrder). Without that hook the order is stranded inCREATED. If your headless checkout "succeeds" but the order never appears as placed (or never fails visibly), this is almost always the missing piece — see the canonical example in b2c-hooks › Order afterPOST and the order lifecycle in b2c-ordering. Confirm current hook details withb2c docs read commerce-api/hook-method-details.
Customer registration, login, and account management.
// Get customer profile (registered shopper)
const customer = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/customer/shopper-customers/v1/organizations/${orgId}/customers/${customerId}?siteId=${siteId}`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
Maintain personalization state across requests using the Shopper Context API. The siteId query parameter is required for all Shopper Context operations.
// Set shopper context
await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/shopper/shopper-context/v1/organizations/${orgId}/shopper-context/${usid}?siteId=${siteId}`,
{
method: 'PUT',
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
effectiveDateTime: new Date().toISOString(),
sourceCode: 'SUMMER2024',
customerGroupIds: ['VIP', 'Loyalty']
})
}
);
| Environment | Limit |
|---|---|
| Non-production | 5,000 records |
| Production | 1,000,000 records |
Strategies to manage quota:
select ParameterReturn only needed fields to reduce response size:
// Only return specific product fields
const product = await fetch(
`https://${shortCode}.api.commercecloud.salesforce.com/product/shopper-products/v1/organizations/${orgId}/products/${productId}?siteId=${siteId}&select=(id,name,price,images)`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
).then(r => r.json());
expand CarefullyExpansions increase response time and reduce cache effectiveness:
// Expand availability (60-second cache TTL)
const product = await fetch(
`...?expand=availability,images,prices`,
{ headers: { 'Authorization': `Bearer ${accessToken}` } }
).then(r => r.json());
Consider separate requests instead of low-cache expansions.
Always enable HTTP compression in your client for faster responses.
See Common Patterns Reference for more optimization patterns.
Include correlation IDs for request tracking:
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${accessToken}`,
'correlation-id': crypto.randomUUID()
}
});
// Check response header for SCAPI-generated ID
const scapiCorrelationId = response.headers.get('sfdc_correlation_id');
Search Log Center with: externalID:({correlation-id})
Enable verbose logging for debugging:
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${accessToken}`,
'sfdc_verbose': 'true'
}
});
Find logs in Log Center under scapi.verbose category.
order.afterPOST hook that authorizes payment and places/fails a headless ordernpx claudepluginhub salesforcecommercecloud/b2c-developer-tooling --plugin b2cBuild headless commerce storefronts and API integrations with Salesforce SCAPI Shopper APIs (products, search, baskets, orders, customers), SLAS auth, Node.js SDK, rate limiting, pagination.
Build backend integrations syncing data between B2C Commerce and ERPs, OMS, WMS, or CRMs using SCAPI Admin APIs with OAuth client credentials.
Builds headless Shopify storefronts using the Storefront API and Cart API. Covers client setup, product queries, cart mutations, and Hydrogen integration.