将 Stripe 支付网关与 React Js 和 Node JS 集成
将 Stripe 支付网关与 React Js 和 Node JS 集成
支付 网关正在成为 更多的 和 更多的 重要的 支付 基础设施。它们是关键的连接 积分 必需的 发挥作用 今天的 经济，允许在线购物车， POS 系统， 和要连接的虚拟终端 支付 过程。
Stripe 是一个电子支付网关，可让您在您的网站上添加各种支付方式，例如信用卡、借记卡、Google Pay、Apple Pay 等，然后将其转入您的银行账户。
在本教程中，我们将学习如何将 Stripe 网关与 React JS 和 Node Js 集成。
那么让我们从教程开始：
创建一个条纹帐户
要在 Stripe 上注册，请按照以下网址进行操作：
[
注册并创建一个 Stripe 帐户 |条纹
立即注册以快速创建一个新的 Stripe 帐户，并在几分钟内开始接受付款。
仪表板.stripe.com
](https://dashboard.stripe.com/register)
就我而言，我已经创建了一个帐户，因此登录后您将被重定向到仪表板：
要获取您的密钥和访问密钥，请单击旁边的开发人员按钮 测试模式
现在去 API 密钥 出现在左侧菜单中以获取 API 密钥
保存您的 可发布 和 秘密 供将来使用的密钥
创建一个空节点 JS 项目
为此，您必须在 PC 上安装 Node JS。
你可以从这里下载 Node.JS：
[
下载 |节点.js
Node.js® 是基于 Chrome 的 V8 JavaScript 引擎构建的 JavaScript 运行时。
nodejs.org
](https://nodejs.org/en/download/)
现在打开您必须在其中创建 Node JS 项目的目录并打开命令提示符。
打开命令提示符后，初始化Node Project类型
npm 初始化 -y
执行此命令后 包.json 将在目录中创建
安装以下依赖项
npm 我 dotenv
npm 我表达
npm 我条纹
npm 我 nodemon
npm i cors
创建一个 .env 在服务器文件夹的根目录中并添加您的 密钥 作为 ：
STRIPE_KEY = 您来自条带帐户的密钥
现在，创建一个 新建文件夹 在节点服务器文件夹中并命名 路线
在这个文件夹中创建一个新文件 条纹.js
在这个文件中，我们使用 NPM 包条带化 将付款发送到条带网关。
创建了一个端点，将使用它来收取付款 条纹
我们会在 React App 的请求中提供要收费的金额和来源 ie token，如果一切顺利，返回 200 收到相应响应的状态 条纹。
在您的项目文件夹中创建 index.js 文件
这将用于为 Node JS 创建服务器
导入以下包：
设置中间件
映射端点并监听服务器
我们的 Stripe 后端已启动并正在运行。
创建一个 React JS 项目
我有我的 React 开发环境设置，如果你没有在你的机器上设置它，你可以从这里设置它：
https://www.geeksforgeeks.org/reactjs-setting-development-environment/
安装以下依赖项
npm i axios
npm 我反应条纹结帐
npm i react-router-dom
去 源代码 并添加一个文件夹 页面
内页文件夹创建一个 支付.jsx 和 支付.css 文件。
支付.jsx
上面的代码用于向 节点服务器 和 费用支付 每当 stripeToken 的 值设置在 onToken 方法。
对于基于 UI 的代码：
Stripe Checkout 采用多个道具，例如：
数量 => 要收取的金额
条纹键 => 您的条带帐户的可发布密钥
图片 => 您想在条纹卡上显示的图像
帐单地址 => 如果您想从客户那里获取账单地址
收件地址 => 如果您想从客户那里获取送货地址
对于本教程，我正在硬编码要收取的金额 2000, 您可以使用动态设置它 使用状态 .
成功.jsx
如果通过 Stripe 支付成功，应用程序将重定向到 成功 页
默认情况下 现在付款 按钮将可见，包裹在里面 条纹图书馆
单击此按钮后， 条纹 将显示支付卡。
填写此信息后，从 google 获取虚拟帐号以进行条带化并填写以下字段
每当发送请求时 加工。请稍等 将被渲染，如果请求成功，它将被重定向到 成功 页。
如果请求失败，则会将错误记录到控制台。
我们与 条纹 使用 反应JS 作为前端和 节点 Js 作为后端完成并因此工作。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
