React SDK

npm install @orderly/embed-react

'use client'

import { useCallback } from 'react'
import { OrderlyEmbed } from '@orderly/embed-react'

export default function IntegrationsPage() {
  const fetchClientSecret = useCallback(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
  }, [])

  return (
    <OrderlyEmbed
      fetchClientSecret={fetchClientSecret}
      appearance={{ primaryColor: '#6366f1', borderRadius: '12px' }}
      onBridgeCreated={(bridge) => console.log(bridge.id)}
      onError={(error) => console.error(error.message)}
      className="orderly-integrations"
    />
  )
}

The component supports React 18 and 19 and is safe to import in an SSR project; the iframe is created only after the component mounts in the browser.

Appearance changes are sent to the live iframe without remounting. Changing a structural setting such as slug, mode, or embedOrigin creates a fresh, secure handshake.