Skip to main content
Version: 3.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.

Properties​

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

  <script>
    const element = document.querySelector('sodexo-wallet-template');

    // 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}`);