Skip to main content

Payment dialog

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

Prerequisites​

note

Once in production Fliqa must approve all new Points of sale or changes to an existing Point of sale.
The approval process might take some time, so please make sure all entered data is correct.

Setup​

Copy the following code snippet to your HTML page to display the payment 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="executePayment()">Bank account</button>
<script>
    function executePayment() {
        fliqaComponent().then(fliqa => {

            fliqa.pay({
                production: <false for sandbox testing, otherwise can be omitted>,
                accessTokenGet: getAccessToken, // optional
                paymentCreatedCallback: paymentCreated, // optional
                paymentCompleteCallback: paymentComplete, // optional
                dialogCloseCallback: dialogClose, // optional
                data: {
                    payment: {
                        pointOfSaleId: <point_of_sale_id>,
                        name: <name_of_transaction>,
                        description: <description_of_transaction>,
                        amount: <amount>,
                        currency: <currency>,
                        country: <optional_country_pre-select>,
                        locale: <optional_locale>,
                        data: [
                            { "optional_key": "optional_value" }
                        ]
                    }
                }
            });
        });
    }

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

    function paymentCreated(paymentResponse) {
        if (paymentResponse) {
            console.log('Payment created: ' + JSON.stringify(paymentResponse));
        }
        else {
            console.log('ERROR: ' + paymentResponse);
        }
    }

    function paymentComplete(paymentResponse) {
        if (paymentResponse) {
            console.log('Payment complete: ' + JSON.stringify(paymentResponse));
        }
        else {
            console.log('ERROR: ' + paymentResponse);
        }
    }

    function dialogClose(paymentResponse) {
        if (paymentResponse) {
            console.log('Payment dialog closed for payment: ' + JSON.stringify(paymentResponse));
        }
         else {
            console.log('ERROR: ' + paymentResponse);
        }
    }

</script>
info

Make sure that you include viewport to your hosting page head 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 Point of sale ID will be used to start up the dialog.

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

paymentCreatedCallback​

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

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

paymentCompleteCallback​

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

The paymentResponse 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 payment process on the bank side, in this case the complete event will not be triggered.

Payment response JSON examples​

Payment response is analog to Payment details JSON

{
    "paymentId": <payment_id>,
    "status": "started",
    "created": "2024-08-14T09:51:23.777Z",
    "modified": "2024-08-14T09:51:25.286Z",
    "paymentData": [
        {
            "name": "redirect",
            "label": "Redirect",
            "additional_data": null,
            "properties": null,
            "value": <redirect_url>
        }],
    "providerId": <provider_id>,
    "name": <payment_name>,
    "description": <payment_description>,
    "pointOfSaleId": <point_of_sale_id>,
    "sourceIban": null,
    "sourceName": null,
    "targetIban": <point_of_sale_iban>,
    "targetName": <point_of_sale_public_name>,
    "amount": 0.01,
    "currency": "EUR",
    "country": "SI",
    "data": [
        {
            "key": "custom_key",
            "value": "custom_value"
        }],
    "locale": "en"
}