如何将 PayPal 结账付款添加到你的 React 应用

2025-05-26

如何将 PayPal 结账付款添加到你的 React 应用

你是否一直想知道如何让你的 Web 应用盈利？🤑？是时候开始赚钱了💸💸。在本指南中，你将学习如何使用react-paypal-js npm 包将PayPal集成到你的 ReactJS 应用中，作为你的结账支付解决方案。

什么是 PayPal？ PayPal 是一款支付处理产品，可帮助您处理移动和网页应用程序的付款。我们提供快速便捷的在线支付方式，无论您是面向数字媒体资产还是 100 多个国家/地区的任何类型的在线商家。

指南概述

本教程需要以下内容：

  • PayPal开发者账户
  • ReactJS 应用程序（我使用create react app作为此示例）。

您可以在我们的 Github Org 中的PayPal React 示例应用程序中找到本指南的源代码。

第一部分：PayPal 开发者沙盒应用

首先，我们需要创建一个 PayPal 应用。请前往PayPal 开发者面板并登录您的 PayPal 开发者账户。进入 PayPal 开发者面板后，请确保您位于“我的应用和凭证”页面。在此页面中，点击蓝色按钮“创建应用”。

在 PayPal 开发者仪表板内创建 PayPal 应用

输入您正在创建的 PayPal 应用的名称。在本例中，我将应用命名为React-checkout。现在，选择“应用类型”为“商家”，然后点击蓝色按钮“创建应用”。

为您的新 PaPal 开发者应用命名

创建 PayPal 应用后，您将看到一个与我的类似的屏幕。在此屏幕中，您将看到您的客户端 ID。复制此 ID 并将其保存到某个位置（我们将在本教程的后面部分使用它）。

您可以随时通过导航到PayPal 开发者仪表板中刚刚创建的应用程序来获取此客户端 ID。

复制为您的 PayPal 应用生成的客户端 ID

注意：客户端 ID 属于 4 类数据。客户端 ID 并非敏感数据，但仍需谨慎共享或发布。我们建议将客户端 ID 放入.env文件中的环境变量中。

第 2 部分：将 PayPal 添加到你的 React 应用

添加 PayPal NPM 包

要安装react-paypal-js npm包，请在项目终端内运行以下命令。

npm install @paypal/react-paypal-js

PayPal npm 包由两个主要部分组成：

  • Context Provider，<PayPalScriptProvider/>负责 PayPal JS SDK 脚本。此提供程序使用原生React Context API来管理状态并与子组件通信。它还支持在参数更改时重新加载脚本。

  • PayPal SDK 组件，类似这样的组件<PayPalButtons/>用于呈现 JS SDK 提供的 PayPal 产品的 UI。

如果您对此 npm 包有任何问题，请在其GitHub 存储库中报告。

安装 react-paypal-js npm 包后，打开你的根文件，在我的情况下，我的根文件就是该App.js文件。

在此应用中，该App.js组件负责加载 PayPal 脚本并渲染<Checkout/>组件。<Checkout/>本教程稍后将创建该组件。

在此文件中，您将从PayPalScriptProviderPayPal npm 包导入。

在文件顶部添加以下代码行：

import { PayPalScriptProvider } from "@paypal/react-paypal-js";
Enter fullscreen mode Exit fullscreen mode

我们在此文件中添加了initialOptions对象，这些选项可以通过其他配置参数进行更改。要了解有关其他配置选项的更多信息，请参阅PayPal SDK 文档。

const initialOptions = {
  "client-id": "YOUR-CLIENT-ID-HERE",
  currency: "USD",
  intent: "capture",
};
Enter fullscreen mode Exit fullscreen mode

现在，确保将 client-id 属性中的文本替换为 PayPal 应用程序中的客户端 ID。

与PayPalScriptProvider

最后，在 中App.js添加<PayPalScriptProvider/>。注意，在提供程序中，我们有一个<Checkout/>包含 PayPal 组件的组件。现在，我们将 options 属性添加到 中，PayPalScriptProvider以配置 JS SDK。它接受一个对象，用于将查询参数和数据属性传递给 JS SDK 脚本。

<PayPalScriptProvider options={initialOptions}>
        <Checkout/>
</PayPalScriptProvider>
Enter fullscreen mode Exit fullscreen mode

您的App.js组件应该如下所示：

import Checkout from './Checkout';
import { PayPalScriptProvider } from "@paypal/react-paypal-js";

const initialOptions = {
  "client-id": "YOUR-CLIENT-ID-HERE",
  currency: "USD",
  intent: "capture",
};

function App() {
  return (
    <PayPalScriptProvider options={initialOptions}>
        <Checkout/>
    </PayPalScriptProvider>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

在我们的 React 应用中，我们为用户提供了两种货币（美元和欧元）的支付选项。当用户更改货币时，该值将通过 传递给 PayPal 脚本usePayPalScriptReducer()。

现在是时候在你的 React 应用程序中创建一个新Checkout.js组件了。该文件负责加载 PayPal 组件，例如 PayPal 按钮。

在文件顶部Checkout.js，添加以下行以包含PayPalButtons和usePayPalScriptReducer。

import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
Enter fullscreen mode Exit fullscreen mode

加载状态usePayPalScriptReducer

当 PayPal 脚本加载时，将usePayPalScriptReducer显示一个微调器，可用于更改 PayPal 脚本选项的值，同时使用更新的参数重新加载脚本。

PayPal 脚本有多种加载状态，通过这些状态usePayPalScriptReducer我们可以更轻松地跟踪加载情况。脚本加载时，可以使用此状态显示加载旋转图标；加载失败时，则显示错误消息。

加载状态：

  • isInitial - 未启动（仅在传递 deferLoading={true} 时使用）
  • isPending - 正在加载（默认）
  • isResolved-成功加载
  • isRejected-加载失败

在这个示例应用程序中，我们使用isPending状态来渲染 UI 的其余部分，包括PayPalButtons。

在您的组件中Checkout添加以下代码。此代码将提取options、加载状态 (isPending) 以及dispatch向我们的 发送操作usePayPalScriptReducer()；

const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
Enter fullscreen mode Exit fullscreen mode

添加货币选择器

在Checkout组件中，您将添加代码以使用用户选择的新货币更新状态，这将分派操作以usePayPalScriptReducer更新 PayPal 脚本。

const [currency, setCurrency] = useState(options.currency);

    const onCurrencyChange = ({ target: { value } }) => {
        setCurrency(value);
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: value,
            },
        });
    }
Enter fullscreen mode Exit fullscreen mode

现在，您的 UI 将如下所示：

{
isPending ? <p>LOADING...</p> : (
  <>
    <select value={currency} onChange={onCurrencyChange}>
      <option value="USD">💵 USD</option>
      <option value="EUR">💶 Euro</option>
    </select>
  </>
 )
}
Enter fullscreen mode Exit fullscreen mode

添加 PayPal 按钮

要开始使用 PayPal 按钮，您只需将<PayPalButtons/>组件添加到您的JSX。当您通过传递以下可用的 props 来扩展 PayPal 按钮的功能时，神奇的事情就发生了：

  • 样式：此属性允许您设置 PayPal 按钮的样式，例如颜色、形状、布局等。
  • createOrder：此属性允许您使用以下属性创建订单请求：item_total、purchase_units 等。
  • onApprove：此属性允许在订单创建后对订单详细信息进行一些操作。

在您的组件内部<Checkout/>，在onCurrencyChange函数之后添加以下函数，以便使用PayPal 按钮的onCreateOrder和道具进行调用。onApprove

const onCreateOrder = (data,actions) => {
        return actions.order.create({
            purchase_units: [
                {
                    amount: {
                        value: "8.99",
                    },
                },
            ],
        });
    }

const onApproveOrder = (data,actions) => {
  return actions.order.capture().then((details) => {
  const name = details.payer.name.given_name;
    alert(`Transaction completed by ${name}`);
  });
}
Enter fullscreen mode Exit fullscreen mode

现在我们将组件添加<PayPalButtons/>到你的<Checkout/>组件中。你的JSX代码应该如下所示：

<div className="checkout">
  {isPending ? <p>LOADING...</p> : 
    (
      <>
        <select value={currency} onChange={onCurrencyChange}>
          option value="USD">💵 USD</option>
          <option value="EUR">💶 Euro</option>
        </select>
        <PayPalButtons 
          style={{ layout: "vertical" }}
          createOrder={(data, actions) => onCreateOrder(data, actions)}
          onApprove={(data, actions) => onApproveOrder(data, actions)}
        />
     </>
   )}
</div>
Enter fullscreen mode Exit fullscreen mode

该文件的最终代码Checkout.js将如下所示：

import React, { useState } from 'react';
import './Checkout.css';
import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";

const Checkout = () => {
    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
    const [currency, setCurrency] = useState(options.currency);

    const onCurrencyChange = ({ target: { value } }) => {
        setCurrency(value);
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                currency: value,
            },
        });
    }

    const onCreateOrder = (data,actions) => {
        return actions.order.create({
            purchase_units: [
                {
                    amount: {
                        value: "8.99",
                    },
                },
            ],
        });
    }

    const onApproveOrder = (data,actions) => {
        return actions.order.capture().then((details) => {
            const name = details.payer.name.given_name;
            alert(`Transaction completed by ${name}`);
        });
    }

    return (
        <div className="checkout">
            {isPending ? <p>LOADING...</p> : (
                <>
                    <select value={currency} onChange={onCurrencyChange}>
                            <option value="USD">💵 USD</option>
                            <option value="EUR">💶 Euro</option>
                    </select>
                    <PayPalButtons 
                        style={{ layout: "vertical" }}
                        createOrder={(data, actions) => onCreateOrder(data, actions)}
                        onApprove={(data, actions) => onApproveOrder(data, actions)}
                    />
                </>
            )}
        </div>
    );
}

export default Checkout;
Enter fullscreen mode Exit fullscreen mode

第 3 部分：测试 PayPal 结账

测试 PayPal 结账

在您的项目内部，在终端运行npm start命令来运行您的 ReactJS 应用程序。

打开http://localhost:3000以在浏览器中查看该应用程序。

您应该看到以下内容：

带有 PayPal 结帐按钮的 React 应用程序

最后，点击借记卡或信用卡按钮付款！您可以使用下面的示例卡来测试客人使用信用卡结账的体验。

样卡

您可以使用PayPal 开发者控制面板中的PayPal 信用卡生成器创建示例信用卡号。 卡类型：
Visa

卡号：4032039534213337

截止日期：03/2026

CVV 码：952

过去几年，尤其是在新冠疫情期间，在线支付呈指数级增长。随着时间的推移，在线支付交易数量仍将持续增长。我们知道在线支付不会消失，但现在您需要顺应这一趋势，才能让您的企业持续盈利，而 PayPal 正是您的最佳选择。

您可以在我们的 Github Org 中的PayPal React 示例应用程序中找到指导的源代码。

感谢 Greg Jopa 提供的内容，帮助我编写了这篇指南 :)

PayPal开发者社区

PayPal 开发者社区助您职业发展，同时提升 PayPal 产品和开发者体验。您将能够贡献代码和文档，结识新朋友，并从开源社区中学习。

文章来源：https://dev.to/paypaldeveloper/how-to-add-paypal-checkout- payments-to-your-react-app-53aa
Devto 翻译
PREV
每个开发人员都应该知道的 10 个 GitHub 存储库 1. 免费编程书籍 2. 开发人员路线图 3. OSSU 计算机科学 4. Awesome 5. 构建您自己的 X 6. 编码面试大学 7. 公共 API 8. 技术面试手册 9. 系统设计入门 10. 开发人员的设计资源
NEXT
数据结构与算法 为什么要学习数据结构和算法🤔？初学者从哪里开始🤷‍♀️🤷‍♂️？选择编程语言🤷‍♂️？最佳资源👍🎉🤦‍♀️🤦‍♂️学习者在学习数据结构和算法时犯的错误 最佳实践👍