首页 > 解决方案 > PayPal Checkout.js 弹出 OnCancel 事件在 Edge 浏览器中自动触发

问题描述

描述 :

单击按钮并完成加载弹出窗口后,立即调用 onCancel 并且覆盖消失但弹出窗口保持打开状态。

我在 GitHub 中找到了一些链接 - https://github.com/paypal/paypal-checkout-components/issues/750并且已经关闭,告诉我们更改我们的 Internet/Intranet 设置和受信任的站点。这可能适用于 IE,但不适用于 Edge,我们也不能告诉客户在向我们下订单之前更改浏览器的设置。

使用的代码(与https://developer.paypal.com/docs/archive/checkout/how-to/customize-flow/#相同,仅添加 onCancel 和 onError):

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript" src="https://www.paypalobjects.com/api/checkout.js"></script>

 

paypal.Button.render({
//env: 'sandbox', // sandbox | production
env: 'sandbox',
client: {
//sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
sandbox: '@Model.ConfigData.PaypalClientId',
production: 'xxxxxx'
},
// Specify the style of the button
style: {
//layout: 'vertical', // horizontal | vertical
size: 'responsive', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'blue' // gold | blue | silver | white | black
},

// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,

// payment() is called when the button is clicked
payment: function (data, actions) {
debugger;
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '@Model.CreditData.PaymentAmount', currency: 'USD' },
//invoice_number: 'TransactionID',
description: 'Your payment reference number is :' + 'TransactionID',
reference_id: 'InvoiceReference'
}
],
redirect_urls: {
return_url: window.location.protocol.replace(":", "") + "://" + window.location.host.replace("/", "") + '/' + window.location.pathname.replace("/", "") + '?Success=True&RawURL=' + 'returnValue',
cancel_url: window.location.protocol.replace(":", "") + "://" + window.location.host.replace("/", "") + '/' + window.location.pathname.replace("/", "") + '?Success=False'
}
}
});
},

// onAuthorize() is called when the buyer approves the payment
onAuthorize: function (data, actions) {
var return_url = '';
// Make a call to the REST api to execute the payment
actions.payment.execute().then(function () {
//console.log(data);
return_url = data.returnUrl;
});

actions.payment.execute().then(function (res) {
if (res.state === 'approved') {

}
else {

}
}).catch(function (error) {
console.log('onCancel');
console.log(error);
});
},
// Pass a function to be called when the customer cancels the payment
onCancel: function (data, actions) {
console.log('onCancel');
console.log(data);
},
onError: function (error) {
console.log('onError');
console.log(error);
}

}, '#paypal-button-container');

 

 

<div id="paypal-button-container"></div>

错误 -

在此处输入图像描述

标签: c#model-view-controllerpaypal-sandbox

解决方案


推荐阅读