How can i integrate paytm in angular4 - html

Question

I'm integrating paytm in angular 4. paytm plugin is successfully added in project , but i don't know how to import paytm plugin in ts file. and call java file file function.
please help me...
here is my code
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);
}
}
}

Answer 1

You can simply archive it.
Create CHECKSUMHASH using backend (.net, php, etc..) with help of API and that just replace checksumhash in form. or you can create form in component itself when you get checksumhash from API.
Create CHECKSUMHASH with help of paytm documentation. STEP 2. and than return CHECKSUMHASH. Take all parameters from frontend.
For Example :
I had used just one button for transaction not needed any form now. after checksumhash i will create form.
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
};

Answer 2

PayTM and PayU both are still on old web service, they still dont support REST so, you will need to prepare the all the params in your web api and then send it as name value array and then bind it to angular page and then either do autopost or manual post
<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>
{{input.value}}
Post
{{input.value}}
Post
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;

Answer 3

Regarding paytm,they are not supporting REST.So it is better to follow ordinary Form submitting Mechanism.so as per their documentation,we can pass the required parameters along with CHECKSUMHASH as ordinary POST request.for that in form
<form ngNoForm method="post"action="https://securegwstage.paytm.in/theia/processTransactio">
ngNoForm
will directly post all data to their gateway.

Answer 4

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();
}

Answer 5

As I got some info from http://paywithpaytm.com/developer/discussion/topic/how-to-integrate-paytm-in-angularjs-web-app/, it's clearly written that, paytm doesn’t support for angular js , they only help you in integration and checksum generationlogic and without downloading our SDK it is not possible.
Check https://github.com/Paytm-Payments/Paytm_App_Checksum_Kit_PHP