Skip to main content
Version: 2.0.0

sodexo-wallet-template

The sodexo-wallet-template component displays all user badges with their balances and provides access to transactions, deposits, and balance reload functionality. This template includes built-in API integration and i18n support.

Authentication Required

This template requires a valid authentication token to access wallet and badge data.

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 badge reload payment. Use :badgeId placeholder which will be replaced with actual badge ID

redirectPaymentUri Details​

The redirect URI is used after completing badge reload payment. The system automatically:

  1. Replaces :badgeId with the actual badge ID
  2. Adds action=reloadBadge query parameter

Example: If you provide https://myapp.com/wallet/:badgeId/transactions, after reloading badge badge-123, users return to https://myapp.com/wallet/badge-123/transactions?action=reloadBadge

Events​

EventTypeDescription
sodexoWalletTemplateTransactionsClickedCustomEvent<string>Emitted when transactions button is clicked. Returns badge ID. Recommended action: Navigate to transactions page
sodexoWalletTemplateDepositsClickedCustomEvent<string>Emitted when deposits button is clicked. Returns badge ID. Recommended action: Navigate to deposits page

Usage​

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

  <script>
    const element = document.querySelector('sodexo-wallet-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 transactions button click
    element.addEventListener('sodexoWalletTemplateTransactionsClicked', (event) => {
      const badgeId = event.detail;
      console.log('View transactions for badge:', badgeId);
      window.location.href = `/transactions/${badgeId}`;
    });

    // Handle deposits button click
    element.addEventListener('sodexoWalletTemplateDepositsClicked', (event) => {
      const badgeId = event.detail;
      console.log('View deposits for badge:', badgeId);
      window.location.href = `/deposits/${badgeId}`;
    });
  </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 wallet template:

  1. On sodexoWalletTemplateTransactionsClicked: Navigate to transactions page
const badgeId = event.detail;
navigate(`/transactions/${badgeId}`);
  1. On sodexoWalletTemplateDepositsClicked: Navigate to deposits page
const badgeId = event.detail;
navigate(`/deposits/${badgeId}`);