如何通过七个简单的步骤使用 ReactJS 集成 Paytm 支付网关
介绍
您是否坚持将支付网关集成到您的项目中？您是否正在积极寻找有关相同内容的简单教程？如果是，本教程：使用 ReactJs 集成 Paytm 支付网关适合您！在本分步指南中，我们将学习如何通过七个简单步骤实施支付网关。所以，事不宜迟，让我们开始我们的教程。
教程目标：使用 ReactJS 集成 Paytm 支付网关
您可能想知道我们将在本教程中做什么。我们将构建一个包含“立即付款”按钮的小型演示应用程序。单击按钮，将显示一个模态，如下所示。该库允许您自定义模式并以您想要的方式添加各种支付方式。
创建一个新的 Paytm 开发者账户
我们需要通过创建新的开发者帐户来创建新的密钥。
转到 https://developer.paytm.com/，如果您已经是 Paytm 用户，请登录，或者您可以创建一个新帐户。
收集 API 密钥
登录成功后，您可以直接进入Dashboard并查看 Test API Details。随意使用测试 API 密钥测试 API。
创建 ReactJS 应用程序
使用以下命令创建一个新的 reactJs 应用程序。
create-react-app <应用程序名称>
将使用默认文件夹结构创建一个新项目，如下所示。
将脚本添加到 index.html
您需要使用脚本标签链接 Paytm 库公共/index.html文件。为此，请使用以下代码段。
< script type=”text/javascript” crossorigin=”anonymous” src=”https://securegw-stage.paytm.in/merchantpgpui/checkoutjs/merchants/.js” > > /脚本 >
从我们这里聘请 ReactJS 开发人员，为您现有的内部开发添加各种技能。我们可以帮助您开发下一代 Web 解决方案，从构思到开发再到最终交付。
逻辑和用户界面：Paytm 支付集成
创建一个新文件paytmButton.js里面/支付按钮文件夹。该文件将包含使用 ReactJS 进行 Paytm 支付集成的主要逻辑和功能。
用户界面将有一个“立即付款”按钮，该按钮将触发 Paytm 结帐模式。
创建一个新函数初始化Paytm()它将包含将使用 useEffect 在页面加载时触发的所有初始化配置和令牌生成步骤。
使用效果（（）=> {
初始化（）;
}, []);
这初始化Paytm()函数将使用 Paytm 校验和文件并生成一个令牌。
const 初始化 = () => {
让 orderId = "Order_" + new Date().getTime();
// 沙盒凭证
让中间=“”；// 商户号
让 mkey = ""; // 商家密钥
var paytmParams = {};
paytmParams.body = {
requestType: "付款",
中：中，
websiteName: "WEBSTAGING",
订单编号：订单编号，
callbackUrl: "https://merchant.com/callback",
交易金额：{
价值：100，
货币：“INR”，
},
用户信息： {
客户编号：“1001”，
},
};
PaytmChecksum.generateSignature(
JSON.stringify(paytmParams.body),
钥匙
).then(函数(校验和){
控制台日志（校验和）；
paytmParams.head = {
签名：校验和，
};
var post_data = JSON.stringify(paytmParams);
变种选项= {
/* 用于暂存 */
// 主机名：“securegw-stage.paytm.in” /* 用于生产 */,
主机名：“securegw.paytm.in”，
端口：443，
路径：`/theia/api/v1/initiateTransaction?mid=${mid}&orderId=${orderId}`，
方法：“POST”，
标题：{
“内容类型”：“应用程序/ json”，
“内容长度”：post_data.length，
},
};
变量响应=“”；
var post_req = https.request（选项，函数（post_res）{
post_res.on（“数据”，功能（块）{
响应+=块；
});
post_res.on("结束", 函数 () {
console.log("响应：", response);
// res.json({data: JSON.parse(response), orderId: orderId, mid: mid, amount: amount});
设置支付数据({
...支付数据，
令牌：JSON.parse（响应）.body.txnToken，
订单：订单号，
中：中，
数量：100，
});
});
});
post_req.write(post_data);
post_req.end();
});
};
解释
此方法在页面加载时调用，它将从 Paytm 返回交易令牌，稍后将用于启动 Paytm 结账模式。
为了检索令牌，我们将对 /theia/api/v1/initiateTransaction 进行 API 调用，这将在请求正文中期望基本交易对象以及使用交易对象创建的哈希值。paytmParam.body 是一个具有基本字段（如 orderId、价值和货币）的交易对象。
paytmParams.body = { ... };哈希值应该使用这个交易对象。为此，Paytm 提供了一个库——PaytmChecksum，我们可以使用它通过将交易对象作为参数传递来生成哈希值。
PaytmChecksum.generateSignature(JSON.stringify(paytmParams.body),mkey ).then(function(checksum){ ... // 逻辑 };此哈希值将与 initiateTransaction API 中的交易对象一起发送，并将提供交易令牌作为响应。稍后当用户单击“立即付款”按钮时将使用此令牌，这将有助于触发付款结帐模式。
创建一个新函数付款（）将在单击按钮时触发，该按钮将使用已经生成的令牌并向用户显示结帐模式。在此功能中，您可以修改 Paytm 结帐模式的样式并更改颜色代码并添加您的徽标。
const makePayment = () => {
变种配置= {
“根”：””，
“风格”： {
"bodyBackgroundColor": "#fafafb",
“身体颜色”：“”，
"themeBackgroundColor": "#0FB8C9",
"主题颜色": "#ffffff",
"headerBackgroundColor": "#284055",
"headerColor": "#ffffff",
“错误颜色”：“”，
“成功颜色”：“”，
“卡片”： {
“填充”：“”，
“背景颜色”： ””
}
},
“数据”： {
"orderId": paymentData.order,
“令牌”：paymentData.token，
"tokenType": "TXN_TOKEN",
"amount": paymentData.amount /* 更新金额 */
},
“支付模式”：{
“标签”： {}，
“筛选”： {
“排除”： []
},
“命令”： [
“抄送”，
“直流电”，
“注意”，
"UPI",
"PPBL",
"生产者价格指数",
“平衡”
]
},
“网站”：“网站建设”，
“流”：“默认”，
“商人”： {
“中”：paymentData.mid，
“重定向”：错误
},
“处理程序”：{
“交易状态”：函数交易状态（支付状态）{
console.log(paymentStatus);
},
“通知商家”：函数 notifyMerchant(eventName,data){
console.log("关闭");
}
}
};
如果（window.Paytm && window.Paytm.CheckoutJS）{
window.Paytm.CheckoutJS.init(配置)。然后（函数 onSuccess（）{
window.Paytm.CheckoutJS.invoke();}).catch(函数 onError(错误){
console.log("错误 => ", 错误);});}}
打电话给付款（）按钮点击事件的方法。
返回 （
< 分区 >
{正在加载？(
< img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif"/>
) : (
<button onClick={makePayment}>立即付款</button>
)}
</div>
);
在 App.js 中导入 PaytmButton
一旦我们完成了主要逻辑实现，就该将文件导入 App.js 了。
导入“./App.css”；从“./paytm-button/paytmButton”导入{PaytmButton}；
功能应用程序（）{
返回 （
< 分区 >
<支付宝按钮/>
</div>
);}
导出默认应用程序；
运行服务器
所以，最后，我们完成了教程：如何使用 ReactJS 集成 Paytm 支付网关。现在使用下面的命令，运行你的服务器。
npm 开始
访问 http://localhost:3000/ 并测试演示应用程序。
完整的源代码可在 github 存储库上找到：paytm-payment-gateway-integration。随意克隆存储库并使用代码。
结论
我希望本教程帮助您了解如何使用 ReactJS 集成 Paytm 支付网关。我们重视您的反馈和建议，请随时回信。Bacancy 是最好的ReactJS 开发公司，打算探索更多关于基本和高级 ReactJS 知识。如果您是 ReactJS 爱好者，请访问 ReactJS 教程页面，不要浪费您的时间，克隆 github 存储库，并完善您的技术方面。
还没有评论，来说两句吧...