Browser SDK

npm install @orderly/embed-js

import { OrderlyConnect } from '@orderly/embed-js'

const embed = OrderlyConnect({
  fetchClientSecret: async () => {
    const response = await fetch('/api/orderly/embed-session', {
      method: 'POST',
      credentials: 'same-origin',
    })
    if (!response.ok) throw new Error('Could not create an embed session')
    return (await response.json()).clientSecret
  },
  onBridgeCreated: (bridge) => console.log(bridge.id),
  onError: (error) => console.error(error.code, error.message),
})

embed.mount('#orderly-embed')

For a script tag, use the Wrangler-hosted bundle:

<div id="orderly-embed"></div>
<script src="https://cdn.orderlycore.com/embed.min.js"></script>
<script>
  const embed = OrderlyEmbed.OrderlyConnect({
    fetchClientSecret: () =>
      fetch('/api/orderly/embed-session', { method: 'POST' })
        .then((response) => response.json())
        .then((session) => session.clientSecret),
  })
  embed.mount('#orderly-embed')
</script>

Options

Option	Purpose
fetchClientSecret	Required callback returning a fresh est_ secret
mode	full or connect
slug	Loads public branding for an Embed configuration
appearance	Runtime color, type, radius, and logo overrides
embedOrigin	Override the iframe origin for test environments
title	Accessible iframe title
minHeight	Initial height before the iframe reports its size

mount, unmount, update, and destroy control the instance lifecycle. on(event, handler) and off(event, handler) support the same events as the option callbacks.

Events

The SDK handles handshake, resize, appearance updates, OAuth popups, and session refresh internally. Application callbacks are available for:

• ready, resize, and error
• bridge.created, bridge.updated, and bridge.deleted
• action.created and action.cancelled
• order.viewed and shipment.viewed
• session.expiring and oauth.popup

Messages are accepted only from the configured iframe window and exact iframe origin. OAuth URLs are restricted to HTTP or HTTPS.