Встраивание в iframe

Код для вставки виджета в iframe

// DEV окружение
<iframe 
    src="https://mid-ui.dev.mnxsc.tech/?token={PARTNER_TOKEN}"
    style="
    width: 400px; 
    height: 640px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>


// PROD окружение
<iframe 
    src="https://mid-ui.prod.mnxsc.tech/?token={PARTNER_TOKEN}"
    style="
    width: 400px; 
    height: 640px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>

• Рекомендуемые размеры iframe: 400 x 640

• формирование PARTNER_TOKEN описано в разделе Аутентификация

Тестовая среда для настройки внешнего вида

Для более точной настройки внешнего вида виджета, можно воспользоваться тестовой средой, где можно регулировать размер iframe и цветовые темы:

Moneta ID - IFrame Test Page

Ограничения использования iframe

Ограничение	Решение
Не работает вставка https iframe в http родителя. Пример: На страницу по адресу http://localhost:8080 Добавлен код <iframe src="https://mid-ui.dev.mnxsc.tech/..."	Браузеры ограничивают возможности таких iframe, поэтому для тестов нужен https родитель: Например: https://localhost:8080

Настройка внешнего вида виджета

Тестировать внешний вид можно в нашей тестовой среде.

В урле виджета можно передавать следующие параметры для настройки внешнего вида:

Параметр	Описание	Значение по-умолчанию	Возможнные значения	Пример
t-main-color	основной цвет кнопок и ссылок виджета	00C489	HEX значение цвета	?t-main-color=CCC
t-font	шрифт виджета	Roboto	Пока что только Roboto и системные шрифты браузера. При необходимости можно будет добавить другие веб-шрифты как Roboto.	?t-font=arial

Получение событий из iframe

Виджет отсылает родительской странице результат верификации, который можно обработать в js коде:

// код на сайте:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

  // событие от виджета
  if(event.origin === 'https://mid-ui.prod.mnxsc.tech'){
  
      const data = event.data || {};
      
      const type = data.type;
      const value = data.value;
      
      if(type === 'status'){
      
          // value is "InProgress" | "Verified" | "VerificationFailed"
          console.log('verification status', value);
      }
  }
}