Basic Usage
Include the script and use the custom element:
<!-- Include the web component script --> <script
src="/js/wallet-widget.js"></script> <!-- Use the custom
element --> <legion-wallet user-id="123"
api-key="your-api-key" base-url="https://your-domain.com"
theme="light" show-balance="true" show-history="true"
height="500"> </legion-wallet>
Attributes
-
user-id: User ID for wallet display (required)
-
api-key: API key for authenticated requests
-
base-url: Base URL for API calls (default:
current origin)
- theme: "light" or "dark" (default: light)
-
show-balance: Show wallet balance (default: true)
-
show-history: Show transaction history (default:
true)
-
height: Widget height in pixels (default: 500)
Theming Attributes
-
wallet-background-color: Container background
- wallet-text-color: Primary text color
- wallet-primary-color: Accent/button color
-
wallet-border-radius: Container border radius
- wallet-shadow: Container box shadow
- wallet-coupon-radius: Coupon card radius
- wallet-voucher-radius: Voucher card radius
Dark Theme Example
Use the dark theme with custom colors:
<legion-wallet user-id="123" api-key="your-api-key" theme="dark"
wallet-background-color="#1a1a2e" wallet-text-color="#eaeaea"
wallet-primary-color="#4cc9f0" wallet-border-radius="12px"
wallet-shadow="0 4px 20px rgba(0,0,0,0.3)">
</legion-wallet>
Custom Brand Colors
Match your brand identity:
<legion-wallet user-id="123" api-key="your-api-key"
wallet-primary-color="#e63946" wallet-coupon-bg-start="#ffd6a5"
wallet-coupon-bg-end="#ffadad" wallet-voucher-bg-start="#caffbf"
wallet-voucher-bg-end="#9bf6ff" wallet-button-radius="20px">
</legion-wallet>
Event Handling
Listen for wallet events:
const wallet = document.querySelector('legion-wallet'); // Wallet
data loaded successfully wallet.addEventListener('wallet-loaded',
(event) => { console.log('Wallet data:', event.detail.walletData);
}); // Error occurred while loading
wallet.addEventListener('wallet-error', (event) => {
console.error('Error:', event.detail.error); });
Dynamic Updates
Update attributes programmatically:
const wallet = document.querySelector('legion-wallet'); // Switch to
dark theme wallet.setAttribute('theme', 'dark'); // Update user
wallet.setAttribute('user-id', 'new-user-id'); // Change colors
dynamically wallet.setAttribute('wallet-primary-color', '#ff6b6b');
Responsive Container
Make the widget responsive:
<style> .wallet-container { width: 100%; max-width: 600px;
margin: 0 auto; } @media (max-width: 768px) { .wallet-container {
max-width: 100%; padding: 0 10px; } } </style> <div
class="wallet-container"> <legion-wallet user-id="123"
api-key="your-api-key" height="400"> </legion-wallet>
</div>
All Theming Options
Complete list of CSS variable attributes:
- wallet-background-color
- wallet-text-color
- wallet-secondary-text-color
- wallet-border-color
- wallet-border-radius
- wallet-padding
- wallet-shadow
- wallet-primary-color
- wallet-primary-hover
- wallet-tab-background
- wallet-tab-active-background
- wallet-tab-active-color
- wallet-tab-border-color
- wallet-tab-radius
- wallet-coupon-bg-start
- wallet-coupon-bg-end
- wallet-coupon-border-color
- wallet-coupon-radius
- wallet-coupon-shadow
- wallet-coupon-hover-shadow
- wallet-voucher-bg-start
- wallet-voucher-bg-mid
- wallet-voucher-bg-end
- wallet-voucher-accent-start
- wallet-voucher-accent-mid
- wallet-voucher-accent-end
- wallet-voucher-border-color
- wallet-voucher-radius
- wallet-voucher-shadow
- wallet-font-family
- wallet-title-size
- wallet-title-weight
- wallet-body-size
- wallet-meta-size
- wallet-badge-active-bg
- wallet-badge-active-color
- wallet-badge-expired-bg
- wallet-badge-expired-color
- wallet-badge-redeemed-bg
- wallet-badge-redeemed-color
- wallet-button-radius
- wallet-button-padding
- wallet-progress-bg
- wallet-progress-color
- wallet-progress-warning-color
- wallet-transition-duration
- wallet-hover-scale
- wallet-empty-icon-color
- wallet-empty-text-color
Error Handling
The widget handles various error states:
- Missing user-id attribute
- Invalid or expired API keys
- Network connectivity issues
- Server errors
Tip: Always provide error handling for production
use.
Browser Support
The web component works in all modern browsers that support:
- Custom Elements v1
- Shadow DOM v1
- ES6 Classes
Supported: Chrome 54+, Firefox 63+, Safari 10.1+,
Edge 79+