ReactJS Paypal subsriptions

Question

I would like to accept a paypal payment on my ReactJS app. The payment is a subscription. Now the thing is that onApprove the paypal window doesn't close automatically. I would like to know how to handle this correctly at this point.

useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://www.paypal.com/sdk/...;
    script.onload = () => {
        if (document.getElementById('paypal-button-container-...')) {
            window.paypal.Buttons({
                style: {
                    shape: 'rect',
                    color: 'black',
                    layout: 'vertical',
                    label: 'subscribe'
                },
                createSubscription: function(data, actions) {
                    return actions.subscription.create({
                        'plan_id': '...'
                    });
                },
                onApprove: function(data, actions) {
                    console.log("Zahlung erfolgreich genehmigt!", data);
                    alert(data.subscriptionID);
                },
                onCancel: function(data) {
                    console.log("Zahlung wurde vom Benutzer abgebrochen.", data);
                },
                onError: function(err) {
                    console.error("Beim Verarbeiten der Zahlung ist ein Fehler aufgetreten:", err);
                }
            }).render('#paypal-button-container-...');
        }
    }; // 3F8DR5FHWC74
    document.body.appendChild(script);
    return () => {
        document.body.removeChild(script);
    }
}, []);

edit: I tried using following onApprove:

                onApprove: function(data, actions) {
                    return actions.subscription.get().then(details => {
                        console.log("Zahlung erfolgreich! Danke ");
                    });
                },

This works fine

Answer 1

In the onApprove function, do not use alert(). Alert blocks. Do something else.

For server-side notification, subscribe to the webhook event PAYMENT.SALE.COMPLETED.

If that notification is not fast enough on its own, also have the onApprove function call the server to have it do a GET API call to retrieve the subscription status.