Skip to main content

Provide Shipping Options

This guide explains how to implement flexible shipping options in your Elastic Path storefront using custom cart items. Custom cart items allow you to conveniently add shipping fees, delivery options, and special services that don't exist as products in your catalog at checkout.

Understanding Custom Cart Items for Shipping​

Custom cart items are perfect for shipping because they allow you to:

  • Add shipping fees based on location, weight, or delivery speed, which may be specific to each cart
  • Offer special delivery services (express, overnight, white-glove)
  • Apply dynamic shipping costs from third-party APIs
warning

Custom Cart Items can be applied using an implicit token, so you should validate the contents of your orders.

Setup​

Install and configure the Shopper SDK:

npm install @epcc-sdk/sdks-shopper

Basic Shipping Implementation​

Apply Shipping to a Cart​

import { addCustomItemToCart, getCartId } from "@epcc-sdk/sdks-shopper";

async function addStandardShipping() {
  try {
    const cartId = getCartId();

    // You could also call out to a third party shipping API to get the shipping options
    const shippingItem = {
      type: "custom_item",
      name: "Standard Shipping",
      sku: "SHIP-STANDARD",
      description: "5-7 business days delivery",
      quantity: 1,
      price: {
        amount: 500,
      },
    };

    const response = await addCustomItemToCart({
      path: {
        cartID: cartId,
      },
      body: {
        data: shippingItem,
      },
    });

    console.log("Standard shipping added:", response.data);
    return response.data;
  } catch (error) {
    console.error("Failed to add shipping:", error);
    throw error;
  }
}

Handle Shipping Updates​

When users change shipping options, remove the old shipping item:

import { removeCartItem } from "@epcc-sdk/sdks-shopper";

async function updateShippingOption(newShippingOption, currentShippingItemId) {
  try {
    const cartId = getCartId();

    // Remove current shipping
    if (currentShippingItemId) {
      await removeCartItem({
        path: {
          cartID: cartId,
          cartItemID: currentShippingItemId,
        },
      });
    }

    // Add new shipping
    await addCustomItemToCart({
      path: {
        cartID: cartId,
      },
      body: {
        data: newShippingOption,
      },
    });
  } catch (error) {
    console.error("Failed to update shipping:", error);
  }
}

Next Steps​