EnglishParler à l'équipe

Elements

Comme les Elements d’un prestataire de paiement : des morceaux de notre boutique qui s’affichent dans votre page, prennent sa police et ses couleurs, et envoient le voyageur vers notre paiement hébergé. Pas d’iframe.

Essayer la démoRéférence de l’API

Essayez les Elements

Choisissez une marque fictive, sa couleur, ses angles et sa police : les éléments suivent, dans une page qui ressemble à celle du partenaire. Données de démonstration, aucun compte nécessaire.

Marque
Couleur
Angles
Police
Langue des éléments

Le même rendu dans votre page

Terudo({
  key: 'pk_live_…',
  locale: 'fr',
  appearance: {
    color: '#0a5b8a',
    radius: '14px',
    font: 'inherit',
  },
});
Vous avez une clé de test ?

Collez une clé publiable de test (pk_test_…) pour voir les éléments avec votre propre catalogue et vos réglages. Les clés se créent dans l’espace partenaire, onglet Développeurs.

Atlas Voyages

Votre voyage est confirmé

Marrakech · du 3 au 9 décembre · 2 voyageurs · dossier 48213

Données de démonstration

Une balise de script

Ajoutez le script avec votre clé publiable. Les Elements se montent seuls sur chaque élément qui porte data-terudo, ou depuis JavaScript.

<script src="https://terudo.com/elements/v1.js" data-key="pk_live_…" data-locale="fr" defer></script>

<!-- A booking confirmation -->
<div data-terudo="booking-banner" data-destination="MA" data-start="2026-12-03" data-end="2026-12-09"
     data-email="[email protected]" data-return-url="https://www.monagence.fr/dossier/48213"></div>

<!-- A destination page -->
<div data-terudo="plans" data-destination="MA" data-days="7"></div>
const terudo = Terudo({
  key: 'pk_live_…',
  session: clientToken,            // from POST /element_sessions, optional
  locale: 'fr',
  appearance: { color: '#0a5b8a', radius: '10px', font: 'inherit' },
});

terudo.mount('trip-offer', '#esim', {
  destination: 'MA', start: '2026-12-03', end: '2026-12-09', profile: 'normal',
  email: '[email protected]', returnUrl: location.href,
  onCheckout(order) { analytics.track('esim_checkout', { id: order.order_id }); },
});

terudo.mount('esim-status', '#my-esim', { esimId: order.esim.id });

Les éléments

Paiement

Le voyageur ne paie jamais dans votre page : l’élément l’envoie sur terudo.com/pay/…, où Terudo est le vendeur et les conditions sont acceptées, puis le renvoie à l’adresse de retour que vous avez donnée, à condition que son site soit déclaré sur votre clé publiable (ou qu’elle vienne d’une session). En mode test (pk_test_…), la page de paiement simule le paiement.

Styles

Les Elements héritent de votre police. Réglez la couleur, l’arrondi et la police avec l’option appearance ou des variables CSS sur l’élément hôte : --tdo-color, --tdo-on (texte sur la couleur), --tdo-radius, --tdo-font.

Rappels

onSelect(plan), onCheckout(order) (renvoyez false pour empêcher la redirection), onError(error), onLoad(esim). mount() renvoie { update(options) } pour réafficher avec d’autres options.

Content Security Policy

Autorisez script-src https://terudo.com, connect-src https://terudo.com et, pour l’image QR de l’élément eSIM, img-src https://terudo.com.

Sessions

Sans session, un élément montre les prix publics à n’importe qui. Pour afficher la remise client, le tarif member, ou prérenseigner le voyage, l’e-mail, votre référence et l’adresse de retour, créez une session sur votre serveur avec votre clé secrète (POST /element_sessions) et passez son client_token à l’élément. Deux heures.

# Your server, with the secret key
curl -X POST https://terudo.com/api/partner/v1/element_sessions \
  -H "Authorization: Bearer sk_live_…" -H "Content-Type: application/json" \
  -d '{ "discount_percent": 10, "reference": "visa-48213", "client_email": "[email protected]",
        "trip": { "destination": "MA", "start_date": "2026-12-03", "end_date": "2026-12-09" },
        "return_url": "https://www.monagence.fr/dossier/48213" }'
# → { "client_token": "…", "expires_at": "…" }