Skip to main content
Version: 2.0.0

sodexo-payment-cc-template

The sodexo-payment-cc-template component handles credit card payment processing for orders and badge reloads. This template includes built-in API integration, i18n, cart management, and theme provider.

Payment Required

This template must be used for badge or credit card payment transactions. It handles the payment gateway integration and redirects.

Authentication Required

This template requires a valid authentication token to process payments.

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 payment completion. Query parameter action=createOrder will be added

redirectPaymentUri Details​

The redirect URI is where users return after completing payment in the gateway. The system automatically adds an action query parameter:

  • action=createOrder - After order payment

Example: If you provide https://myapp.com/orders, users return to https://myapp.com/orders?action=createOrder

Events​

EventTypeDescription
sodexoPaymentCcTemplateOrderCreatedCustomEvent<string>Emitted when user chooses badge payment (no gateway needed). Returns order ID. Recommended action: Navigate to orders page
sodexoPaymentCcUpdateOrderClickedCustomEvent<void>Emitted when update order button is clicked. Recommended action: Navigate back to cart
sodexoPaymentCcCGVClickedCustomEvent<void>Emitted when terms and conditions link is clicked. Recommended action: Navigate to legal page

Usage​

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

  <script>
    const element = document.querySelector('sodexo-payment-cc-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 badge payment (immediate order creation)
    element.addEventListener('sodexoPaymentCcTemplateOrderCreated', (event) => {
      const orderId = event.detail;
      console.log('Order created with badge payment:', orderId);
      
      // Redirect to orders page
      window.location.href = `/orders?orderId=${orderId}`;
    });

    // Handle update order button
    element.addEventListener('sodexoPaymentCcUpdateOrderClicked', () => {
      console.log('User wants to update order');
      // Go back to cart
      window.location.href = '/cart';
    });

    // Handle CGV/terms link
    element.addEventListener('sodexoPaymentCcCGVClicked', () => {
      console.log('CGV clicked');
      // Open terms in new tab
      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 payment flow and navigation: