Logotype
For developers
By Qliro
Select search filters:
Hit Esc or close when your done
icon corner-down-right
icon corner-down-right
icon corner-down-right
0
0
/
/
Load checkout
Overview
When the customer is ready to pay the checkout is loaded by doing the following:
First a create order request. Qliro will respond with an order id.  Use that order id to do a get order request. Included in the get order response is a HTML snippet which you can use to render the checkout.
Load checkout includes 3 main components.
  • Create order
  • Get order
  • Render checkout iframe
 
Create order
Create order defines the checkout for the customer – the order items, customer information, the shipping methods available for the customer and merchant-provided metadata.
In the CreateOrder response, you will get a key to the customer order – the OrderID
For details on the request/response parameters and error codes, please continue to the API reference.
 
How-to
  1. Generate your authentication token.
  2. Make a POST request towards checkout/merchantapi/orders.
  3. Retrieve the OrderID from the response.
 
Request
Example of request with only the required parameters.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "OrderId": "MerchantUniqueReference",
  "MerchantApiKey": "MerchantApiKey",
  "Country": "SE",
  "Currency": "SEK",
  "Language": "sv-se",
  "MerchantConfirmationUrl": "https://merchant.com/confirmation/",
  "MerchantTermsUrl": "https://merchant.com/terms/",
  "OrderItems": [
    {
      "MerchantReference": "RedHat",
      "Description": "Red hat original product",
      "Type": "Product",
      "Quantity": 1,
      "PricePerItemIncVat": 375.55,
      "PricePerItemExVat": 300.35
    }
  ]
}
 
Response
1
2
3
{
  "OrderId": 12345
}
 
Good to know
  • Add any customer information you already have in the CreateOrder request for improved customer experience. Qliro will adjust its customer authentication flow accordingly. If more information is needed the customer will be prompted to add that after the checkout has been rendered.
  • To read more about integrated shipping, please go here.
Get order
Get order provides you with the order information – customer information, the shipping methods, merchant-provided metadata and payment methods. Included in the response is a HTML snippet you can use to render the checkout. Note that the checkout status will be inProcess and the list of order items will be empty until the customer has completed the order.
For details on the request/response parameters as well as error codes, please continue to the API reference.
 
How-to
  1. Use the OrderID or your MerchantReference.
  2. Make a GET request towards checkout/merchantapi/orders/{OrderId} or checkout/merchantapi/orders/?merchantReference={MerchantReference}.
  3. Read the response and access the checkout data.
 
 
Render checkout snippet
 
It's now time to render the checkout on your page. 
 
How-to
  1. Read the HTML-snippet from the get order response.
  2. Paste the snippet in the DOM where you want the Qliro Checkout iframe to be rendered.
  3. Render page.
 
Response
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "OrderHtmlSnippet": "Qlirocheckoutsnippet",
  "OrderId": 12345,
  "MerchantReference": "MerchantUniqueReference",
  "TotalPrice": 0,
  "Currency": "SEK",
  "Country": "SE",
  "Language": "sv-se",
  "CustomerCheckoutStatus": "InProcess",
  "OrderItems": [],
  "IdentityVerification": {},
  "MerchantProvidedMetadata": []
}
 
 
Good to know
  • Use oncheckoutloaded (optional listener) to know when the checkout rendering is done. Continue to Listeners to read more.
  • When it comes to deciding the padding to apply there are some things you should keep in mind:
    • The iframe itself does not have a limit on maximum and minimum width.
    • The content of the iframe has a maximum width of 500px + 2px (padding-left = padding-right = 1px).
    • The content of the iframe will always be centered so the margins on left and right will adapt to the total size of the iframe.
    • There is no minimum width for the content of the iframe, you can apply minimum width to the parent container of the iframe and then the components will not get smaller than that total minimum width allows.