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

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

```markup
// DEV окружение
<iframe 
    src="https://fps-ui.dev.mnxsc.tech/withdrawal?frame=true&token={ONE_TIME_TOKEN}"
    style="
    width: 400px; 
    height: 600px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>


// PROD окружение
<iframe 
    src="https://fps-ui.prod.mnxsc.tech/withdrawal?frame=true&token={OONE_TIME_TOKEN"
    style="
    width: 400px; 
    height: 600px; 
    border: 1px solid #CCC; 
    border-radius: 10px">
</iframe>
```

* Рекомендуемые размеры iframe: 400 x 600
* формирование ONE\_TIME\_TOKEN описано в разделе генерации [токена партнера.](https://docs.payanyway.ru/marketplace/sbp/widget-sbp-fps/autentifikaciya)

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

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

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

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

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

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

function receiveMessage(event) {

  // событие от виджета
  if(event.origin === 'https://fps-ui.prod.mnxsc.tech'){
  
      const data = event.data || {};
      console.log(data.type);
  }
}
```

| Тип события          | Описание                                                                                                          |
| -------------------- | ----------------------------------------------------------------------------------------------------------------- |
| initialized          | Виджет инициализирован                                                                                            |
| error                | Произошла ошибка отображения виджета, при этом data.error будет содержать код ошибки                              |
| loggedOut            | Пользователь завершил работу с виджетом                                                                           |
| verificationFinished | Верификация пользователя завершена, при этом в поле data.status будет результат операции: 'SUCCESS' либо 'FAILED' |
| withdrawalFinished   | Вывод завершен, при этом в поле data.status будет результат операции: 'SUCCESS' либо 'FAILED'                     |