xmoonlight

<img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

Здесь подробно расписано: как посчитать.

Посмотрите здесь

Вот.

includeHTML

1. Визуальные блоки (разметка): includeHTML для простой, быстрой и динамической подгрузки (или изначальной загрузки через тег) нужных визуальных блоков (код разметки блока) без перезагрузки всей страницы.
2. Стилизация GUI компонентов в разметке визуальных блоков: Bulma

Bulma by Jeremy Thomas.
An alternative to Bootstrap

3. Обработчики блоков: js/jquery для создания модульных обработчиков
4. Иконки: modernuiicons.com

Оставьте сайт (как он есть сейчас) на обычном PHP и отдельно создайте подгружаемые раздельно библиотеки обработчиков унифицированных блоков на нативном JS (без всяких JS-библиотек , типа jquery и подобных).

Как только унифицированный блок помещён на страницу (унифицированная форма, или нужна анимация, обработка ввода и отправки данных и т.д.) - подключайте нужную библиотеку (на стороне PHP, которая является обработчиком этого блока) и динамически "цепляйте" обработчик (класс обработки логики событий для этого блока) к нему при инициализации страницы (на стороне клиента).

Не забудьте включить кэширование статики для браузера (заголовки, отдаваемые сервером).

PS: Не нужно создавать трудности там, где их можно избежать.

Корректно создать работающий на большинстве устройств пользовательский web-интерфейс с требуемым функционалом на заранее оговоренной с Заказчиком технологии (простой шаблон или SPA/веб-приложение).

PS: fullstack - это, например, PHP+JS

Вот почему: javascript.ru/unsorted/top-10-functions

Два варианта:
1. Можно закрыть в robots.txt по "маске".
На сайте - нужно все линки с редиректом держать в отдельной секции/папке (речь про URI).
2. Просто по User-Agent сортируйте и всё.
Робот - линк не отображаем, юзер - отображаем.

Можно использовать любой или сразу оба.

Имя файла, к которому обращаетесь, рандомите в аякс-запросе и всё (1.js, 2.js, 3.js).

Я бы посоветовал обратиться на фриланс.

В 99.9% случаев: кодить без jQuery.
Когда звучат такие слова, как "глубокие знания", то речь идёт о скорости исполнения JS-кода и достижение максимально-возможной через знания того, что под "капотом" как функционируют все прослойки.
Ошибочное мнение, что речь идёт о знаниях стандартных JS функций, методов и алгоритмов.

А вообще, MaxKorz всё верно изложил.

Никак.
Вся доп.информация запрашивается ДО совершения транзакции и потом приходит уже от платёжного агрегатора прямым соединением к вашему серверу, где Вы разбираете этот запрос и получаете все введённые данные.

Если такой вариант не устраивает - тогда только в 2 этапа с передачей ОБЕЗЛИЧЕННОГО СВОЕГО ИДЕНТИФИКАТОРА КЛИЕНТА агрегатору платёжной системы при транзакции:
1. Принимаем данные от клиента на сервер обязательно через SSL и временно сохраняем в базе с привязкой к любому уникальному идентификатору (на основе сессии/времени/имени пользователя и т.д. + "наша соль"), который мы можем сгенерить сами, например: UserPayment=hash(userid+соль).
2. После проводим транзакцию с добавлением поля идентификатора и проверяем ответ агрегатора: если платёж прошёл - то находим нужную запись в базе (идентифицируем) по идентификатору и производим необходимые действия.

Ну так вместо формы вставляйте сообщение с таймером на JS на стороне сервера.

1. На стороне сервера задайте: Оставшееся время = [текущее время] - [время последнего сабмита].
2. Визуализируйте таймер на JS: можно текстовым режимом, можно графическим.
3. По истечении таймера - загрузите форму (или проще: обновите страницу через js).

SPA - includeHTML