Embed the Booking UI

There are two ways to sell your packages with TripFusion:

1. Build your own UI on this Partner API (search, availability, prebook, book). Full control, more work.
2. Embed our booking flow. Drop TripFusion's ready-made checkout onto your site as an iframe or widget, with no booking code to write.

This page covers option 2.

Embed keys are not API keys

The Partner API uses a secret key (sk_...) that stays on your server. Embedding uses a publishable embed key (pk_...) that is safe to put in browser code. They are separate keys. Mint an embed key in the admin dashboard under Developers → Embed Checkout.

Embedding also checks the host page's origin, so add every site that will show the embed to your organization's allowed origins (same Embed Checkout page).

Iframe

Point an iframe at a package's checkout URL, and answer the embed handshake with your pk_ key:

<iframe
  id="tf-checkout"
  src="https://checkout.tripfusion.com/YOUR_ORG/packages/301"
  width="100%"
  height="800"
  allow="payment"
  style="border:0"
></iframe>
<script>
  window.addEventListener("message", function (e) {
    if (e.data && e.data.type === "tripfusion-embed-handshake-request") {
      var iframe = document.getElementById("tf-checkout");
      if (e.source !== iframe.contentWindow) return;
      iframe.contentWindow.postMessage(
        { type: "tripfusion-embed-handshake-response", key: "pk_live_YOUR_EMBED_KEY" },
        e.origin
      );
    }
  });
</script>

Replace YOUR_ORG with your organization alias, 301 with your package id, and pk_live_YOUR_EMBED_KEY with your key. The host page's origin must be on your allowed origins, or the checkout won't load.

Overlay widget (JS SDK)

Prefer a "Book Now" button that opens the flow as a modal? Load the SDK, which wraps the same iframe:

<script
  id="tripfusion-sdk"
  src="https://cdn.jsdelivr.net/npm/@vacayou/tripfusion-js-sdk?client=YOUR_ORG&propertyId=17&pk=pk_live_YOUR_EMBED_KEY"
></script>
<button onclick="book()">Book Now</button>

The SDK targets a property or landing page (propertyId, propertySlug, landingPagePath, landingPageId). For a specific package, use the iframe above with the /packages/{id} URL.

Mobile apps

Inside a native iOS WKWebView or Android WebView, load the checkout URL directly (https://checkout.tripfusion.com/YOUR_ORG/packages/301). No iframe wrapping or allowed-origins step is needed, because the WebView is the top document.

Get a ready-made snippet

The admin dashboard generates a copy-paste snippet filled in for your organization and product under Developers → Embed Checkout (iframe, SDK, and mobile WebView). Grab it from there so the alias, ids, and key are already in place.