如何将PayTM集成到React Native App中

最近,我的一位客户要求我接受我正在使用的React Native应用上的PayTM钱包付款。 虽然,没有这样的库可以安装并在RN应用程序上运行PayTM,但是总有一种解决方案,我找到了。

您可以在YouTube上观看这6部分系列

或继续阅读下面的内容。

我使用在https://github.com/Paytm-Payments/Paytm_Web_Sample_Kit_NodeJs_Express_Project中找到的PayTM的ExpressJS工具包来处理后端处理。 此存储库未更新,因此克隆存储库后,您将必须运行经典的“ npm install”,然后运行“ npm install-save express-redirect”

如果您不使用ExpressJS,那就没问题。 只需按照以下步骤操作,就可以了。

现在,我们需要更改三个变量,config.js内部两个,views / pgredirect.ejs内部一个。

打开config.js,将MID和PAYTM_MERCHANT_KEY更改为PayTM在注册进行沙箱访问时提供给您的凭据。

打开views / pgredirect.ejs并将表单的action属性的值更改为https://pguat.paytm.com/oltp-web/processTransaction

接受发布请求的文件(在我们的示例中是views / testtxn.ejs,这是我们的本机应用程序将开始进行PayTM处理的地方)应包含类似以下代码

   
   
   
  <输入类型=“隐藏” ID =“ INDUSTRY_TYPE_ID”名称=“ INDUSTRY_TYPE_ID”值=''> 
  <input type =“ hidden” id =“ CHANNEL_ID” name =“ CHANNEL_ID” value =''> 
   
  <输入类型=“隐藏”标题=“ MID”名称=“ MID”值=''> 
  <input type =” hidden” name =” WEBSITE” value =''> 
  <输入类型=“隐藏”名称=“ PAYTM_MERCHANT_KEY”值=''> 
   

提交表单后,会为我们生成一个名为“ CHECKSUMHASH”的新参数,然后我们将被重定向到一个新表单,该表单将使用9个参数自动将该表单提交给PayTM的服务器。

发送到PayTM服务器的9个参数是:

ORDER_ID,CUST_ID,INDUSTRY_TYPE_ID,CHANNEL_ID,TXN_AMOUNT,WEBSITE,MID,CALLBACK_URL和CHECKSUMHASH

为了进行测试,我们将其中五个值设置如下:

  INDUSTRY_TYPE_ID =零售 
  CUST_ID = Aditya123 
  CHANNEL_ID = WEB 
  TXN_AMOUNT = 10 
 网站=网站标记 

您的ORDER_ID应该始终是唯一的。 MID变量的值将由config.js捕获。

尽管第8个变量(即CALLBACK_URL)需要更多注意。 如果在localhost上进行开发,则需要将其更改为IP地址,然后是port,然后是端点。 因此,它应该看起来像这样

http://192.168.0.100:3000/响应

注意:我们使用了实际的IP地址,因为如果我们从React Native应用程序加载相同的地址,那么“ localhost”将无法工作! 对于生产环境,请将此值设置为您的实际域。

足够多的后端东西,该轮到React了!

我们将使用RN的WebView组件通过PayTM处理付款。 这在Android和IOS上都非常有效,我们不必为每种情况单独集成网关。

请点击下面的链接获取Payments.js文件的代码

morfsys / react-native-paytm
一个WebView包装器,将paytm集成到React Native应用程序上– morfsys / react-native-paytm github.com

那么,这是如何工作的呢? 我承认这是一个有点棘手的解决方案,但效果很好。

我们在这里做什么? 我们将三个变量(即ORDER_ID,CUST_ID和TXN_AMOUNT)注入接受发布请求的URL,然后提交表单以及其他5个参数,您可以如上所述从后端修改自己。

现在,将自动为您生成第9个参数,即CHECKSUMHASH,然后将这些参数发送到PayTM。 如果您仍在开发环境中,请使用PayTM提供的凭据进行付款。 该号码应为7777777777,请检查您的电子邮件以查看密码。 当您注册沙盒访问时,PayTM会向您发送内置凭据。

付款成功后,您将导航回IP的/ response页面。 这是我们处理RN应用可以与后端通信的方式处理PayTM响应的地方。 现在是最棘手的部分,我们如何告诉RN页面付款是否成功? RN不提供任何直接方法来处理来自不同来源的响应。

我们现在干什么? 我们黑客!!!

那就对了。 在后端,我们根据PayTM的响应切换“ title”标签内的文本。 从PayTM接收数据后,我们将从后端服务器向视图发送一个名为“ restData”的变量。 现在,我们需要检查restData是true还是false。

如果restData为true,则支付成功;如果为false,则出问题。 因此,我们根据restData的值更改响应页面的标题。 如果restData为true,则将“ title”标记内的文本更改为true;如果restData为false,则将其更改为false。 在ExpressJS中,我们通过在response.ejs文件的 标记中添加此代码来做到这一点

   
   true  
   
   false  
   
  商家结帐页面 
   

提醒那些不使用ExpressJS的人们,请找到一种方法来动态更改响应文件的标题,如果restData为true,并且在restData为false的情况下为false,则在标题中写入true标记。

为什么我们对标题标签如此关注? 这是因为RN的WebView提供了一个名为“ onNavigationStateChange”的道具,并且可以访问文档的标题标签。

我们使用这些信息,并处理来自paytm的响应。

如果您有任何疑问或卡在某个地方,请在下面进行评论,我们将尽力为您提供帮助。

我希望这篇文章对某人有所帮助。 如果可以,可以拍手吗? 二? 三? 四个? ……一百? 干杯!!!!