Skip to main content
Version: 2.0.0

sodexo-cart-template

The sodexo-cart-template component contains all cart and checkout features. This template includes built-in API integration, i18n, cart management, and theme provider.

Authentication Required

This template requires a valid authentication token to process cart and payment operations.

Properties​

PropertyHTML AttributeTypeDefaultDescription
themethemeThemeDefault Sodexo themeCustomization variables for Sodexo components theme
apiKeyapi-keystring-X-API-key for Sodexo API
tokentokenstring-Authentication token for Sodexo API
redirectPaymentUriredirect-payment-uristring-URI for redirecting after card payment (badge reload or order payment). Use :badgeId placeholder for badge reload

redirectPaymentUri Details​

The redirect URI is used after completing card payment operations. The system automatically adds an action query parameter to indicate the operation type:

  • action=reloadBadge - After badge reload
  • action=createOrder - After order payment

Badge reload example: If you provide https://myapp.com/wallet/:badgeId, it becomes https://myapp.com/wallet/12345?action=reloadBadge

Order payment example: https://myapp.com/orders?action=createOrder

Events​

EventTypeDescription
sodexoCartTemplateOrderCreatedCustomEvent<string>Emitted with order ID when order is created (on-site payment only). Recommended action: Navigate to orders page
sodexoCartTemplatePaymentCcRequiredCustomEvent<void>Emitted when credit card payment is required. Recommended action: Navigate to payment page
sodexoCartTemplateCGVClickedCustomEvent<void>Emitted when terms and conditions link is clicked. Recommended action: Navigate to legal page

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-cart-template
    api-key="your-api-key"
    token="user-auth-token"
    redirect-payment-uri="https://myapp.com/orders"
  ></sodexo-cart-template>

  <script>
    const element = document.querySelector('sodexo-cart-template');
    
    // Apply custom theme
    element.theme = {
      '--sodexo-primary-color': '#283897',
      '--sodexo-primary-text-color': '#283897',
      '--sodexo-primary-background-color': '#f7f8ff',
      '--sodexo-font-family': 'Open Sans',
    };

    // Handle order creation (on-site payment)
    element.addEventListener('sodexoCartTemplateOrderCreated', (event) => {
      const orderId = event.detail;
      console.log('Order created:', orderId);
      // Redirect to orders page
      window.location.href = `/orders?orderId=${orderId}`;
    });

    // Handle credit card payment required
    element.addEventListener('sodexoCartTemplatePaymentCcRequired', () => {
      window.location.href = '/payment';
    });

    // Handle CGV/terms link click
    element.addEventListener('sodexoCartTemplateCGVClicked', () => {
      console.log('CGV clicked');
      // Open terms in new tab or navigate
      window.open('/legal/terms', '_blank');
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

  • In HTML: Use kebab-case (e.g., api-key, redirect-payment-uri)
  • In JavaScript: Use camelCase (e.g., apiKey, redirectPaymentUri)
  • Events: Can only be handled in JavaScript, not in HTML attributes

This diagram shows the recommended navigation flow for the cart template:

  1. On sodexoCartTemplateOrderCreated: Navigate to orders page (on-site payment)
const orderId = event.detail;
navigate(`/orders?orderId=${orderId}`);
  1. On sodexoCartTemplatePaymentCcRequired: Navigate to payment page
navigate("/payment");
  1. On sodexoCartTemplateCGVClicked: Open terms and conditions
window.open("/legal/terms", "_blank");