Skip to main content
Permita que vendedores ou parceiros concluam o onboarding da Chargefy sem sair do site deles: um clique abre o fluxo em iframe (tela cheia ou modal). O padrão segue o Checkout embarcado: um único script chargefy.min.js, snippet HTML ou chamada JavaScript após carregar o script. Antes do embed, você precisa de um link de redirecionamento criado pela organização pai (marketplace) — no painel (sub-organizações / links de onboarding) ou via API POST /api/v1/onboarding-links. Você pode usar só o token do link (ex.: chargefy_obl_…) no href ou colar a URL completa de redirecionamento: https://api.chargefy.io/api/v1/onboarding-links/{token}/redirect (substitua o host pela sua API, se for self-hosted). O script unificado resolve o token contra data-chargefy-api-origin (ou o padrão https://api.chargefy.io). Essa rota valida o token e redireciona para /embed/onboarding com os parâmetros corretos. No painel, use Copiar código embed para obter o snippet já preenchido.

​
Script hospedado (chargefy.min.js)

O loader adiciona embed=true, embed_origin (origem da página do parceiro) e opcionalmente theme à URL, para o iframe ser aceito pelo app. Há indicador de carregamento até o iframe enviar o evento loaded via postMessage.

​
Carregar o script

Recomendado — script no app Chargefy (ajuste origens se self-hosted): 
<script
  src="https://app.chargefy.io/scripts/chargefy.min.js"
  defer
  data-chargefy-app-origin="https://app.chargefy.io"
  data-chargefy-api-origin="https://api.chargefy.io"
  data-auto-init
></script>
O pacote npm @chargefy/checkout continua publicando embed-onboarding para quem integra via bundler; para páginas estáticas, o caminho recomendado é /scripts/chargefy.min.js no host do app.

​
Snippet de código (HTML)

Pode ser usado em qualquer site ou CMS que permita inserir HTML. 
<a
  href="__SEU_TOKEN__"
  data-chargefy-onboarding
  data-chargefy-onboarding-theme="light"
>
  Cadastrar organização
</a>
<script
  src="https://app.chargefy.io/scripts/chargefy.min.js"
  defer
  data-chargefy-app-origin="https://app.chargefy.io"
  data-chargefy-api-origin="https://api.chargefy.io"
  data-auto-init
></script>
AtributoDescrição
hrefToken do link (ex.: chargefy_obl_…) ou URL completa .../onboarding-links/{token}/redirect na mesma API configurada.
data-chargefy-onboardingObrigatório no gatilho. Se não houver href útil, pode colocar o token ou a URL neste atributo.
data-chargefy-onboarding-themeOpcional: light ou dark, repassado ao app como theme na query.
Estilize o link ou botão como quiser; mantenha os atributos data-chargefy-*. Modal: em código, use window.openChargefyOnboarding(target, { isModal: true, allowClose: true, theme: 'light' }). O snippet com data-auto-init usa tela cheia com fechamento habilitado, alinhado ao fluxo embarcado típico.

​
Uso programático (botão)

Carregue o script sem data-auto-init e abra o fluxo a partir de um handler: 
<script
  src="https://app.chargefy.io/scripts/chargefy.min.js"
  defer
  data-chargefy-app-origin="https://app.chargefy.io"
  data-chargefy-api-origin="https://api.chargefy.io"
></script>
<script defer>
  async function abrirOnboarding() {
    const token = '__SEU_TOKEN__'
    const embed = await window.Chargefy.EmbedOnboarding.create(token, 'dark')
    embed.addEventListener('success', () => {
      console.log('Onboarding concluído')
    })
  }
</script>
<button type="button" onclick="abrirOnboarding()">Cadastrar organização</button>
create resolve quando o iframe sinaliza loaded; o objeto retornado expõe close, addEventListener e removeEventListener (eventos loaded, close, success), no mesmo espírito do bundle npm. Alternativa direta: 
const { close } = await window.openChargefyOnboarding('__SEU_TOKEN__', {
  theme: 'dark',
  isModal: false,
  allowClose: true,
})
O script define embed_origin com window.location.origin. Se o usuário abrir só o href em nova aba sem passar pelo loader, use a rota de redirect com query params conforme GET redirect — link de onboarding.

​
Eventos postMessage (integração avançada)

O iframe envia mensagens para a página hospedeira com type: CHARGEFY_ONBOARDING_EVENT e um campo event:
  • loaded — iframe pronto; opcionalmente inclui draft_id para retomar rascunho.
  • close — fluxo fechado.
  • success — onboarding concluído; pode incluir organizationId / api_key conforme implementação do app.
Apenas origens permitidas na configuração do script são aceitas (por padrão inclui o host do app Chargefy).

​
Ver também