TunisiaShip Widget — Playground

Trois modes : tracking, rates, checkout. Tous appellent les endpoints publics /v1/tunisiaship/widget/* — aucun token côté navigateur.

1. Tracking — déclaratif

2. Rates — déclaratif

3. Checkout — déclaratif

Mode programmatique

// Aucune authentification : les endpoints public widget sont
// allow-listés via l'origine du site (config opérateur).
TunisiaShip.tracking({
  container: '#programmatic-tracking',
  trackingNumber: '619437863072',
  carrierName: 'droppex',
  autoRefresh: true,
});

Configuration globale & theming

window.TunisiaShipConfig = {
  apiUrl: 'https://api.ship.goodvibes.tn',
  locale: 'fr',
  theme: { primary: '#0066cc', mode: 'auto' },  // auto | light | dark
};

Événements

// Programmatique
const inst = TunisiaShip.checkout({ container: '#checkout', shipper: ..., recipient: ..., parcels: ... });
inst.on('rate-selected', (rate) => console.log('selected', rate));
inst.on('rate-purchased', (rate) => console.log('purchased', rate));

// Déclaratif (CustomEvent)
document.querySelector('#checkout').addEventListener('tunisiaship:rate-purchased', (e) => {
  fetch('/checkout/shipping', { method: 'POST', body: JSON.stringify(e.detail) });
});