时间戳

首页 > 解决方案 > 在 React Web 应用程序中使用 paypalhere sdk

reactjs - 在 React Web 应用程序中使用 paypalhere sdk

问题描述

我正在构建一个用于库存管理的网络应用程序。我在前端有 React，在后端有 Nodejs+mongodb。我们公司在当地活动中售货，我们的大部分销售都是用卡支付的。为了处理信用卡支付，我们在手机上使用 Paypal Here 应用程序，该应用程序连接到读卡器，我们手动输入支付金额。由于我们有超过 200 种不同的产品（定制艺术品），我们决定构建这个应用程序，以便我们可以快速搜索正在购买的产品，将它们添加到“购物车”中，其中将自动计算总价格和税金，然后一共会出现3个支付选项按钮，一个是现金，一个是venmo，一个是刷卡。首先，我认为卡选择按钮可以从外部链接到 Paypal Here 应用程序，并且在重定向时会自动填写付款金额，但后来我意识到我实际上可以在应用程序中集成一个 Paypalhere sdk，这听起来比重定向更好。一共有三种不同的sdk，一种是ios的，一种是android的，一种是web的，web的就是我需要的。我找了一个npm包，没有运气，然后我尝试通过react helment手动将脚本和src插入到文档中，没有运气，在componentDidMount上，没有运气。我不习惯没有要使用的 npm 包，所以我今天的问题是如何将这个 sdk 集成到我的 React 应用程序中？s 三个不同的sdk，一个用于ios，一个用于android，一个用于web，一个用于web 是我需要的。我找了一个npm包，没有运气，然后我尝试通过react helment手动将脚本和src插入到文档中，没有运气，在componentDidMount上，没有运气。我不习惯没有要使用的 npm 包，所以我今天的问题是如何将这个 sdk 集成到我的 React 应用程序中？s 三个不同的sdk，一个用于ios，一个用于android，一个用于web，一个用于web 是我需要的。我找了一个npm包，没有运气，然后我尝试通过react helment手动将脚本和src插入到文档中，没有运气，在componentDidMount上，没有运气。我不习惯没有要使用的 npm 包，所以我今天的问题是如何将这个 sdk 集成到我的 React 应用程序中？

这是 Web 集成文档的链接：https ://developer.paypal.com/docs/integration/paypal-here/sdk-dev/web/#integration

这是我用来手动插入脚本onComponentDidMount的代码，我不知道它是否有效，但即使它有效，我也不知道如何访问它......

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);
        };
    }, []);

标签： reactjspaypalpaypal-here

解决方案

添加后不要删除脚本。

您可以设置回调函数，让使用 PPH 的代码在脚本加载后运行。这是一个带有回调函数的示例，它用于常规的 PayPal 按钮而不是 PPH，但您可以根据需要对其进行调整。

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

或者，您可以从<head>应用程序的索引中静态加载 SDK，它始终可以随时使用。

推荐阅读