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

Question

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

这里是 Web 集成文档的 link：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);
        };
    }, []);

Answer 1

添加后不要删除脚本。

您可以设置回调函数，让您的代码在脚本加载后使用 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，它会一直存在以供使用。

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

Using the paypalhere sdk in react web app

paypal

reactjs

paypal-here