单击贝宝付款选项之一时如何显示加载程序

Question

我一直在做一个 Django 项目，我在我的网站上添加了 paypal。
我知道基本的 python 和 javascript，但我对它们还是陌生的。

通过 paypal 付款后，需要一些时间在内部执行一些代码，因此我想在用户单击其中一个 paypal 付款选项时显示加载程序。

我不知道该怎么做。

提前致谢。

编辑
我按照 diealtebremse 在他或她的回答中所说的那样做了，并且它适用于我的客户按钮。但它没有覆盖贝宝按钮。

我的html看起来像这样

<div id="paypal-button-container">
  <!-- PayPal Buttons load -->
  <a id="payBtn" href="somewhere" class="btn btn-success btn-lg">my custome button</a>
</div>

Answer 1

要显示加载程序，您需要 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;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

有数以千计的替代 CSS 微调器，当然还有很多你可以做的事情。

编辑：或者您可以通过设置“display:none;”暂时隐藏按钮如果您希望它们在重新显示时仍然可用，而不是消隐它们的 HTML - 但是您需要为微调器附加一个容器，或者已经在静态 HTML 中使用display:none;并使用 display:both；按需显示。

Answer 2

您可以在向 PayPal 发送请求后向您的页面添加一些叠加层。在该叠加层中，您可以使用例如字体太棒了。像这样：

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()模拟了一下。

单击贝宝付款选项之一时如何显示加载程序

How to show a loader when one of the paypal payment options gets clicked

javascript

python

django

paypal