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: {
                        providerId: <optional: currently only 'Revolut' or 'N26' are supported>,
                        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 data​

  • production (boolean / optional): set to false when testing with Sandbox otherwise true or can be omitted
  • accessTokenGet (optional): reference to method to deliver access token, not needed if domain is whitelisted
  • paymentCreatedCallback (optional): reference to method to receive initial payment when user starts process with bank
  • paymentCompleteCallback (optional): reference to method to receive completed payment (if it was completed) when user ends payment
  • dialogCloseCallback (optional): reference to method that is triggered when user closes dialog

Payment data​

User entered amount (optional)​

  • defaultAmount (decimal / optional): default / starting amount when user can enter amount
  • minAmount (decimal / optional): min amount that user can enter (including)
  • maxAmount (decimal / optional): max amount that user can enter (including)

Details​

  • providerId (optional): preselect payment provider. Currently supported: 'Revolut', 'N26'
  • pointOfSaleId (mandatory): point of sale id configured in admin portal
  • name (mandatory): name of transaction (ie. Top-up, Payment for ...)
  • description (mandatory): description of transaction (will be visible on customers bank side)
  • currency (mandatory): ISO currency code
  • country (optional): ISO country code, preselect country (if country is possible)
  • locale (optional): preselect user locale, otherwise will default to customer machine locale. Currently supported
  • data (optional): key, value pairs to use as reference for payment internally by tenant (ie. customer id, cart id ...)

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"
}