Skip to main content

iFrame (Beta)

Overview​

This guide provides step-by-step instructions for integrating CELITECH's new iFrame link iframe.celitech.com into your project. This solution allows you to embed a fully functional eSIM purchase flow directly into your website or application. The iFrame requires authentication and supports customization through query parameters, enabling you to offer seamless global eSIM connectivity to your users with minimal development effort.

note

iFrame access is enabled per account on request, not self-service. To get started, contact devops@celitech.com or your CELITECH account manager and ask to have the iFrame enabled for your account.

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.
  • currency: 3-letter currency code. If provided and supported, prices are displayed using that currency; otherwise defaults to USD.
    • Allowed values: USD, EUR, AUD, CAD, NZD, GBP, ZAR
    • Example: currency=EUR

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.