TermsAndConditions
Terms & Conditions information for payment methods. It is used to show specific terms & conditions for the chosen payment method and options.
TermsAndConditions
Terms & Conditions information for payment methods. It is used to show specific terms & conditions for the chosen payment method and options.
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-static.tui.com/payment-terms-and-conditions-mfe-env-test/main.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-termsandconditions
locale="VALUE"
theme="VALUE"
brand="VALUE"
package_type="VALUE"
link_type="VALUE"
payment_method="VALUE"
booking_date="VALUE"
tui_webroot="VALUE"
payment_option="VALUE">
</tui-termsandconditions>Examples
Basic example
<tui-termsandconditions
locale="en-GB"
theme="tui"
brand="TH"
package_type="INCLUSIVE"
link_type="PDP"
payment_method="Card"
booking_date="2023-02-13"
tui_webroot="http://..."
payment_option="">
</tui-termsandconditions>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
locale | Translation for i10n labels | en-GB, nl-NL, nl-BE, fr-FR | yes | |
theme | TUI UI library theme | tui | yes | |
brand | TUI brand (eg. TUI, Firstchoice, etc.) | TH, FO, CR, RC, FJ, FJ_FO, FC, CS, ES, FJ_CR | yes | |
package_type | TUI package type (eg. flights, cruise) | INCLUSIVE, TMC, AO, FO, FNC, CNS, SNC, BTB, CO | yes | |
link_type | Specific value generated from Hybris to create link for T&C | https://www.tui.co.uk/destinations/booking/tandc?bdate=2023-04-24&bcode=TH&ptype=CRPKG | yes | |
payment_method | One of the available payment methods (eg. card, apple pay, etc.) | Card, ApplePay, PayPal, DirectDebit, PayPalCredit | yes | |
booking_date | Date of your booking | yes | ||
tui_webroot | Root of your page | yes | ||
payment_option | Selected payment option (eg. pay in full, direct debit, etc.) | PAY_IN_FULL, NO_DEPOSIT, LOW_DEPOSIT, STANDARD_DEPOSIT, PAY_TOP_UP_DEPOSIT, PAYMENT_DUE_TODAY, PAY_OTHER_AMOUNT, PAY_MONTHLY, LOCK_THE_PRICE | yes |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Event triggered when checkox gets checked/unchecked. | |