Embeds

Embeds put Lucra's screens inside your app: onboarding, programs, payments, ads, messages. They run in an iframe, so card, bank, and sign-in details never touch your page.

How it works

1. Allow your site's origin in Settings → API and MCP.
2. Open an embed on your server with POST /v1/embeds.
3. Mount it in the browser with @lucra/sdk/embed, or send the person to its hosted url.

Server

const { data: embed } = await lucra.as(account).embeds.create({
  body: { components: ["onboarding", "creator_programs", "wallet"] },
})
res.json({ clientSecret: embed.clientSecret })

account is a brand (acct_…) or a roster creator (crtr_…). The url lasts 24 hours; the clientSecret works once, for about 10 minutes.

Browser

import { loadLucra, LucraProvider, LucraOnboarding } from "@lucra/sdk/react"

const lucra = loadLucra({ fetchClientSecret })

export function Setup() {
  return (
    <LucraProvider lucra={lucra}>
      <LucraOnboarding onComplete={() => router.push("/dashboard")} />
    </LucraProvider>
  )
}

Without React, use loadLucra(...).mount("wallet", element).

Components

Open onboarding when an account still has a setup step, like a brand with no payment method.

Appearance

Pass appearance with theme (light, dark, auto), colors.primary, and radius.

Events

Components emit ready, change, complete, error, and close. Your Content Security Policy needs frame-src https://api.onlucra.com.

Endpoints