How can i integrate paytm in angular4
I am integrating paytm into angular 4. The paytm plugin has been successfully added to the project, but I don’t know how to import the paytm plugin into a ts file. and call the function of the java.
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);
}
}
}
source to share
PayTM and PayU are still on the old webservice, they still don't support REST, so you will need to prepare all the parameters in your web API, then send it as an array of name values, then link it to the angular page and then either auto-post or manual record
<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 Mail {{}} Input.value Mail
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;
source to share
As far as paytm is concerned, they don't support REST. So it's better to follow the usual Mechanism.so submission form, according to their documentation, we can pass the required parameters along with the CHECKSUMHASH as a normal POST request. For this in the form
<form ngNoForm method="post"action="https://securegwstage.paytm.in/theia/processTransactio">
ngNoForm will directly publish all data to its gateway.
source to share
As I got some information from http://paywithpaytm.com/developer/discussion/topic/how-to-integrate-paytm-in-angularjs-web-app/ it is clearly written that paytm does not support angular js, they only help you are in integration and checksum generation
logic and without downloading ours SDK
it is impossible.
Check out https://github.com/Paytm-Payments/Paytm_App_Checksum_Kit_PHP
source to share
You can just archive it.
Create CHECKSUMHASH using backend (.net, php, etc..)
using an API that simply replaces the checksum on the form. or you can create form
in the component itself when you get checksumhash
from the API.
Create CHECKSUMHASH using PayTM documentation . STEP 2. and then return CHECKSUMHASH.Take all parameters from frontend.
For example: I only used one button for a transaction, not needing any form right now. after the checksum i will create a 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 = paytmParams[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
};
source to share