FrançaisTalk to us

Elements

Like a payment provider’s Elements: pieces of our shop that render in your page, take its font and colours, and send the traveller to our hosted checkout. No iframe.

Try the demoAPI reference

Try the Elements

Pick a fictional brand, its colour, corners and font: the elements follow, inside a page that looks like the partner’s own. Demo data, no account needed.

Brand
Colour
Corners
Font
Element language

The same look in your page

Terudo({
  key: 'pk_live_…',
  locale: 'en',
  appearance: {
    color: '#0a5b8a',
    radius: '14px',
    font: 'inherit',
  },
});
Have a test key?

Paste a publishable test key (pk_test_…) to see the elements with your own catalogue and settings. Keys are created in the partner portal, Developers tab.

Atlas Voyages

Your trip is confirmed

Marrakech · 3 to 9 December · 2 travellers · file 48213

Demo data

One script tag

Add the script with your publishable key. Elements mount themselves on every element that carries data-terudo, or from 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 });

The elements

Payment

The traveller never pays in your page: the element sends them to terudo.com/pay/…, where Terudo is the seller and the terms are accepted, then back to the return URL you gave, provided its site is listed on your publishable key (or comes from a session). In test mode (pk_test_…) the pay page simulates the payment.

Styling

Elements inherit your font. Set the colour, the corner radius and the font with the appearance option or CSS variables on the host element: --tdo-color, --tdo-on (text on the colour), --tdo-radius, --tdo-font.

Callbacks

onSelect(plan), onCheckout(order) (return false to stop the redirect), onError(error), onLoad(esim). mount() returns { update(options) } to re-render with new options.

Content Security Policy

Allow script-src https://terudo.com, connect-src https://terudo.com and, for the eSIM element’s QR image, img-src https://terudo.com.

Sessions

Without a session an element shows public prices to anyone. To show the client discount, the member rate, or to prefill the trip, the email, your reference and the return URL, create an element session on your server with your secret key (POST /element_sessions) and pass its client_token to the element. Two hours.

# 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": "…" }