CRITICAL: Paypal smart button onApprove suddenly not working

[kunzhao1985]

Hi, 

I have a Paypal smart button and the onApprove javascript callback suddenly stopped to work since about an hour ago. I was testing the subscription function of the website and the callback was working quite well before. It seems that there are some changes on the payment complete window. Previously the payment window automatically closes after finish. But now it is showing a complete page with a big complete tick and I need to manually close it.  Below is my code which was working well in the last few days (the alert message could show up before now the msg doesn't show up anymore)

paypal.Buttons({

fundingSource: paypal.FUNDING.CARD,

style: {

layout: 'vertical',

size: 'responsive',

height:40

},

createSubscription: function(data, actions) {

return actions.subscription.create({

'plan_id': 'XYZ'

});

},

onApprove: function(data, actions) {

alert('You have successfully created subscription ' + data.subscriptionID);

// ...some more codes to send msg to server side

}

[drakaria]

I'm having the same issue. This project was working last week, then I came back today with no code changed and it's no longer working. The payment is successful, the subscription is created successfully, but the checkout window doesn't close. The only option is to close that window, at which point the PayPal JS executes the 'onCancel' function

[kunzhao1985]

Thanks for your reply drakaria! Looks like I am not the only victim of this. It seems like only the payment for subscription has failed. 

It is ridiculous that Paypal changed their API logic without giving any notice to the developer. 

I think I will look for other payment solution in future since I am disappointed with Paypal for the poor documentation and lack of support.

[drakaria]

This problem has now gone away without me changing anything. Would really like to know why this happened and if it'll happen again

Edit: Nevermind it's doing the same thing again 😞

[Zihaow]

I'm experiencing the same problem. the popup window won't close automatically and I can't get onApprove working. PayPal come and solve this.

[ainieeeee]

Glad to know that I am not the only one to experience this issue. I tried to find alternative way by creating some logic in onCancel because I can see that when I manually close the window after completing the payment, it will triggered code writen in onCancel part. But data return in onCancel does not help me to create the alternative solution. Really hope Paypal team will solve this issue faster. Otherwise, it will so useless to use Paypal Smart Button for Subscription function.

[newmedia]

This happens to me too but only where I create a subscription as a guest (eg, using a card and not creating a paypal account)

[apesyntax]

I am having the same issue onApprove code is not rendering but the subscription is successful, the payment box does close automatically but the code inside the onAppove wont start.  

methods: {
// Mount paypal button
mountpaypalbutton() {
// eslint-disable-next-line no-undef
paypal
.Buttons({
style: {
shape: "rect",
color: "blue",
layout: "vertical",
label: "paypal",
size: "medium"
},
createSubscription: async function(data, actions) {
// 1. get the selected package
const package_response = await localStorage.getItem(
"@selectedpackage"
);
const package_results = JSON.parse(package_response);
let plan_ID = package_results.plan_id; // user plan id
// 2. Create a subscription
return actions.subscription.create({
plan_id: plan_ID
});
},
// eslint-disable-next-line no-unused-vars
onApprove: async function(data, actions) {

let subscription_id = ""
localStorage.setItem("@subscriptionid", JSON.stringify(subscription_id));

//Firebase config
messagesRef.child(this.userID).update(this.newSub);
this.newSub.packageselect = '' ;
this.newSub.subscrptionId = '';
/**
* NOTE
* - Save the subscription id in your Database
* - This is important to ensure you can always
* - Check on the status when user logs in or wants
* - to make payment
*/
//Firebase config
// messagesRef.child(this.userID).update(this.newSub);
// this.newSub.packageselect = '' ;
// this.newSub.subscrptionId = '';

// 4. Remove the selected package from the local storage

localStorage.removeItem("@selectedpackage");

// 5. Lets use alert once transcation is completed
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
})
.render("#paypal-button-container");
}

[Naj3007]

I am having the same issue onApprove. Have you get solution ?

[yiusay]

I realized that this problem happens when the user clicks the black transparent div rendered on top of the page while the popup window is open. 

Specifically, this div.

<div id="paypal-overlay-uid_xxxxxxxxxxxxxxxxxxxxxx" class="paypal-checkout-sandbox" animation-name: show-container;"></div>

If the user clicks this div while the popup window is open, even after the user completes the payment, the popup window won't close automatically and onApprove will not be called.

This is really a critical problem since the payment itself successes but we developers have no way to know it. So, we cannot give any feedback such as sending login information to the users. As the result, the users cannot get the service for the payment although they are actually charged.

It is sad that this problem was raised in February but still not solved yet. My workaround for this problem is to hide the black transparent div as soon as it appears by setting "display: none" so that the users cannot click it. 

I appreciate if you could give some feedback.