@tamara-solution/checkout/src/helpers/frame-template.js

Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.

import { createElement } from '@/helpers/document-html'
import getPlaceholderElement from '@/helpers/placeholder-element'

function noop() {}

function generateFrameElement(params) {
  const { url, styles = {} } = params || {}
  const loadedCallback = params.loaded || noop
  const checkoutURL = url || ''
  const frameStyle = styles.frame || ''
  const wrapperStyle = styles.wrapper || ''
  const iframeStyle = styles.iframe || ''
  const backgroundStyle = styles.background || ''

  const frameElement = createElement('div')
  const wrapperIframe = createElement('div')
  const backgroundElement = createElement('div')
  const iframe = createElement('iframe')
  const placeholderElement = getPlaceholderElement()

  frameElement.setAttribute('id', 'tamara-checkout-frame')
  frameElement.setAttribute('style', frameStyle)

  wrapperIframe.setAttribute('style', wrapperStyle)

  backgroundElement.setAttribute('style', backgroundStyle)

  iframe.setAttribute('id', 'tamara-checkout-iframe')
  iframe.setAttribute('src', checkoutURL)
  iframe.setAttribute('frameborder', '0')
  iframe.setAttribute('style', iframeStyle)
  iframe.addEventListener('load', loadedCallback)

  wrapperIframe.appendChild(placeholderElement)
  wrapperIframe.appendChild(iframe)
  frameElement.appendChild(wrapperIframe)
  frameElement.appendChild(backgroundElement)

  return { frameElement, iframe, wrapperIframe }
}

export default generateFrameElement