Customer pays with Paypal and immediately leaves the website causes him not to get the item

I am using paypal with react-paypal-button-v2 to get payments on my website. I was testing a few things on my Sandbox account and realized that if the customer pays, there is a window of about 3 seconds until the success function fires

           onSuccess={() => {
             this.props.handlePaymentComplete();
           }}

The problem is, if the customer pays and quits my website in that 3 seconds window, he will be charged the money but the function will not fire and therefore his information will not be saved to the DB.

I'm pretty sure that it is a problem with the react-paypal-button-v2, but I couldn't find a decent way to connect paypal with react. Is there a way to solve this issue?

Solution

onSuccess is no good, that is a bad example and should not be the default

There is a commented out example below that should work fine

                    onApprove={(data, actions) => {
                        // Capture the funds from the transaction
                        return actions.order.capture().then(function(details) {
                            // Show a success message to your buyer
                            alert("Transaction completed by " + details.payer.name.given_name);
                        });
                    }}

However, this is all client-side and is still vulnerable to potential interruption before being saved in your database.

A real solution is to extend this to be a server-side integration, which is usually done with two server-side routes that call the PayPal API: 'Set Up Transaction', and 'Capture Transaction', as documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/

The front-end to pair with those routes is here, which you can adapt for JSX: https://developer.paypal.com/demo/checkout/#/pattern/server