sodexo-transactions-template
The sodexo-transactions-template component displays all transactions for a specific badge. This template includes built-in API integration, i18n, cart management, and theme provider.
Authentication Required
This template requires a valid authentication token to access transaction data.
Properties
| Property | HTML Attribute | Type | Default | Description |
|---|---|---|---|---|
theme | theme | Theme | Default Sodexo theme | Customization variables for Sodexo components theme |
apiKey | api-key | string | - | X-API-key for Sodexo API |
token | token | string | - | Authentication token for Sodexo API |
badgeId | badge-id | string | - | Badge identifier to display transactions for |
Events
| Event | Type | Description |
|---|---|---|
downloadFile | CustomEvent<DownloadFileData> | Emitted when user wants to download a receipt. Provides base64 data for native mobile apps. Note: Listen on window object, not the component |
Event Details
DownloadFileData
interface DownloadFileData {
base64Data: string; // Base64 encoded file data
fileName: string; // Suggested filename (e.g., "receipt-12345.pdf")
mimeType: string; // MIME type (e.g., "application/pdf")
}
Mobile Apps Only
The downloadFile event is specifically designed for native mobile applications (Android/iOS). Web browsers handle downloads automatically through standard browser APIs.
Usage
- HTML (Web)
<!DOCTYPE html>
<html>
<body>
<sodexo-transactions-template
api-key="your-api-key"
token="user-auth-token"
badge-id="badge-123"
></sodexo-transactions-template>
<script>
const element = document.querySelector('sodexo-transactions-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',
};
</script>
</body>
</html>
Property Naming Convention
Naming Syntax
When using properties:
- In HTML: Use kebab-case (e.g.,
api-key,badge-id) - In JavaScript: Use camelCase (e.g.,
apiKey,badgeId) - Events: Can only be handled in JavaScript, not in HTML attributes