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

Posted 2023-02-22

【中文标题】在 React.js 中集成 PayPal 的 iframe 渲染错误

【英文标题】：iframe render error integrating PayPal in React.js

【发布时间】：2020-12-14 01:35:19

【问题描述】：

我有一个使用 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>

我的沙盒客户端在公共文件夹的 index.html 文件的标头中作为 CLIENT 的 ID

我包含以下 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"
 

在 localhost 中测试站点，浏览器给我这个错误：

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)

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

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

【参考方案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>);