Как тинькофф разработчики сделали такой window.confirm объект?

Question

[Максим Иванов]

Зашел на сайт тинькофф и решил добавить карту, и тут открывается нативный блок (в DOM структуре его явно нет и он показывается как отдельное окно, которое независит от страницы и его ресайзинга).



Чисто интересно, как у них это работает?

Понятное дело, самому такое не реализовать при помощи встроенного window.confirm



Почему я посчитал, что оно нативное, так как если в этот же момент, выполнить обычный window.confirm, он не выполнится пока не закроется этот на их странице.

Само поле обычное вроде как:

<input type="tel" name="cardNumber" value="" autocomplete="off" autocapitalize="sentences" class="ui-input-card__field ui-input-card__field_cardNumber ui-input-card__field_collapse" data-cobrowsing-secure="input">

Единственное, что нашел вот
data-cobrowsing-secure="input"

А отсюда следует такая статья:
https://talkative.uk/is-cobrowsing-secure

Но как бы это что? Я даже не могу найти стандарт какой-нибудь HTML об этом...

Answer 1

[sasha]

это Payment api
https://www.w3.org/TR/payment-request/

Comments

[Максим Иванов]

у них там атрибут ключевой data-cobrowsing-secure в html, но я не нашел в W3C спецификации ничего об этом

[sasha]

Максим Иванов, https://www.w3.org/TR/2011/WD-html5-20110525/eleme... это атрибут data-* и это исключительно для внутренних скриптов.

[sasha]

Максим Иванов, кинь ссылку на модалку, где она есть

[Kovalsky]

Максим Иванов, "у них там атрибут ключевой data-cobrowsing-secure в html, но я не нашел в W3C спецификации ничего об этом" - неудивительно, слово "data" как раз и означает, что атрибут кастомный, а в остальном это вроде бы Payment. К тому же с чего вы взяли что это ключевой атрибут и он имеет какое-либо отношения к вопросу, cobrowsing это не о платежах и не о картах.

[sasha]

Максим Иванов, это точно payment api. https://developers.google.com/web/updates/2016/07/...

[Максим Иванов]

понял, ну значит это разруливается chrome, но вот только, если атрибут для внутренних скриптов, что они делают в общем-то с этим?

[Максим Иванов]

Все понял, ну тогда все понятно, где и что читать)

[Максим Иванов]

смените ответ ("возможно это Payment api, которое разрабатывается") на "Это Payment Request API"

Answer 2

[Sly_tom_cat .]

Это окно рисует сам браузер (пока только Chrome) делается это через Payment Request API.

В текущем варианте он может:

На десктопе (в хроме начиная с версии 61): вытаскивать карты карты которые были добавлены в autofill и привязанные к аккаунту google (обычно привязывают для оплаты в playmarket-е) - последнее еще не совсем стабильно работает.

На мобильном (в хроме начиная с версии 54): + к тому что на десктопе формироавать через androidpay app токен оплаты (криптованный набор данных о платеже + собственно androidpay токен).

В ближайшее время Google планирует запустить Pay with Google - обновленный вариант работы через интерфейс Payment Request API (там чуть побольше всего шифруется, подписывается - т.е. более защищенный вариант)

Полного аналога этого окна через JS не создать.

Answer 3

[JihadTV]

Это вроде дефолтное окно при автозаполнении данных о карте.

Comments

[Максим Иванов]

Так как оно реализовано, я не нашел на MDN?

[Алексей Уколов]

Никак не реализовано, разработчики сайта не имеют к нему отношения - это окно показывает менеджер карт Хрома независимо от сайта.

[Максим Иванов]

Понял, то есть это чисто в Chrome такая штука будет работать? Да, я заметил, что откуда-то в chrome мои карты привязаны, хотя вроде как я не помню, что я их вводил, ну может и вводил...

Answer 4

[lubezniy]

Не скажу за то, как сделано, но window.confirm в принципе использовать сейчас крайне не советую. В некоторых конфигурациях Chrome (мне так и не удалось понять, в каких) при вызове window.confirm вместо окошка вываливается JavaScript-ошибка в консоль.

Comments

[Максим Иванов]

window.confirm - это стандартная legacy функция, разве она будет падать? Найдите доказательства

[lubezniy]

Максим Иванов, я не собираюсь кому-либо что-то доказывать, а описываю личный практический опыт. И гуглинг таки показал, что он был не только у меня, только я сейчас не помню точный текст ошибки. Знаю, что проблема воспроизводилась не на каждом Chrome.