PayPal window does not close after successful recurring payment

[andriichuk]

Hi there! I have added a PayPal account as a recurring payment method and after successful payment I want to close the stuck PayPal popup. How to handle this action properly or maybe there is a workaround? I use custom payment form implementation (not drop-in).

To Reproduce Steps to reproduce the behavior:

1. Implement PayPal recurring payments as described in the manual https://docs.adyen.com/payment-methods/paypal/web-component#recurring-paypal-payments.
2. After the first payment with storePaymentMethod: true I have a new item in the stored payment methods https://docs.adyen.com/api-explorer/#/CheckoutService/v68/post/paymentMethods__resParam_storedPaymentMethods
3. I select a new item for recurring payment and make request to Adyen:

      "paymentMethod":{"type":"paypal","subtype":"sdk","storedPaymentMethodId":"F7P...."}
      ...
      "recurringProcessingModel":"UnscheduledCardOnFile","shopperInteraction":"Ecommerce","enableRecurring":true,"storePaymentMethod":true
   

4. Then I get a response, the payment was successful, but the PayPal popup window is not closed.
5. In my submit handler I have login only for the response.action handling.

Adyen Web SDK

• Version: v4.9.0

Desktop:

• OS: Ubuntu 18.04.6 LTS
• Chromium
• Version 98.0.4758.80 (Official Build)

[ribeiroguilherme]

Hi @andriichuk .

Can you clarify what do you mean by I use custom payment form implementation (not drop-in) ? Do you mean Component solution? Can you share the code that you are using to create the PayPal component?

[andriichuk]

Hi @ribeiroguilherme! Thank you for response, here are some snippets

const checkout = await AdyenCheckout({
    paymentMethodsConfiguration: {
        paypal: {
            style: {
                shape: 'pill',
                height: 40
            },
            configuration: {
                intent: 'authorize'
            },
            showPayButton: true
        }
    }
});

// ...

for (var methodIndex in storedPaymentMethods) {
    var storedMethod = storedPaymentMethods[methodIndex];
    
    // create DOM element for stored method

    storedMethod.storedPaymentMethodId = storedMethod.id;

    checkout.create('paypal', storedMethod).mount('#paypal-method-selector');
}

// then add storedPaymentMethodId field to request before sending to the backend
// state.data.paymentMethod.storedPaymentMethodId

After that, I click on the PayPal button, the PayPal window is opened, the client-side makes a request to the backend, then I receive a webhook with successful recurring payment, but the PayPal window still remains. I guess it is because we don't have action to handle as we do for the first payment component.handleAction(response.action);.

I already found a temporary solution for popup closing but will be better to do this using Adyen SDK:

         window.paypal.Buttons.instances.forEach(function (instance) {
            setTimeout(function () {
                instance.close();
            });
        });

Probably this issue is related to the https://github.com/Adyen/adyen-web/issues/1480.

[ribeiroguilherme]

Hey @andriichuk ,

We don't support PayPal as stored payment method as explained on #1480 , so indeed what you are trying to achieve here might not work as you expected, and unfortunately there is nothing we can do from our side. Cheers