Description :
After the button is clicked and the popup finished loading, onCancel is called immediately and overlay disappears but the popup stays open.
I found some link in GitHub - https://github.com/paypal/paypal-checkout-components/issues/750 and already closed, telling us to change our internet/intranet settings and trusted sites. This may work for IE but not for Edge and we can also not tell customers to change settings on their browser before placing an order with us.
Code used (same as
https://developer.paypal.com/docs/archive/checkout/how-to/customize-flow/#[
^], only added onCancel and 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',
client: {
sandbox: '@Model.ConfigData.PaypalClientId',
production: 'xxxxxx'
},
style: {
size: 'responsive',
shape: 'rect',
color: 'blue'
},
commit: true,
payment: function (data, actions) {
debugger;
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '@Model.CreditData.PaymentAmount', currency: 'USD' },
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: function (data, actions) {
var return_url = '';
actions.payment.execute().then(function () {
return_url = data.returnUrl;
});
actions.payment.execute().then(function (res) {
if (res.state === 'approved') {
}
else {
}
}).catch(function (error) {
console.log('onCancel');
console.log(error);
});
},
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>
Error -
Link - http://i66.tinypic.com/34oyhw6.png[^]
What I have tried:
Same code is working in all browser but this same code is not working in Edge browser and not sure what to do to fix this issue.