不可能在我的电子商务网站上使用聚合物和影子DOM集成Paypal结帐
不可能在我的电子商务网站上使用聚合物和影子DOM集成Paypal结帐
提问于 2019-05-28 10:21:04
我想集成贝宝检查在我的网站建设与聚合物。为此，我尝试使用贝宝智能支付按钮，这是最简单的方式集成贝宝。但是，Paypal校验库似乎并不真正符合聚合物和Shadow-DOM。
- 首先，我尝试集成Shadow-DOM中的按钮，这会使按钮出现，然后在一秒钟后消失。我尝试了许多配置，但没有找到任何解决方案。
- 然后，我尝试集成
iframe中的按钮，该按钮指向一个正确呈现按钮的HTML。当我点击该按钮时，我被正确地重定向到Paypal结帐页面，但是在Paypal页面中会出现阻塞错误，并且我无法完成付款。 - 我也试图集成贝宝检查，避免贝宝库，但我没有找到任何一致的文档这样做。
- 第一次尝试(在阴影-DOM中)：
<div id="button"></div>
...
initPayment () {
paypal.Buttons({
createOrder: function(data, actions) {
console.log(data, actions);
let order = actions.order.create({
purchase_units: [{
amount: {
value: "0.01",
currency_code: "EUR"
},
reference_id: "123"
}]
});
return order;
},
onApprove: function(data, actions) {
return actions.order.capture().then((detail) => {
console.log(detail);
});
},
onError: function(error) {
console.log(error);
},
onCancel: (data, actions) => {
console.log(data);
},
}).render(this.shadowRoot.querySelector("#button"));
...- 第二次尝试(在
iframe中)：
...
<body>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
console.log(data, actions);
let order = actions.order.create({
purchase_units: [{
amount: {
value: "0.01",
currency_code: "EUR"
},
reference_id: "123"
}]
});
return order;
},
onApprove: function(data, actions) {
return actions.order.capture().then((detail) => {
console.log(detail);
});
},
onError: function(error) {
console.log(error);
},
onCancel: (data, actions) => {
console.log(data);
},
}).render("#button");
</script>
...
<div id="button"></div>
</body>我还注意到，当我将我的HTML页面分开测试时(它应该包含在iframe中)，结帐工作得很好。
回答 1
Stack Overflow用户
发布于 2019-06-13 19:02:16
您可以通过在签出中添加一个附加步骤来解决PayPal中的这一限制。
在我们的网站上，我们显示选择"Paypal，Apple Pay，Google Pay，CC“。当用户选择Paypal时，我们将以下元素添加到主体中(而不是在阴影中).
<div style="display: flex; width:100vw; height: 100vh;opacity:.8;background:#000">
<div id="paypal-button" style="display:flex;flex-grow:1;align-self:center;justify-content:center"></div>
</div>在调用window.paypal.Button.render之后
style: { size: 'responsive', layout: 'vertical' }这将把PayPal按钮，PayPal信用按钮和PayPal CC按钮集中在屏幕上。
然后在呈现onCancel/onError/onAuthorize中，删除背景和paypal按钮。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56340036
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号