iframe render error integrating PayPal in React.js

Question

I have an application created with create-react-app and I need to implement PayPal as a payment method.

I created the component PayPalBtn like the following:

import React from 'react'

export default function PayPalBtn() {
    
    const [paid, setPaid] = React.useState(false);
    const [error, setError] = React.useState(null);

    const paypalRef = React.useRef();

    React.useEffect(() => {
        window.paypal.Buttons({
            createOrder: (data, actions) => {
                return actions.order.create({
                    intent: "CAPTURE",
                    purchase_units: [{
                        description: "Description",
                        amount: {
                            currency_code: "USD",
                            value: 500.0,
                        },
                    },],
                });
            },
            onApprove: async (data, actions) => {
            const order = await actions.order.capture();
            setPaid(true);
            console.log(order);
            },
            onError: (err) => {
            //   setError(err),
            console.error(err);
            },
        }).render(paypalRef.current);
    }, []);

    // If the payment has been made
    if (paid) {
        console.log("SUCCESS");
    }
    // If any error occurs
    if (error) {
        console.log("ERROR");
    }

    
    return (
        <div>

        </div>
    )
}

From another file (Pay.js) I call the component:

import PayPalBtn from './PayPalBtn';

class Buy extends Component {
    render() {
        return (
            // Other code..
            <PayPalBtn />
            // ...
        )
    }
}

I previously included

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT"></script>

with my sandbox client id as CLIENT inside the header of index.html file of the public folder

I've the following npm modules included:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "crypto-js": "^4.0.0",
    "firebase": "^7.19.0",
    "paypal-rest-sdk": "^1.8.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
 }

Testing the site in localhost, browser give me this error:

unhandled_error {err: "Error: Expected element to be passed to render ifr…://localhost:3000/static/js/1.chunk.js:149958:31)", timestamp: "1598351976152", referer: "localhost:3000", uid: "fdd8bf1947_mta6mjc6ndk", env: "sandbox"}env: "sandbox"err: "Error: Expected element to be passed to render iframe

Followed by:

Uncaught Error: Expected element to be passed to render iframe
    at js?client-id=CLIENT:2
    at js?client-id=CLIENT:2
    at n.e.dispatch (js?client-id=CLIENT:2)
    at n.e.then (js?client-id= CLIENT:2)
    at p (js?client-id=CLIENT:2)
    at Object.render (js?client-id=CLIENT:2)
    at PayPalBtn.js:11
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at react-dom.development.js:22699
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

As a result, the browser does not show the button.

Can someone tell me where I'm wrong and what I have to do to solve this problem?

Answer 1

The render method of PayPal.buttons expects a DOM element. You created a reference but did not point to any element. Modify PayPalBtn.js as such:

import React, { useRef } from 'react'

export default function PayPalButon() {
    const payPalRef = React.useRef();
    // other code for component
    // A valid element in which PayPal SDK renders the buttons in.
    return (<div ref={payPalRef}></div>);
}