How to Integrate Retool with Shift4Shop (formerly 3dcart)

Go to the Resources tab in Retool — click Resources in the left sidebar from the home page or use the top navigation menu. Click the blue Add Resource button in the upper right. In the resource type selector, search for 'REST' and select REST API to open the configuration form. Fill in the resource configuration: - Name: Enter 'Shift4Shop API' or 'Shift4Shop Production' to identify this resource clearly. - Base URL: Enter the Shift4Shop API base URL. Despite the rebrand, the API endpoint domain is still https://apirest.3dcart.com. The path for the REST API v2 endpoints is /3dCartWebAPI/v2 — you can include this in the base URL so your queries only need to specify the resource path (e.g., /Orders). For authentication, Shift4Shop uses two header-based credentials for all requests: 1. A store-specific Private Token passed as the SecureURL header 2. A public API key (available from Shift4Shop's developer program) passed as the PrivateKey header In the Headers section of the resource configuration, add two default headers: - Key: PrivateKey | Value: {{ retoolContext.configVars.SHIFT4SHOP_PRIVATE_KEY }} - Key: SecureURL | Value: your store's base URL (e.g., https://yourstore.3dcart.com) - Key: Content-Type | Value: application/json - Key: Accept | Value: application/json Before saving, go to Settings → Configuration Variables in Retool, click Add Variable, and create SHIFT4SHOP_PRIVATE_KEY as a secret variable containing your Private Token. Click Save to create the resource.

Create your first data query to retrieve orders from Shift4Shop. In your Retool app, click + New in the query panel at the bottom of the screen. Select your Shift4Shop API resource. Set the HTTP Method to GET and the URL path to /Orders. In the URL Parameters section, add pagination and filtering parameters that reference components in your app: - limit: {{ select_pageSize.value || 100 }} — how many orders to return - offset: {{ (table_orders.pageIndex || 0) * 100 }} — for pagination - datestart: {{ dateRange.start ? new Date(dateRange.start).toISOString().split('T')[0] : '' }} - dateend: {{ dateRange.end ? new Date(dateRange.end).toISOString().split('T')[0] : '' }} - status: {{ statusSelect.value || '' }} Set the query to Run this query automatically when inputs change and trigger On page load. Add a JavaScript transformer to the query to reshape the response data — Shift4Shop returns an array of order objects directly: Drag a Table component onto the canvas and set its data source to {{ ordersQuery.data }}. Map columns to: order_id, customer_email, status, total, and order_date. Add a DateRange picker component and a Select component for order status above the Table. The query will re-run automatically when filters change. To make the order status filter options accurate, set the Select component's values to Shift4Shop's order status codes: New, Pending, Processing, Shipped, Partially Shipped, Cancelled, Hold.

1// JavaScript transformer to reshape Shift4Shop orders response
2const orders = Array.isArray(data) ? data : [];
3return orders.map(order => ({
4  order_id: order.OrderID,
5  invoice_no: order.InvoiceNumber || '',
6  customer_name: `${order.BillingFirstName || ''} ${order.BillingLastName || ''}`.trim(),
7  customer_email: order.BillingEmail || '',
8  status: order.OrderStatus,
9  total: parseFloat(order.OrderAmount || 0).toFixed(2),
10  order_date: order.OrderDate ? order.OrderDate.split('T')[0] : '',
11  ship_date: order.ShipDate ? order.ShipDate.split('T')[0] : 'Not shipped',
12  payment_method: order.PaymentMethod || ''
13}));

Create a second query for product and inventory management. Click + New in the query panel and select your Shift4Shop API resource. Set the method to GET and the path to /Products. Add URL parameters for filtering and pagination: - limit: 200 (Shift4Shop allows up to 200 per request) - offset: {{ (productsTable.pageIndex || 0) * 200 }} - categoryid: {{ categorySelect.value || '' }} — filter by product category - stockstatus: {{ stockFilter.value || '' }} — filter by in-stock / out-of-stock Add a JavaScript transformer to flatten the response and calculate a low-stock flag. Drag a Table component into a second tab or section of your app, named 'Inventory'. Set the data source to {{ productsQuery.data }}. Enable inline editing on the Table for the price and stock_quantity columns. In the Table's Inspector, toggle Allow users to edit this table and set the Save Action to run a PUT query. Create the PUT query: - Method: PUT - Path: /Products/{{ productsTable.selectedRow.product_id }} - Body: { 'Price': {{ productsTable.changesetArray[0]?.price }}, 'Stock': {{ productsTable.changesetArray[0]?.stock_quantity }} } In the Table's Inspector, set the Save action to trigger this PUT query. Add an On success event handler that refreshes the products query and shows a 'Inventory updated' notification. This lets your merchandising team make stock and price changes directly in the Retool table without touching the Shift4Shop admin interface.

1// JavaScript transformer for Shift4Shop products
2const products = Array.isArray(data) ? data : [];
3return products.map(p => ({
4  product_id: p.CatalogID,
5  sku: p.SKUInfo?.SKU || p.CatalogID,
6  name: p.Name,
7  price: parseFloat(p.Price || 0).toFixed(2),
8  stock_quantity: p.Stock || 0,
9  category: p.CategoryID || '',
10  status: p.Hide === 'Y' ? 'Hidden' : 'Active',
11  low_stock: (p.Stock || 0) < 10
12}));

Add the ability to update order statuses directly from your Retool order management panel. This is one of the most common operational tasks for Shift4Shop teams — moving orders from 'Processing' to 'Shipped' or 'Cancelled' in bulk. First, add a Select component above the orders Table labeled 'Update status to'. Set its values to the Shift4Shop order statuses: Processing, Shipped, Partially Shipped, Cancelled, On Hold. Add a Button labeled 'Apply to Selected Rows'. Create a JavaScript query that iterates over the Table's selected rows and sends a PUT request for each one: - In the query editor, select JavaScript as the query type - Write a loop that triggers a resource query for each selected order row Because Shift4Shop does not have a bulk update endpoint, you will call the update endpoint individually for each selected order. Use Promise.all() to parallelize the requests for speed. The update endpoint is PUT /Orders/{OrderID} with a body containing the new OrderStatus value. Create the underlying PUT resource query first: method PUT, path /Orders/{{ currentOrderId }}, body { 'OrderStatus': '{{ newStatus }}' }. Reference this in your JavaScript loop. In the Apply button's event handler, chain: first run the status update JavaScript query, then on success run the orders query to refresh the table, then show a notification: '{{ selectedRows.length }} orders updated to {{ statusSelect.value }}'. For compliance tracking, add an On success handler that also inserts a row into your internal PostgreSQL audit table with the Retool user's email, timestamp, affected order IDs, and the new status. This creates an audit trail outside of Shift4Shop.

1// JavaScript query: bulk update Shift4Shop order statuses
2const selectedOrders = ordersTable.selectedRows;
3const newStatus = newStatusSelect.value;
4
5if (!selectedOrders || selectedOrders.length === 0) {
6  return { error: 'No orders selected' };
7}
8
9if (!newStatus) {
10  return { error: 'No status selected' };
11}
12
13// Trigger update for each selected order in parallel
14const updatePromises = selectedOrders.map(order =>
15  updateOrderStatusQuery.trigger({
16    additionalScope: {
17      currentOrderId: order.order_id,
18      newStatus: newStatus
19    }
20  })
21);
22
23const results = await Promise.all(updatePromises);
24return { updated: results.length, orderIds: selectedOrders.map(o => o.order_id) };

Build a customer service view that lets support agents quickly look up a customer's account and see their complete order history from Shift4Shop. This eliminates the need for agents to use the Shift4Shop admin for routine customer inquiries. Drag a TextInput component onto the canvas labeled 'Search customer by email or name'. Create a query using your Shift4Shop API resource, method GET, path /Customers, URL parameter email: {{ customerSearch.value }} (Shift4Shop supports filtering customers by email). Set this query to Run when inputs change with a 500ms debounce to avoid firing on every keystroke. Drag a Table component below the search input and bind it to {{ customersQuery.data }}. Display customer ID, name, email, phone, and total lifetime orders. In the Table's event handlers, add an On Row Click handler that triggers a second query to fetch that customer's orders: GET /Orders with the customerid URL parameter set to {{ customersTable.selectedRow.customer_id }}. Add a second Table below the first (or in a right-side panel using a Container component with a horizontal layout) to display the orders for the selected customer. Bind this to {{ customerOrdersQuery.data }}. Finally, add a TextArea component below the customer orders table labeled 'Support notes'. Add a Button labeled 'Save Note'. Create a PostgreSQL query (if you have a PostgreSQL resource) that inserts a note with the Retool user's email, timestamp, Shift4Shop customer ID, and the note text. This creates a lightweight CRM layer on top of Shift4Shop data that is stored in your own database and visible to all agents in the Retool app.

1// JavaScript transformer for customer search results
2const customers = Array.isArray(data) ? data : [];
3return customers.map(c => ({
4  customer_id: c.CustomerID,
5  name: `${c.BillingFirstName || ''} ${c.BillingLastName || ''}`.trim(),
6  email: c.Email || '',
7  phone: c.Phone || '',
8  company: c.BillingCompany || '',
9  total_orders: c.OrderCount || 0,
10  date_joined: c.CustomerSince ? c.CustomerSince.split('T')[0] : ''
11}));