Как показать загрузчик при нажатии на один из вариантов оплаты paypal


Я работаю над проектом Django, и я добавил paypal на свой сайт.
Я знаю основы python и javascript, но я все еще новичок в них.

После оплаты через paypal требуется некоторое время для выполнения внутреннего кода, поэтому я хочу показать загрузчик, когда пользователь нажимает на один из вариантов оплаты через paypal. enter image description here

У меня нет идеи, как это сделать.

Заранее спасибо.

Чтобы показать загрузчик, вам понадобится JavaScript, чтобы отключить кнопки (при желании) и отобразить что-то вроде... спиннера, возможно? Не уверен, какой именно "загрузчик" вам нужен, но вот пример:

var container = document.getElementById('paypal-button-container');
container.innerHTML = ''; //blank it first, otherwise you may have errors
container.innerHTML = `        <div align="center">
          <div id="mySpinner" class="spinner-rotate" style="margin-top:10px;"></div>
        </div>`;

А это в .css вашего сайта или в теге <style>:

.spinner-rotate {
  display: inline-block;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(33, 128, 192, 0.8);
  border-radius: 100%;
  animation: rotation 0.7s infinite linear;
}

Существуют тысячи альтернативных CSS-крутилок и множество вещей, которые вы можете сделать вместо них, конечно же.

Редактирование: в качестве альтернативы вы можете временно скрыть кнопки, установив "display:none;", вместо того, чтобы удалять их HTML, если вы хотите, чтобы они оставались пригодными для использования при повторном отображении - но тогда вам нужно будет добавить контейнер для спиннера, или иметь его уже в вашем статическом HTML с display:none; и использовать display:both;, чтобы показывать его по требованию.

Вы можете добавить некоторое наложение на вашу страницу после отправки запроса в PayPal. Внутри этого оверлея вы можете использовать, например, Fontawesome. Что-то вроде этого:

const payBtn = document.getElementById('payBtn')
const payOverlay = document.getElementById('payOverlay')

payBtn.addEventListener('click', function() {
  payOverlay.classList.add('overlay--visible');
  
  setTimeout(function() {
    payOverlay.classList.remove('overlay--visible');
  }, 3000)
})
.overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 20px;
  border-radius: 5px;
  background: #aaa;
}

.overlay--visible {
  display: flex;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<button id="payBtn">Pay with PayPal</button>

<div id="payOverlay" class="overlay">
  <div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
  </div>
</div>

После завершения запроса закройте оверлей. Здесь я смоделировал это с помощью setTimeout().

Вернуться на верх