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", "[email protected]", 
           "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
};