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

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 generation logic and without downloading our SDK it is not possible.

Check https://github.com/Paytm-Payments/Paytm_App_Checksum_Kit_PHP