Using the paypalhere sdk in react web app-CodePudding

I'm building a web app for inventory management. I've got React on the frontend, and Nodejs mongodb on the backend. Our company vends at local events and most of our sales are paid with cards. To process card payments we use the Paypal Here app on our phones which connects to a card reader and we manually type in the payment amount. Since we have over 200 different products (custom art), we decided to build this application so that we can quickly search for the product(s) being purchased, add them to the "cart" where the total price plus tax will be automatically calculated, and then a total of 3 payment option buttons will be present, one for cash, one for venmo, and one for card. At first, I figured the card selection button could link externally to the Paypal Here app and the payment amount would be automatically filled in when redirected, but then I realized I could actually integrate a Paypalhere sdk in the application, which sounded better than a redirect. There's three different sdks, one for ios, one for android, and one for the web, and the one for the web is what I need. I looked for an npm package, no luck, then I tried manually inserting the script and src into the document via react helment, no luck, on componentDidMount, no luck. I'm not used to not having an npm package to use, so my question today is how can I integrate this sdk into my React app?

Heres a link to the web integration documentation: https://developer.paypal.com/docs/integration/paypal-here/sdk-dev/web/#integration

Heres an the code I used to manually insert the script onComponentDidMount, I don't know if it worked, but even if it did, I don't know how to access it...

useEffect(() => {
        const script = document.createElement("script");

        script.src = "https://www.paypalobjects.com/pph/websdk/js/pphwebsdk-1.1.14.min.js";
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

CodePudding user response：

Don't remove the script after adding it.

You can set a callback function to have your code that uses PPH run after the script loads. Here's an example with a callback function, it's for regular PayPal buttons rather than PPH, but you can adapt it to your needs.

function loadAsync(url, callback) {
  var s = document.createElement('script');
  s.setAttribute('src', url); s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

loadAsync('https://www.paypal.com/sdk/js?client-id=sb&currency=USD', function() {
  paypal.Buttons({

    // Set up the transaction
    createOrder: function(data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '0.01'
                }
            }]
        });
    },

    // Finalize the transaction
    onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
            // Show a success message to the buyer
            alert('Transaction completed by '   details.payer.name.given_name);
        });
    }

  }).render('body');
});

Alternatively, you can just load the SDK statically from in the index <head> of your application, and it'll always be there ready for use.