在 React.js 中集成 PayPal 的 iframe 渲染错误

Question

我有一个使用 create-react-app 创建的应用程序，我需要实现 PayPal 作为付款方式。

我创建了组件PayPalBtn ，如下所示：

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>
    )
}

从另一个文件（Pay.js）我调用组件：

import PayPalBtn from './PayPalBtn';

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

我以前包括

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

使用我的沙箱客户端ID 作为 CLIENT 在公共文件夹的 index.html 文件的标题中

我包含以下 npm 模块：

"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"
 }

在本地主机中测试站点，浏览器给我这个错误：

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

其次是：

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)

因此，浏览器不会显示该按钮。

有人能告诉我我错在哪里以及我必须做些什么来解决这个问题吗？

Answer 1

PayPal.buttons的render方法需要一个 DOM 元素。 您创建了一个引用，但没有指向任何元素。 将PayPalBtn.js修改为：

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>);
}