Quick Start guide

This 5 minute guide covers overview of Klix integration technical aspects.

Integration steps

A central part of Klix checkout/payment solution is Klix web widget - HTML web component i.e. form for entering customer's credit card data. Klix widget accepts merchant order parameters (order identifier, amount, payment description, etc.) via HTML element attributes. The following steps describe actions that you need to perform in order to add Klix widget to your webshop and accept a callback on a server-side once payment has been successfully processed by Klix.

1. Embed Klix widget into your web shop

In order to embed Klix widget into your web shop following HTML fragment referencing Klix widget JavaScript should be added to your web shop checkout page.

<head>
    <script type="module"  
        src="https://klix.blob.core.windows.net/stage/widget/build/klixwidget.esm.js">
    </script>
    <script nomodule  
        src="https://klix.blob.core.windows.net/stage/widget/build/klixwidget.js">
    </script>
</head>

Note that Klix widget JavaScript code should be loaded from different destinations on production and test environments. See Testing integration Environments section for details.

2. Pass order information to Klix widget

Next step is to place Klix widget HTML code in an appropriate place on a checkout page where this widget will be rendered and pass order/payment related information.

<klix-checkout widget-id="21ca7904-ff16-48b5-918d-c2d80af81f05"  
    amount="5.45"  
    currency="EUR"  
    label="Order No 12345678"  
    language="lv"
    back-to-merchant-url="https://developers.klix.app/"
    signature="E2Ag7p/v9cUQ1U5ntkYIZuDwXPErBxZWA19mGFaW/hRDXlnWvY8UH5jF991/fTgWE5Ls/3DHi5cbbZbM7zkGBT/MB13oVt6QJEtJLIFHi8t5Oqd61S6nSYcKgB/Ju4FvqbQcSaQavc1VS9zd8sgq4BuUzhyF4rb/ErI5wq6VqvDfJLNneL3kfxAcoxtU1lVvYoqZWFz52MN57aFwa7A9wJJRGmpETXFl6jYeFLLYTUjb67eiuMs60vxGh8CFpNCXlJpHzVV3cMTb+h7xit+HCwUDvM8mXwlPWXzg5F4orsoHPHWbMx2HXh8BuwZ5uXnwJar0zFioYlKqLZ+qxje0Bg==">
</klix-checkout>

Note that attribute signature should contain valid order signature. See section Signing order for detailed instructions on how to generate a valid signature. Attribute back-to-merchant-url allows to specify a URL where customer will be redirected in case of cancelled purchase. Here's Klix widget that corresponds to previously mentioned HTML code.

Click to load Klix widget

3. Implement an end-point that will be invoked upon payment completetion

After payment is completed (both successfully or failed) Klix server will send a callback HTTP request to your API end-point defined in Merchant Console. See Purchase notification HTTP request example. Note that first thing upon receiving purchase completed HTTP request you should verify request signature in order to ensure that request was sent by Klix server. See Callback payload signature validation for details.

Next steps

Continue with Step by step Klix integration and configuration instructions.