Skip to main content

CELITECH iFrame Integration Guide

Overview​

This guide provides step-by-step instructions for integrating CELITECH's new iFrame link iframe.celitech.com into your project. The iFrame requires authentication and supports customization through query parameters.

iFrame Configuration​

Authentication​

To access the iFrame, you must provide a valid authentication token in the query string. Without a token, the iFrame UI will be blocked.

Fetching a Token​

To obtain a token, call our API endpoint in your backend using your client credentials without any additional parameters:

POST /iframe/token

The endpoint will return a token which shall be used in the iFrame link in your frontend.

Please refer to our API Reference for more details.

Token Expiry​

The token is valid for 30 minutes after issuance.

Query Parameters​

The iFrame link supports various optional query parameters for customization:

Authentication (required)​

  • token: The authentication token obtained from /iframe/token. Example: token=<your-token>

Customization (optional)​

  • color: A HEX color code (without the # sign) to customize the iFrame appearance.
    • Example: color=000000
  • referenceId: An identifier provided by the partner to link this purchase to their booking or transaction for analytics and debugging purposes.

Trip Details (optional)​

  • destination: The name of the destination country.
    • Example: destination=France
  • iso: The ISO 3-letter country code.
    • Example: iso=FRA
    • Only provide either the destination name or its ISO code.
  • startDate: The trip start date in MM-dd-yyyy format.
    • Example: startDate=06-01-2025
  • endDate: The trip end date in MM-dd-yyyy format.
    • Example: endDate=06-12-2025
    • If startDate and endDate are omitted, the default trip duration when a destination is provided is 9 days.

Usage Examples and Implementation​

Example Usage​

A properly formatted iFrame URL might look like this:

https://iframe.celitech.com?token=your_token&color=ff5733&iso=FRA&startDate=06-01-2025&endDate=06-12-2025

Embedding the iFrame​

To embed the CELITECH iFrame into your project, use the following example:

<iframe
  src="https://iframe.celitech.com?token=your_token&color=ff5733&iso=FRA&startDate=01-06-2025&endDate=10-06-2025"
  width="1000"
  height="450"
  style="border:none;"
/>

Implementation Notes​

  • Ensure that the token is retrieved dynamically from /iframe/token before embedding the iFrame.
  • Always URL-encode query parameters where necessary.
  • If using a custom color, provide the HEX code without the # sign.

Enabling Apple Pay​

To enable Apple Pay within the iFrame, additional setup is required. Please follow these steps:

  1. Domain Verification File: Download the domain verification file (please contact CELITECH support to obtain this file) and upload it to your website under https://your-domain.com/.well-known/apple-developer-merchantid-domain-association. For more information, refer to Apple's documentation: Preparing Merchant Domains for Verification.

  2. iFrame allow attribute: Add the allow="payment" attribute to your iFrame tag as shown below:

    <iframe
      src="https://iframe.celitech.com?token=your_token"
      allow="payment"
    />

After completing the above steps, please contact CELITECH support to validate your domain and enable Apple Pay for your integration.