Traveler elements Free on all three models

Your booking flow,
plus the visa step.

Elements are drop-in components for the page you already have. Requirements, checkout and status render inside your layout, in your brand. The traveler never leaves your site, and passport data never touches your servers.

Start free See it running

18 KB

gzipped, no dependencies

4 lines

to a working requirements check

PCI SAQ-A

payment runs in our iframe

confirmation.html

<!-- your booking confirmation page -->
<div id="visa"></div>

<script src="https://js.simplevisa.com/v1"></script>
<script>
  const sv = SimpleVisa('pk_live_9f2a…');

  sv.mount('#visa', {
    element:     'requirements',
    nationality: 'FR',
    destination: 'KE',
    layover:     ['QA'],
    departure:   '2026-09-12',
    travellers:  1
  });
</script>

Try it

See it on one of your own pages.

A booking confirmation, mocked up with a partner brand from the studio. Pick an element; everything inside the dashed outline is rendered by the library, and the snippet under it is what you paste.

Element

nordwind.com/booking/NW-4471/confirmation

N Nordwind Air My trips

Your trip is booked NW-4471

Departure

Paris CDG · 12 Sep, 10:40

Arrival

Nairobi NBO · 12 Sep, 22:15

Passenger

M. Laurent

#visa rendered by SimpleVisa Elements

Tell us about the trip

Requirements depend on every passport in the party and on every country you touch, including the ones you only change planes in.

Route

Departing fromParis, FranceCDG DestinationNairobi, KenyaNBO

Layovers Doha, Qatar4h · airside✕ Leaving the airport? Tell us; transit rules change.

Departure12 Sep 2026 Return26 Sep 2026 Reason for travelTourism

Travelers · 3

1AdultPassport of France

2AdultPassport of Morocco

3Child, 7Passport of France

Different passports get different answers. If someone holds two, pick the one they will travel on; you can add residence permits on the next step.

3 passports · 3 countries checked · free

Add a bag Choose seats Manage booking

the code for what you are looking at

sv.mount('#visa', {
  element:     'trip',
  display:     'inline',
  brand:       'nordwind',
  origin:      'FR',
  travellers:  [{ type: 'adult', nationality: 'FR' },
                { type: 'adult', nationality: 'MA' },
                { type: 'child', nationality: 'FR', age: 7 }],
  onComplete:  (order) => track('visa_purchased', order.total)
});

sv.mount('#visa', {
  element:     'requirements',
  display:     'inline',
  brand:       'nordwind',
  nationality: 'FR',
  destination: 'KE',
  layover:     ['QA'],
  onComplete:  (order) => track('visa_purchased', order.total)
});

sv.mount('#visa', {
  element:     'checkout',
  display:     'inline',
  brand:       'nordwind',
  order:       'ord_8fa21c',
  onComplete:  (order) => track('visa_purchased', order.total)
});

sv.mount('#visa', {
  element:     'status',
  display:     'inline',
  brand:       'nordwind',
  order:       'ord_8fa21c',
  onComplete:  (order) => track('visa_purchased', order.total)
});

sv.mount('#visa', {
  element:     'document',
  display:     'inline',
  brand:       'nordwind',
  order:       'ord_8fa21c',
  onComplete:  (order) => track('visa_purchased', order.total)
});

sv.mount('#visa', {
  element:     'badge',
  display:     'inline',
  brand:       'nordwind',
  nationality: 'FR',
  destination: 'KE',
  onComplete:  (order) => track('visa_purchased', order.total)
});

Catalogue

Seven elements. Use one or all of them.

Most partners start with trip and requirements on the confirmation page, and add checkout once they see the attach rate. Pass what your booking already knows and the questions disappear.

tripStart here

Everything the answer depends on

A visa answer is never just "passport plus destination". This element collects the full picture: origin, destination, every layover with its duration and whether the traveler leaves the airport, the dates, the reason for travel, and a passport for each person in the party, adults and children alike. It hands a clean payload to requirements.

Prefill any field from your booking and the traveler only has to confirm it.

requirementsMost used

What this trip needs

A grid of every traveler against every country on the route. Each cell is either a document with its fee and processing time, or a plain "nothing needed", and the slowest item is called out so the party knows what to start first.

One row per passport. One total, one payment.

checkout

Applicant form and payment

Passport scan, applicant details, card. Runs in our iframe, so card and passport data stay out of your stack entirely.

Emits onComplete with the order.

status

Where the application is

The same timeline the traveler sees on our site, inside your account area. Live, so your support team stops fielding "where is my visa" tickets.

Takes an order reference or an email.

document

The approved visa itself

Once the government answers, this element shows the document with its validity dates and a download of the actual PDF, plus print and wallet. No email hunt, no login to our site.

Signed links, live for 12 months.

badge

A one-line warning

Fits in a search result or a fare row: "Visa required · from $78". Opens the full element on click, in whichever display mode you set.

Renders nothing when no document is needed.

uploadBeta

Missing document requests

When our team needs a clearer passport scan, the traveler can send it from your page instead of an email thread.

Only renders when a request is open.

Need something else?

Elements sit on the same public API you can call directly. If your flow does not fit one of the seven, build it on the Requirements and Applications endpoints.

Read the API reference →

Theming

Elements wear a brand you already designed.

A brand holds the logo, colors, corner radius and typeface. You design it once in the console and name it here; the same brand can dress this mount, a hosted storefront, and the emails travelers get. An element needs a brand, not a storefront.

Pass brand: 'nordwind' to wear a saved brand.

Or override any token inline for a single mount, useful for dark sections.

Styles are scoped to the element. Nothing leaks into your page, nothing of yours leaks in.

Open the brand studio

inline override

sv.mount('#visa', {
  element: 'requirements',
  brand: {
    primary:   '#0B3B8C',
    secondary: '#F2B705',
    radius:    '2px',
    font:      'Archivo, sans-serif',
    logo:      'https://…/nordwind.svg'
  }
});

Reference

Mount options

elementtrip · requirements · checkout · status · document · badge · upload

displayinline (default), drawer or modal.

originWhere the trip starts. Used for transit and residence rules.

destinationWhere the traveler lands. Layovers go in their own array.

layoverArray of stops: { country, hours, airside }. Transit rules are answered explicitly.

travellersArray, one entry per passport: { type, nationality, age, residence }. Each gets its own answer.

nationalityShorthand for a single adult traveler. Ignored if travelers is set.

departureISO date. Drives validity windows and processing warnings.

purposetourism · business · study · transit. Changes which visa applies.

brandA brand key from the console, or an object of tokens to override.

locale22 languages. Defaults to the browser locale.

Events

onReadyElement mounted and sized. Use it to remove your own skeleton.

onRequirementsFires with the document list and total, before any purchase.

onCompletePayment succeeded. Carries order reference, total and currency.

onStatusChangeApplication moved a step. Also delivered as a webhook.

onErrorNetwork or validation failure, with a code you can log.

What never reaches your servers

Passport numbers, scans and card details are entered inside our iframe and posted straight to us. Your page receives the order reference, the status and the amount: enough to reconcile, nothing you have to protect.

Sandbox keys are instant.

Mount an element against test data today, switch the key when you are ready. No call needed to get started.

Talk to an engineer Start free

Your booking flow,
plus the visa step.

See it on one of your own pages.

Tell us about the trip

3 documents for your party.

Kenya eTA · Marie Laurent

Kenya eTA · in progress

Approved. You are good to go.

Seven elements. Use one or all of them.

Everything the answer depends on

What this trip needs

Applicant form and payment

Where the application is

The approved visa itself

A one-line warning

Missing document requests

Need something else?

Elements wear a brand you already designed.

Mount options

Events

Sandbox keys are instant.

Your booking flow,plus the visa step.

See it on one of your own pages.

Tell us about the trip

3 documents for your party.

Kenya eTA · Marie Laurent

Kenya eTA · in progress

Approved. You are good to go.

Seven elements. Use one or all of them.

Everything the answer depends on

What this trip needs

Applicant form and payment

Where the application is

The approved visa itself

A one-line warning

Missing document requests

Need something else?

Elements wear a brand you already designed.

Mount options

Events

Sandbox keys are instant.

Your booking flow,
plus the visa step.