@atomicfidev/transact-javascript/index.js

Atomic Transact Javascript SDK.

let iframeEventListener

/**
 * Atomic Product configuration
 * @type {{IDENTIFY: string, WITHHOLD: string, VERIFY: string, DEPOSIT: string}}
 */
exports.Product = {
  DEPOSIT: 'deposit',
  VERIFY: 'verify',
  IDENTIFY: 'identify',
  WITHHOLD: 'withhold'
}

exports.Atomic = {
  /**
   * Launch the Transact experience
   * @param options - Options for launching Transact
   * @param options.config - Atomic config object to customize Transact - https://docs.atomicfi.com/reference/transact-sdk#sdk-parameters
   * @param options.onInteraction - Callback for when a user interacts with Transact
   * @param options.onDataRequest - Callback for when Transact requests additional data
   * @param options.onFinish - Callback for when Transact is finished
   * @param options.onClose - Callback for when Transact is closed
   */
  transact: ({
    config,
    container = undefined,
    environmentOverride = undefined,
    onInteraction = undefined,
    onDataRequest = undefined,
    onFinish = undefined,
    onClose = undefined
  } = {}) => {
    config = config || {}
    onInteraction = onInteraction || function () {}
    onDataRequest = onDataRequest || function () {}
    onFinish = onFinish || function () {}
    onClose = onClose || function () {}

    if (!container) {
      document.body.style.overflow = 'hidden'
    }

    let iframeElement = document.createElement('iframe')

    iframeElement.src = `${
      environmentOverride || 'https://transact.atomicfi.com'
    }/initialize/${btoa(
      JSON.stringify({
        inSdk: true,
        platform: {
          name: 'browser',
          version: '1.0.5'
        },
        ...config
      })
    )}`

    const baseStyles = [
      { width: '100%' },
      { height: '100%' },
      { 'z-index': '888888888' },
      { 'border-width': '0' },
      { 'overflow-x': 'hidden' },
      { 'overflow-y': 'auto' }
    ]

    const modalStyles = [
      { position: 'fixed' },
      { top: '0' },
      { left: '0' },
      { right: '0' },
      { bottom: '0' }
    ]

    const styles = [...baseStyles, ...(container ? [] : modalStyles)]

    iframeElement.id = 'atomic-transact-iframe'
    iframeElement.style.cssText = styles
      .map((style) =>
        Object.entries(style)
          .map(([key, value]) => `${key}: ${value}; `)
          .join('')
      )
      .join('')
      .trim()

    if (container) {
      const containerElement = document.querySelector(container)

      if (containerElement) {
        containerElement.appendChild(iframeElement)
      } else {
        throw new Error(`No container found for "${container}"`)
      }
    } else {
      document.body.appendChild(iframeElement)
    }

    iframeEventListener = _handleIFrameEvent({
      onInteraction,
      onDataRequest,
      onFinish,
      onClose,
      iframeElement
    })
    window.addEventListener('message', iframeEventListener)

    return {
      close: () => _removeTransact({ iframeElement })
    }
  }
}

function _handleIFrameEvent({
  onInteraction,
  onFinish,
  onClose,
  onDataRequest,
  iframeElement
}) {
  return (event) => {
    const { payload, event: eventName } = event.data
    switch (eventName) {
      case 'atomic-transact-close':
        onClose(payload)
        _removeTransact({ iframeElement })
        break
      case 'atomic-transact-finish':
        onFinish(payload)
        _removeTransact({ iframeElement })
        break
      case 'atomic-transact-interaction':
        onInteraction(payload)
        break
      case 'atomic-transact-data-request':
        onDataRequest(payload)
        break
      case 'atomic-transact-open-url':
        window.open(payload.url, '_blank')
        break
      default:
        console.log('Unhandled postMessage Event', eventName)
    }
  }
}

function _removeTransact({ iframeElement }) {
  window.removeEventListener('message', iframeEventListener)
  if (iframeElement.parentNode !== document.body) return
  document.body.style.removeProperty('overflow')
  document.body.removeChild(iframeElement)
}