Skip to main content

Account info dialog

The preferred way to integrate payment service is to use Fliqa's payment dialog:

Prerequisites​

Setup​

Copy the following code snippet to your HTML page to display the account information dialog:

<head>
    <script src="https://assets.fliqa.io/sdk/latest/fliqaComponent.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
<button onclick="showDialog()">Connect with your bank</button>
<script>

<html>
<head>
    ...
    <script src="https://assets.fliqa.io/sdk/latest/fliqaComponent.js"></script>
</head>
<body>
...
<button onclick="consent()">Account consent</button>
<script>
    function consent() {
        fliqaComponent().then(fliqa => {
            fliqa.consent({
                production: <false for sandbox testing, otherwise can be omitted>,
                accessTokenGet: getAccessToken, // optional
                consentCreatedCallback: consentCreated, // optional
                consentCompleteCallback: consentComplete, // optional
                dialogCloseCallback: dialogClose, // optional
                data: {
                    consent: {
                        inquiryId: <inquiry_id>,
                        locale: <optional_locale>,
                        country: <optional_country_pre-select>,
                        data: [ // optional meta-data if needed
                            { "optional_key": "optional_value" }
                        ]
                    }
                }
            });
        });
    }

    function getAccessToken() {
        // optional but recommended - provide access token via you backend for SDK channel
        return "access_token";
    }

    function consentCreated(consentResponse) {
        /* optional event when consent was created */
    }

    function consentComplete(consentResponse) {
        /* optional event when consent is completed */
    }

    function dialogClose(consentResponse) {
        /* optional event when dialog is closed (consent might not necessarily be created) */
    }
</script>
</body>
info

Make sure that you include viewport to your hosting page head HTML:

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

If not included, Fliqa's dialog size and scale might be off

Dialog events​

accessTokenGet​

You can provide a valid access token for the given environment and sdk channel if desired.
If not provided your domain and Inquiry ID will be used to start up the dialog.

The event is triggered as soon as the dialog starts up.

consentCreatedCallback​

New consent created event is triggered as soon as the end-user selects his bank/provider.

The consentResponse JSON will be populated with all known data at this point of the transaction.

consentCompleteCallback​

The consent compete event is triggered as soon as the consent has been approved or denied.

The consentResponse JSON will be populated with all known data at this point of the transaction. Source account number IBAN might not be known at this point.

note

The end-user might abandon the consent process on the bank side, in this case the complete event will not be triggered.

Consent response is analog to Consent details JSON

{
    "inquiryId": <inquiry_id>,
    "consentId": <consent_id>,
    "status": "started",
    "created": "2024-12-18T12:34:06.069Z",
    "modified": "2024-12-18T12:34:07.069Z",
    "scope": <inquiry_scope>,
    "validUntil": null,
    "consentData":
    [
        {
            "name": "redirect",
            "label": "Redirect",
            "additional_data": null,
            "properties": null,
            "value": <redirect_url>
        }
    ],
    "providerId": <provider_id>,
    "name": <inquiry_public_name>,
    "description": <inquiry_description>,
    "owner":
    {
        "msisdn": <entered_phone_number> ... OR
        "email": "<entered_email>"
    },
    "country": "SI",
    "data": [
        {
            "key": "custom_key",
            "value": "custom_value"
        }],
    "locale": "en"
}