Skip to main content
Version: 3.0.0

sodexo-cart-template

The sodexo-cart-template component contains all cart and checkout features.

Properties​

PropertyHTML AttributeTypeDefaultDescription
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>
  <sodexo-cart-template redirect-payment-uri="https://myapp.com/orders"></sodexo-cart-template>

  <script>
    const element = document.querySelector('sodexo-cart-template');
    
    // 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>

</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");