Quick Start guide¶
This 5 minute guide covers overview of Klix integration technical aspects.
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¶
<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>
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.
Continue with Step by step Klix integration and configuration instructions.