我如何将paytm集成到angular4中
Posted
技术标签:
【中文标题】我如何将paytm集成到angular4中【英文标题】：How can i integrate paytm in angular4 【发布时间】：2018-01-08 03:05:15 【问题描述】：我在 Angular 4 中集成 paytm。paytm 插件已成功添加到项目中，但我不知道如何在 ts 文件中导入 paytm 插件。并调用java文件文件函数。
请帮帮我... 这是我的代码
import Nav, Platform from 'ionic-angular';
import Component, OnInit from '@angular/core';
import NavController from 'ionic-angular';
import from 'jasmine';
import LoginPage from "../login/login";
import SignUpPage from "../signup/signup";
import HomePage from "../home/home";
import Paytm from '@ionic-paytm/paytm';
@Component(
selector: 'page-apphome',
templateUrl: 'apphome.html'
)
export class AppHomePage implements OnInit
constructor(public navCtrl: NavController ,public paytm:Paytm)
ngOnInit()
window.plugins.paytm.startPayment("526", "25862", "abc@gmail.com",
"777777777", "25", successCallback, failureCallback);
var userids=window.localStorage.getItem('userid');
//alert(userids);
if(userids!= null)
this.navCtrl.push(HomePage);
【问题讨论】：
嘿，你能集成它吗？你是如何处理回调 URL 的？是你的 Angular 页面还是后端页面。 你能详细说明用例的问题吗？ 【参考方案1】：您可以简单地归档它。
Create CHECKSUMHASH using backend (.net, php, etc..) 在 API 的帮助下，只需替换表单中的 checksumhash。或者，当您从 API 获取 checksumhash 时，您可以在组件本身中创建 form。
在paytm documentation 的帮助下创建 CHECKSUMHASH。第 2 步，然后返回 CHECKSUMHASH。 Take all parameters from frontend.
例如： 我只使用了一个按钮进行交易，现在不需要任何形式。在 checksumhash 之后，我将创建表单。
app.component.html：
<button type="button" (click)="submitForm()">PAY NOW</button>
app.component.ts ：
constructor(private http: HttpClient)
// I have all below fields values
paytm =
MID: "xxxxx", // paytm provide
WEBSITE: "WEBSTAGING", // paytm provide
INDUSTRY_TYPE_ID: "Retail", // paytm provide
CHANNEL_ID: "WEB", // paytm provide
ORDER_ID: "xxxxx", // unique id
CUST_ID: "xxxxx", // customer id
MOBILE_NO: "xxxx", // customer mobile number
EMAIL: "xxxx", // customer email
TXN_AMOUNT: "10.00", // transaction amount
CALLBACK_URL: "http://localhost:4200/paymentverity", // Call back URL that i want to redirect after payment fail or success
;
submitForm()
// I will do API call and will get CHECKSUMHASH.
this.http.post('https://myAPI.com/createchecksum', this.paytm)
.subscribe((res: any) =>
// As per my backend i will get checksumhash under res.data
this.paytm['CHECKSUMHASH'] = res.data;
// than i will create form
this.createPaytmForm();
;
;
createPaytmForm()
const my_form: any = document.createElement('form');
my_form.name = 'paytm_form';
my_form.method = 'post';
my_form.action = 'https://securegw-stage.paytm.in/order/process';
const myParams = Object.keys(this.paytm);
for (let i = 0; i < myParams.length; i++)
const key = myParams[i];
let my_tb: any = document.createElement('input');
my_tb.type = 'hidden';
my_tb.name = key;
my_tb.value = this.paytm[key];
my_form.appendChild(my_tb);
;
document.body.appendChild(my_form);
my_form.submit();
// after click will fire you will redirect to paytm payment page.
// after complete or fail transaction you will redirect to your CALLBACK URL
;
【讨论】：
my_tb.value = paytmParams[key]; paytm 参数没有定义，它在哪里 paytmparams 库？请回答 @RahulSeth，将paytmParams[key] 替换为this.paytm[key]。查看更新的答案
谢谢...它可以工作，但显示拒绝访问 您无权访问此服务器上的“securegw-stage.paytm.in/order/process”。请回复。我正在本地测试它
检查您的 MID 或您传递给 paytm 的其他 paytm ID
非常感谢。请分享后端的实现以及如何处理 UI 上的回调？？【参考方案2】：
ShowBillingForm: boolean = true;
PlanId: any;
PlanRes: any = [];
PlanDetail: any = [];
CustomField: boolean = false;
placemntCount: any;
totalPlaceCost: any;
costPerPlace: any;
DiscountAmount: any = 30;
DiscountedAmount: any;
NetAmount: any;
// ************************Paytm Payment Process *********************
RequestedData: any;
responseBilling: any;
EmployerId: any;
timestamp: any;
TransactionFormshow: boolean = false;
RequestDataPay: any;
SubmitBillingDetail()
this.EmployerId = this.userdetail.id;
this.timestamp = +new Date;
this.timestamp.toString();
this.PlanDetailForm.controls['BillingState'].value
this.RequestedData =
"name": this.PlanDetailForm.controls.BillingName.value,
"email": this.PlanDetailForm.controls.Billingemail.value,
"contactnum": this.PlanDetailForm.controls.Billingcontactnum.value,
"address": this.PlanDetailForm.controls.Billingaddress.value,
"state": this.PlanDetailForm.controls.BillingState.value,
"district": this.PlanDetailForm.controls.BillingDistrict.value,
"employerid": this.EmployerId,
"cmpid": this.userdetail.companyID,
"createdby": this.EmployerId,
// "order_id": Math.random().toString(36).substr(2, 9),
"order_id": Math.floor(10000000000 + Math.random() * 90000000000),
"transaction_id": '',
"status": 'Pending',
"validfrom":this.PlanDetail.valiD_FROM? moment(this.PlanDetail.valiD_FROM).format('YYYY-MM-DD'):parseInt('null'),
"validto":this.PlanDetail.valiD_TO? moment(this.PlanDetail.valiD_TO).format('YYYY-MM-DD'):parseInt('null'),
"Response_msg": 'Successfull',
"TXN_AMOUNT": this.PlanDetailForm.controls.Amount.value,
"Payment_For": 'REGISTRATION',
"CALLBACK_URL": environment.apiUrl + "Payment/PaymentConfirmation",
;
this.spinnerService.show();
this.authenticationService.SaveBillingDetailforRegistration(this.RequestedData).subscribe(res =>
this.responseBilling = res;
this.PurchaseStatus = this.responseBilling.purchasePlanStatus;
this.TransactionFormshow = true;
this.spinnerService.show();
localStorage.setItem('PurchaseStatus', this.PurchaseStatus);
this.RequestDataPay =
"MID": this.responseBilling.mid,
"WEBSITE": this.responseBilling.website,
"INDUSTRY_TYPE_ID": this.responseBilling.industrY_TYPE_ID,
"CHANNEL_ID": this.responseBilling.channeL_ID,
"ORDER_ID": this.responseBilling.ordeR_ID,
"CUST_ID": this.responseBilling.cusT_ID,
"MOBILE_NO": this.responseBilling.mobilE_NO,
"EMAIL": this.responseBilling.email,
"TXN_AMOUNT": this.responseBilling.txN_AMOUNT,
"CHECKSUMHASH": this.responseBilling.checksum,
"CALLBACK_URL": this.responseBilling.callbacK_URL
;
this.createPaytmForm();
);
createPaytmForm()
const my_form: any = document.createElement('form');
my_form.name = 'paytm_form';
my_form.method = 'post';
// my_form.action = 'https://securegw-stage.paytm.in/order/process';
my_form.action = this.responseBilling.paytmgatway;
const myParams = Object.keys(this.RequestDataPay);
for (let i = 0; i < myParams.length; i++)
const key = myParams[i];
let my_tb: any = document.createElement('input');
my_tb.type = 'hidden';
my_tb.name = key;
my_tb.value = this.RequestDataPay[key];
my_form.appendChild(my_tb);
;
document.body.appendChild(my_form);
my_form.submit();
【讨论】：
【参考方案3】：关于paytm，他们不支持REST。所以最好遵循普通的表单提交机制。所以根据他们的文档，我们可以将所需的参数与CHECKSUMHASH一起作为普通的POST请求传递。在表单中
<form ngNoForm method="post"action="https://securegwstage.paytm.in/theia/processTransactio">
ngNoForm 将直接将所有数据发布到他们的网关。
【讨论】：
【参考方案4】：PayTM 和 PayU 仍然在旧的网络服务上，它们仍然不支持 REST，因此，您需要准备好网络 api 中的所有参数，然后将其作为名称值数组发送，然后将其绑定到角度页面和然后自动发布或手动发布
<form ngNoForm #myFormPost name="myFormPost" id="payForm" [action]="postURL" method="POST">
<ng-container *ngFor="let input of apiResponse">
<input *ngIf="!input.multiline" type="hidden" [name]="input.name" [value]="input.value" />
<textarea *ngIf="input.multiline" [name]="input.name" class="textarea--hidden">input.value</textarea>
</ng-container>
<button (click)="onPost()">Post</button>
</form> Dictionary<string, string> dicPam = new Dictionary<string, string>
"MID", parameters.MID ,
"CHANNEL_ID", parameters.CHANNEL_ID ,
"INDUSTRY_TYPE_ID", parameters.INDUSTRY_TYPE_ID,
"WEBSITE", parameters.WEBSITE,
"EMAIL", parameters.EMAIL,
"MOBILE_NO", "9999999999" ,
"CUST_ID", parameters.CUST_ID ,
"ORDER_ID", parameters.ORDER_ID ,
"TXN_AMOUNT", parameters.TXN_AMOUNT,
"CALLBACK_URL", parameters.CALLBACK_URL //This parameter is not mandatory. Use this to pass the callback url dynamically.
;
var payTMParams = _mapper.Map<PayTMParams>(parameters);
payTMParams.CHECKSUMHASH= CheckSum.generateCheckSum(merchantKey, dicPam);
var PayParams = new PaymentParams();
PayParams.PostURL= _configuration.GetSection("PaymentConfig:PayTM:POSTURL").Value;
foreach (var item in dicPam)
PayParams.PayParams.Add(new ValPair Name = item.Key, Value = item.Value );
PayParams.PayParams.Add(new ValPair Name = "CHECKSUMHASH", Value = payTMParams.CHECKSUMHASH );
return PayParams;
【讨论】：
【参考方案5】：当我从http://paywithpaytm.com/developer/discussion/topic/how-to-integrate-paytm-in-angularjs-web-app/ 得到一些信息时，很明显，paytm 不支持 angular js ，它们只能帮助您进行集成和checksum generationlogic 并且不下载我们的SDK 这是不可能的。
查看https://github.com/Paytm-Payments/Paytm_App_Checksum_Kit_PHP
【讨论】：
谢谢你的建议..........但是你能告诉我如何在我的代码中使用这个 sdk.. 您将需要一个服务器端代码来集成生成校验和和验证校验和登录。因为如果它是在客户端完成的，那么任何人都可以对其进行解码并在他们的端复制它，您将邀请黑客访问您的网站。以上是关于我如何将paytm集成到angular4中的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Angular 4 更新/升级到 Angular 5+