Skip to main content

Account info dialog customization

To a certain extent, the Fliqa's account information dialog can be customized with CSS.

<script>
    function executePayment() {
        fliqaComponent().then(fliqa => {
            fliqa.consent({
                ...
                data: {
                    tenantCssUrl: "https://demo.fliqa.io/css/alternative.css",
                    ...
                    consent: {
                       ...
                    }
                }
            });
        });
    }
</script>

Example CSS​

Add your custom CSS styles into the referenced CSS file, for instance.

:root{
    --backgroundColor: #c9f0ed;
    --headerBackgroundColor: #c9f0ed;
}

CSS property references​

--backgroundColor: white; --headerBackgroundColor: #fff; --headerTextColor: black; --summaryBackground: linear-gradient(219deg, #055D7E 17.42%, #102228 79.61%); --summarySplitLineColor: rgba(82, 190, 232, 0.67); --summaryTitleColor: white; --summaryTextColor: silver; --summaryAmountColor: white; --paymentAmountColor: black; --paymentRecipientColor: white; --paymentInfoColor: black; --paymentErrorColor: darkred; --paymentInfoLineColor: black; --footerBackground: linear-gradient(to right, transparent, #d9d9d9); --footerTextColor: #666666;

--searchTextColor: black; --searchBackgroundColor: white; --searchBackgroundFocusColor: #fcf5e1;

Lists​

--listItemLineColor: #bebebe; --listItemBackgroundColor: #ffffff; --listItemTextColor: black; --listItemSelectedBackgroundColor: #D5FFBC; --listItemSelectedLineColor: #5AFF4B; --listItemSelectedTextColor: black;

--dataItemLabelColor: #666666; --dataItemFocusColor: #fcf5e1; --dataItemValueColor: black; --dataItemInfoColor: gray; --dataItemLineColor: #bebebe; --dataItemBackgroundColor: #ffffff;

Buttons​

--buttonEnabledLabelColor: white; --buttonEnabledBackgroundColor: #1a4657; --buttonEnabledLineColor: #1a4657;

--buttonDisabledLabelColor: gray; --buttonDisabledBackgroundColor: silver; --buttonDisabledLineColor: lightgray;

Error messages​

--errorTextColor: white; --errorBackgroundColor: darkred; --font-family: Montserrat, Arial; --font-family-input: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Sizing​

--small-font-size: 0.9rem; --normal-font-size: 1rem; --large-font-size: 1.1rem; --amount-font-size: 1.5rem;

--small-margin: 0.4rem; --normal-margin: 0.8rem; --large-margin: 1rem;

--listitem-icon-size: 2rem;