Skip to main content

Bundle Pricing Strategies

Learn how bundle pricing works in Elastic Path, how to fetch updated prices as users configure bundles, and best practices for displaying prices.

Prerequisites​

  • Bundle product data from Get Bundle
  • Component products for dynamic bundles
  • Understanding of bundle configuration structure

Pricing Models​

Elastic Path supports two primary bundle pricing models:

Explicit Pricing​

  • Bundle has a predetermined price set in PXM
  • Price doesn't change with component selection
  • Ideal for value bundles and promotional offers

Auto/Cumulative Pricing​

  • Price calculated from selected components
  • Changes dynamically with configuration
  • Perfect for build-your-own bundles

Pricing Data Structure​

Understanding how bundle pricing is structured in the API response:

Explicit Pricing​

Bundle has a fixed price set in PXM:

{
  attributes: {
    price: [{
      amount: 99900,
      currency: "USD",
      includes_tax: false
    }]
  },
  meta: {
    display_price: {
      without_tax: {
        amount: 99900,
        currency: "USD",
        formatted: "$999.00"
      }
    }
  }
}

Auto/Cumulative Pricing​

Price calculated from selected components:

{
  attributes: {
    // No price array or empty
  },
  meta: {
    display_price: {
      without_tax: {
        amount: 0,  // Updates based on configuration
        currency: "USD",
        formatted: "$0.00"
      }
    }
  }
}

Working with Bundle Pricing​

When working with bundles, the pricing is automatically handled by the API. Simply configure the bundle with selected options and the returned product will have the correct pricing, regardless of whether it uses explicit or auto pricing.

import { configureByContextProduct } from '@epcc-sdk/sdks-shopper';

async function calculateDynamicPrice(
  bundleId: string,
  selectedOptions: BundleConfiguration["selected_options"]
) {
  try {
    // Configure bundle to get updated product with new pricing
    const response = await configureByContextProduct({
      path: { product_id: bundleId },
      body: {
        data: {
          selected_options: selectedOptions
        }
      }
    });
    
    // API returns full product data with updated pricing
    const configuredProduct = response.data?.data;
    const price = configuredProduct?.meta?.display_price?.without_tax;
    
    return {
      amount: price?.amount,
      formatted: price?.formatted,
      currency: price?.currency,
      // Also return the full product if needed for UI updates
      product: configuredProduct
    };
  } catch (error) {
    console.error('Price calculation failed:', error);
    return null;
  }
}

Price Display Implementation​

Use the configured product's price data for display:

function displayBundlePrice(configuredProduct: Product) {
  // The API returns pricing in meta.display_price
  const price = configuredProduct?.meta?.display_price?.without_tax;
  
  if (!price?.formatted) {
    return <span>Configure bundle to see price</span>;
  }
  
  return <span>{price.formatted}</span>;
}

Handling Price Updates​

Show loading states while prices update:

function BundleConfigurator({ bundle, componentProducts }) {
  const [isUpdatingPrice, setIsUpdatingPrice] = useState(false);
  const [configuredProduct, setConfiguredProduct] = useState(bundle);
  
  const handleSelectionChange = async (newSelection) => {
    setIsUpdatingPrice(true);
    
    try {
      const result = await calculateDynamicPrice(bundle.id, newSelection);
      if (result?.product) {
        setConfiguredProduct(result.product);
      }
    } finally {
      setIsUpdatingPrice(false);
    }
  };
  
  const currentPrice = configuredProduct?.meta?.display_price?.without_tax?.formatted;
  
  return (
    <>
      <div>Price: {isUpdatingPrice ? "Updating..." : currentPrice}</div>
      {/* Component selection UI */}
    </>
  );
}

Performance Tips​

  • Show loading states during price updates to improve perceived performance
  • Debounce rapid selections to avoid excessive API calls
  • Update prices through the API rather than calculating locally
  • Use the configured product response which includes all pricing information

Best Practices​

  1. Use API for pricing - Always use configureByContextProduct for accurate pricing
  2. Handle loading states - Show clear feedback while prices update
  3. Display formatted prices - Use the meta.display_price from the API response
  4. Error handling - Gracefully handle API failures during configuration
  5. Optimize re-renders - Use React.memo for price components to avoid unnecessary updates

Common Issues​

  • Price not updating: Ensure selected options format matches API requirements
  • Wrong currency: Check price book configuration and currency settings
  • Missing prices: Verify component products have prices in the correct currency
  • Stale prices: Clear any cached price data when selections change

Next Steps​

References​