如何知道 PayPal Smart Payment Button 是不是已完成渲染
Posted
技术标签:
【中文标题】如何知道 PayPal Smart Payment Button 是不是已完成渲染【英文标题】:How to know if PayPal Smart Payment Button has finished rendering如何知道 PayPal Smart Payment Button 是否已完成渲染 【发布时间】:2020-04-04 15:29:50 【问题描述】:我正在尝试add the PayPal Smart Payment button to my website。用于呈现按钮的 html 容器是通过 AJAX 请求接收的,其中 paypal.Buttons.render()
方法称为 AJAX 请求的 onsuccess
。现在一切正常,除了按钮需要一些时间在网站上呈现并变为活动状态。我想提示我的用户该按钮正在呈现或加载,因此当 AJAX 请求返回并且没有显示任何按钮时,他们不会处于黑暗中。有没有办法知道按钮何时完全呈现?
$.ajax(
url: example/foler,
data: data,
success: success(data)
);
function success(data)
// data = <div id='paypal-button-container'></div>
paypal.Buttons().render('#paypal-button-container');
// Display "Button Loading..."
// Find out if button has completely rendered, then turn off "button loading..."
【问题讨论】:
这里有一些优化按钮渲染的建议方法:developer.paypal.com/docs/checkout/troubleshoot/performance您通过 Ajax 获取哪些数据? 【参考方案1】:你可以使用 .then(callback) 因为 render() 返回一个 Promise。
https://developer.mozilla.org/en-US/docs/Web/javascript/Guide/Using_promises
Promise 是一个表示最终完成或失败的对象 的异步操作。因为大部分人都是消费者 已经创建的承诺,本指南将解释 在解释如何创建它们之前返回承诺。
本质上,promise 是您附加的返回对象 回调,而不是将回调传递给函数。
$.ajax(
url: example/foler,
data: data,
success: success(data)
);
function success(data)
// data = <div id='paypal-button-container'></div>
// Display "Button Loading..."
paypal.Buttons().render('#paypal-button-container').then(function()
// Button has completely rendered, then turn off "button loading..."
);
【讨论】:
这不会等待借记卡选项加载,这仍然会使任何按钮无法点击。这是一个例子:streamable.com/j6fw4e【参考方案2】:这里有一些优化按钮渲染的建议方法: https://developer.paypal.com/docs/checkout/troubleshoot/performance/
您通过 Ajax 获取什么数据?
如果您在显示按钮之前等待某些条件,请预渲染隐藏的容器和按钮,然后在成功回调时显示它们。
或者,如果按钮作为 iframe 加载 - 在这种情况下将其包装在 div 中,然后只需使用 css 将加载 gif 指定为 iframe 上的背景图像。
div.button-wrapper-div
background:url(../images/loader.gif) center center no-repeat;
```
【讨论】:
无法将按钮放置在隐藏的 div 中,因为它需要像amount
这样的预配置项才能呈现。 iFrame 解决方案似乎更好,尽管比应有的复杂一点,因为它必须在返回父窗口之前处理成功/失败回调。以上是关于如何知道 PayPal Smart Payment Button 是不是已完成渲染的主要内容,如果未能解决你的问题,请参考以下文章
如何替换 Jms Payment Paypal Bundle 中的文本
PAYMENT.SALE.COMPLETED webhook 事件中的 PayPal 订阅 ID 和交易 ID 在哪里?如何获取他们的详细信息?
调用 PayPal API /payments/payment 时如何传递送货地址
使用 Paypal 帐户的 Paypal Direct Payment API