nordic-checkout
The checkout user interface for Accommodation only where the customer filles in his personal information.
<?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>F6S290R67VGXFCVY</RequestId><HostId>yUjpFW2r1mGcqQZ33KlvC6juRS2D9QIDKLVnmz28aJ/MOSgL/Qp7IGUF6ELxQJ+SxS1tZ2lKusE=</HostId></Error>
Screenshots
Usage
Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.
<script src="https://nonprod.cloud.tui.com/osp/ao/ui/nordic-checkout/current/nordic-checkout.esm.js" defer></script>
Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.
<tui-nordic-checkout
locale="VALUE"
market="VALUE"
search-page-url="VALUE">
</tui-nordic-checkout>
Examples
Basic example
<tui-nordic-checkout
market="se"
locale="sv-SE"
source-system="LEGACY">
</tui-nordic-checkout>
Attributes
This microfrontend accepts the following attributes:
Name | Description | Values | Default | Required |
---|---|---|---|---|
ab-test-descriptive-continue-button-text | Show descriptive text for continue button ACCOONLY-7189 | no | ||
locale | Locale to be used within UI | da-DK , de-AT , de-CH , de-DE , en-GB , en-IE , fi-FI , fr-BE , fr-CH , nb-NO , nl-BE , nl-NL , sv-SE | yes | |
market | Market to which API calls would be sent | at , be , ch , de , dk , fc , fi , ie , nl , no , se , uk | yes | |
search-page-url | Url to search page | yes | ||
theme | Theme to be used within UI | firstchoice , tui-light | no | |
tracking-id | The id to be used for click event tracking | no |
Events
This microfrontend emits the following events:
Event | Schema |
---|---|
Tracking events |
|
Fires when a price check is performed |
|
Events that sends price info to cta-button MFE |
|