How can i integrate paytm in angular4

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

Hey were u able to integrate it. How did u handle callback Url? Was it ur Angular page or a backend page. — djain4, May 11 '19 at 10:55

Shashikant Devani · Answer 1 · 2020-03-19T17:49:13.890

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

my_tb.value = paytmParams[key]; paytm params is not defined any where is it paytmparams library? pls answer — nick, Mar 19 '20 at 12:00
@RahulSeth, Replace `paytmParams[key]` with `this.paytm[key]`. See updated answer — Shashikant Devani, Mar 19 '20 at 17:50
thanks ... it works but shows Access Denied You don't have permission to access "http://securegw-stage.paytm.in/order/process" on this server. please Reply. I am testing it on local — nick, Mar 20 '20 at 10:38
Thank you so much. Please share implementation for backend and how to handle callback on UI ?? — Saurabh Gangamwar, Jul 26 '20 at 18:00

score 2 · Answer 2 · answered Feb 25 '19 at 01:29

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;

score 1 · Answer 3 · answered Apr 06 '19 at 07:02

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.

score 1 · Answer 4 · answered Jan 28 '20 at 12:09

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

score 0 · Answer 5 · answered Aug 01 '17 at 10:05

0

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

answered Aug 01 '17 at 10:05

1

thank you for your suggestion ..........but can you please tell me how can i use this sdk in my code.. – webaddicted Aug 02 '17 at 08:44
You will need a server side code to integrate the generating checksum and verifying checksum login. cos if it is done on client side then anyone can decode it and replicate it on their end and you will invite hackers to your website. – Hirav Sampat May 30 '18 at 09:05

How can i integrate paytm in angular4

5 Answers5