How to Integrate Retool with Salesforce Commerce Cloud

Salesforce Commerce Cloud API access requires registering an API client in Business Manager. Log in to Business Manager for your SFCC instance. Navigate to Administration → Global Preferences → API Client Management. If you do not see this option, your account may need administrator permissions — contact your SFCC administrator. Click Add a Client to register a new API client for your Retool integration. Fill in the Client Name (e.g., Retool Integration), select the appropriate API roles and scopes that match your use case. For an order management dashboard, you need at minimum: sfcc.orders (read order data), sfcc.orders.rw (read/write order data for status updates), sfcc.customers (read customer data), and sfcc.products (read product catalog). After saving, the system generates a Client ID and Client Secret — copy both immediately. Also note your SFCC organization configuration details: the Organization ID (begins with 'org' or 'f_ecom'), the Site ID (the specific storefront site you are integrating with), and the Short Code (a 4-8 character code visible in your instance URL). For SCAPI (recommended), the base URL pattern is https://{shortCode}.api.commercecloud.salesforce.com and the organization is included in each API path as /organizations/{organizationId}. For OCAPI, the URL pattern uses your realm directly. Store the Client ID, Client Secret, Organization ID, Site ID, and Short Code as Retool configuration variables — all marked as secret.

SFCC uses OAuth 2.0 client credentials flow. Before any SCAPI or OCAPI call, you must exchange your client credentials for an access token. For SCAPI, the token endpoint is https://account.demandware.com/dwsso/oauth2/access_token or https://{shortCode}.api.commercecloud.salesforce.com/shopper/auth/v1/organizations/{organizationId}/oauth2/token depending on the API version. Create a dedicated Retool REST API Resource named SFCC Token for the auth endpoint. Base URL: https://account.demandware.com. Add an Authorization header with value Basic {{ config.SFCC_BASIC_AUTH }} where SFCC_BASIC_AUTH is the Base64-encoded string of 'client_id:client_secret'. Use a JavaScript query to compute this: btoa(clientId + ':' + clientSecret) and store the result as the SFCC_BASIC_AUTH configuration variable. Add a Content-Type header: application/x-www-form-urlencoded (required for the token request). Create a query on the token Resource: Method POST, Path /dwsso/oauth2/access_token, Body type Form, with fields: grant_type = client_credentials. Run the query. SFCC returns a JSON object with access_token (a JWT string) and expires_in (typically 1800 seconds = 30 minutes — shorter than most OAuth providers). SFCC tokens expire in 30 minutes, so token refresh is more critical than for other APIs. Create a Retool Workflow that runs every 25 minutes on a schedule to refresh the token automatically and update the SFCC_ACCESS_TOKEN configuration variable.

1// JavaScript query to compute Basic Auth for SFCC token request
2const clientId = retoolContext.configVars.SFCC_CLIENT_ID;
3const clientSecret = retoolContext.configVars.SFCC_CLIENT_SECRET;
4const basicAuth = btoa(clientId + ':' + clientSecret);
5
6// Store the result as SFCC_BASIC_AUTH configuration variable
7return {
8  basic_auth: basicAuth,
9  // Confirm the format is correct by checking that decoding gives back
10  // your client_id:client_secret
11  decoded_check: atob(basicAuth)
12};

Create the main SFCC API REST Resource in Retool. Click Add Resource → REST API. Name it Salesforce Commerce Cloud API. Base URL for SCAPI: https://{{ config.SFCC_SHORT_CODE }}.api.commercecloud.salesforce.com. In the Headers section, add Authorization with value Bearer {{ config.SFCC_ACCESS_TOKEN }}. Add Content-Type: application/json. Click Save. Now create your first meaningful query — order search. In a Retool app, create a new query using the SFCC API Resource. Method GET. For SCAPI orders, the path pattern is /order/shopper-orders/v1/organizations/{{ config.SFCC_ORG_ID }}/orders/{{ orderNumberInput.value }}. This retrieves a specific order by order number. For searching orders by date range or customer email (not available in all SFCC API versions as a single endpoint), you may need to use the OCAPI Data API at /s/-/dw/data/v24_3/orders endpoint with query parameters, or combine a customer search with order lookup. Add URL parameters: siteId: {{ config.SFCC_SITE_ID }}. Run a test query with a known order number from Business Manager to confirm authentication works. The response includes order details: order_no, status, order_total, currency, billing_address, shipping_address, product_items (array of line items), payment_instruments, and shipments.

1// JavaScript transformer for SFCC order detail response
2const order = data || {};
3const items = order.product_items || [];
4const shipments = order.shipments || [];
5const payments = order.payment_instruments || [];
6
7return {
8  order_number: order.order_no || '',
9  status: order.status || '',
10  order_date: order.creation_date || '',
11  order_total: order.order_total
12    ? `${order.currency_mnemonic || order.currency} ${parseFloat(order.order_total).toFixed(2)}`
13    : 'N/A',
14  currency: order.currency_mnemonic || order.currency || 'USD',
15  customer_name: order.customer_info?.customer_name || '',
16  customer_email: order.customer_info?.email || '',
17  customer_no: order.customer_info?.customer_no || '',
18  item_count: items.length,
19  items_summary: items.map(item =>
20    `${item.quantity}x ${item.product_name} (${item.product_id})`
21  ).join('; '),
22  shipping_method: shipments[0]?.shipping_method?.name || '',
23  shipping_status: shipments[0]?.shipment_status || 'Not shipped',
24  tracking_number: shipments[0]?.tracking_number || '',
25  payment_method: payments[0]?.payment_card?.card_type
26    || payments[0]?.payment_method_id
27    || 'Unknown',
28  payment_last_four: payments[0]?.payment_card?.number_last_digits || '',
29  channel_type: order.channel_type || '',
30  tax_total: order.tax_total
31    ? parseFloat(order.tax_total).toFixed(2)
32    : '0.00'
33};

With the order query working, build the order management UI. At the top of the canvas, add an order search area: a Text Input named orderNumberInput labeled Order Number, a Text Input for customer email lookup (trigger a customer search query that returns customer_no, then uses that to find orders), and a Button labeled Search Order. Below the search area, organize the content in two columns. Left column — Order Summary: display Stat components for order total, item count, and shipping status. Add a Tag component showing order status with color coding: green for Completed/Shipped, yellow for Processing, red for Cancelled. Add shipment tracking information including tracking number (with a clickable link to the carrier tracking page) and shipment status. Right column — Line Items Table: drag a Table component and bind it to a JavaScript query that extracts the product_items array from the order response. Columns: product ID, product name, quantity, unit price, and line item total. Below both columns, add a Payment Details section showing payment method, masked card number, and payment status. Add an Actions section at the bottom with buttons that trigger write operations: Return Order (POST to return endpoint), Update Status (PATCH to the order status endpoint), and Add Promotion Code (POST to coupon code endpoint). Wire each action button to a confirmation modal and a POST/PATCH query on the SFCC Resource. Add event handlers on success of each action to re-run the order lookup query and refresh all displayed data.

1// JavaScript query to extract line items from order response
2// References the main order lookup query
3const order = getOrder.data || {};
4const items = order.product_items
5  || getOrderRaw.data?.product_items
6  || [];
7
8return items.map(item => ({
9  product_id: item.product_id || '',
10  product_name: item.product_name || item.item_text || '',
11  sku: item.item_id || '',
12  quantity: item.quantity || 0,
13  unit_price: item.price != null
14    ? `${order.currency} ${parseFloat(item.price).toFixed(2)}`
15    : 'N/A',
16  total_price: item.price_after_order_discount != null
17    ? `${order.currency} ${parseFloat(item.price_after_order_discount).toFixed(2)}`
18    : item.adjusted_price != null
19    ? `${order.currency} ${parseFloat(item.adjusted_price).toFixed(2)}`
20    : 'N/A',
21  gift: item.gift === true ? 'Yes' : 'No',
22  position: item.position || 0
23}));

Extend the dashboard with product catalog access. Create a query at /product/shopper-products/v1/organizations/{{ config.SFCC_ORG_ID }}/products/{{ productIdInput.value }}?siteId={{ config.SFCC_SITE_ID }} for individual product lookups. For catalog browsing, use the OCAPI Data API at /s/-/dw/data/v24_3/catalogs/{{ catalogId }}/categories/{{ categoryId }}/products for category-level product listing. Build a Product Search section in the dashboard using a text input for product ID or name and a query that returns matching products with inventory levels, prices, and availability status. Display inventory per variant (size, color, etc.) in a nested Table. For Commerce-CRM integration, create a second Resource connecting to Salesforce CRM using the Salesforce native connector in Retool (Resources → Add Resource → Salesforce). Configure with your Salesforce org credentials. Create a JavaScript query that takes the customer email from the SFCC order and queries the Salesforce CRM for matching Contact or Lead records. Display the Salesforce account manager, customer segment, and open support cases alongside the SFCC order history. This combined view — commerce operations + CRM context — in a single Retool panel is the primary architectural advantage for organizations running both SFCC and Salesforce CRM. For enterprise teams building comprehensive SFCC + Salesforce CRM integration layers with custom Workflows for order synchronization, inventory alerts, and cross-system data reconciliation, RapidDev can architect and implement the full Retool solution.

1// SCAPI product search query configuration
2// Method: GET
3// Path: /product/shopper-products/v1/organizations/{{ config.SFCC_ORG_ID }}/products
4// URL Parameters:
5{
6  "siteId": "{{ config.SFCC_SITE_ID }}",
7  "ids": "{{ productIdInput.value }}",
8  "allImages": "false",
9  "perPricebook": "false",
10  "expand": "availability,promotions,options,prices,variations"
11}
12
13// JavaScript transformer for product response
14const product = data?.data?.[0] || data || {};
15const variants = product.variants || [];
16const prices = product.price_ranges || product.price || {};
17
18return {
19  product_id: product.id || '',
20  name: product.name || '',
21  description: product.short_description || '',
22  brand: product.brand || '',
23  primary_category: product.primary_category_id || '',
24  status: product.online_flag ? 'Active' : 'Inactive',
25  price: prices.min_price
26    ? `$${parseFloat(prices.min_price).toFixed(2)}`
27    : product.price
28    ? `$${parseFloat(product.price).toFixed(2)}`
29    : 'N/A',
30  variant_count: variants.length,
31  in_stock: product.inventory?.orderable !== false
32};