Connecting to External Services

Limio Custom Components can access custom APIs.

As of release 102, Limio has introduced a new method for creating simple generic integrations that can be utilised in custom components through our backend. This approach enables access to protected resources and avoids CORS issues. This is useful if you want to check some data against a third-party API such as a checkout field against an external service.

Features

• Supports appending specific values to query strings in GET requests
• Allows adding parameters to bodies for POST requests
• Currently supports query string and body parameters

Configuring an Integration

1. Navigate to Settings -> Integration and select "Generic"
2. A configuration modal will open
3. Configure the following:

   • Name: Helps in selecting the correct integration for a request (does not affect functionality)
   • Base URL: Sets the foundation of the endpoint
   • Key-Value Construct: Defines parameters for query strings and request bodies

Key-Value Construct

The Key-Value Construct is used to define parameters that will be added to the request. There are two types of parameters:

1. Query Parameters

• Use the prefix query. for the key
• These parameters will be added to the URL as query string parameters

Examples:

Key	Value	Result in URL
query.page	1	?page=1
query.sort	asc	?sort=asc
query.filter_by	date	?filter_by=date

Multiple query parameters will be combined:

Key	Value
query.page	1
query.sort	asc
query.filter_by	date

Result in URL: ?page=1&sort=asc&filter_by=date

2. Body Parameters

• Use the prefix body. for the key
• These parameters will be added to the request body for POST requests

Examples:

Key	Value	Result in Request Body
body.username	john_doe	{ "username": "john_doe" }
body.email	[e-mail]	{ "email": "[e-mail]" }
body.age	30	{ "age": 30 }

Multiple body parameters will be combined into a single JSON object:

Key	Value
body.username	john_doe
body.email	[e-mail]
body.age	30

Result in Request Body:

{
  "username": "john_doe",
  "email": "[e-mail]",
  "age": 30
}

Using Integrations in a Component

To use these integrations in a component, contact Limio Support to obtain the necessary import for creating a request.

Example Limio App Config

name: "validate-post-code"
body.APIKEY: "my-key"
baseURL: https://postcodestreetnamechecker.com

Example Custom Component Usage

const fetchData = async () => {
  const result = await appFetch(`api/integrations/generic/endpoint`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      method: "POST",
      path: "/api/post-code-validate",
      name: "validate-post-code",
      postCode: "SE1 3ER"
    })
  });
}

Example Request from Limio Backend

URL:
https://postcodestreetnamechecker.com/api/post-code-validate
Request Body:
{
  "postCode": "SE1 3ER",
  "APIKEY": "my-key"
}

The response will be passed directly back to the frontend untouched.

The image below illustrates the flow

Important Notes

1. The request method to api/integrations/generic/endpoint must always be POST. The method in the body is the method Limio then uses to call the integration endpoint, and it must be GET or POST.
2. Config parameter handling:

   • query.-prefixed config values are always appended to the URL as query parameters, for both GET and POST.
   • body.-prefixed config values are only added to the request body when method is POST. They are dropped on a GET.
3. Any additional parameters you include in the request body alongside method, name and path are only forwarded when method is POST, as Limio sends a request body for POST only. On a GET they are dropped, so anything a GET endpoint needs must be part of path or configured as a query. value.