Exemplos avançados (Web)

Loading state com spinner

            const session = await sdk.openWebView({
  token, url, remoteName, elementName, container,
  listener: {
    onWebViewStarted: () => (spinner.hidden = false),
    onWebViewLoaded:  () => (spinner.hidden = true),
    onWebViewError:   () => (spinner.hidden = true)
  }
})
   

Integração com React

            import { useEffect, useRef } from 'react'
import { CieloWebSdk } from 'dig-cielo-webview-sdk-web'

export function MfeContainer({ token, url, remoteName, elementName }) {
  const ref     = useRef(null)
  const session = useRef(null)

  useEffect(() => {
    if (!ref.current) return
    CieloWebSdk.getInstance()
      .openWebView({ token, url, remoteName, elementName, container: ref.current })
      .then(s => { session.current = s })
    return () => { session.current?.unmount() }
  }, [token, url])

  return <div ref={ref} style={{ width: "100%", minHeight: 400 }} />
}
 

Gerenciando múltiplos MFEs em abas

            let sessaoAtiva = null

async function abrirMFE(config) {
  sessaoAtiva?.unmount()
  sessaoAtiva = await sdk.openWebView({
    ...config,
    container: document.getElementById('mfe-container'),
    onClose: () => { sessaoAtiva?.unmount(); sessaoAtiva = null }
  })
}