How can i integrate paytm in angular4

paytm developers
how to integrate payment gateway in angular 5
angular 7 paypal integration
angular grocery app
angular 2 payment gateway integration
paytm github
paytm integration in react js
paytm demo otp

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

    selector: 'page-apphome',
    templateUrl: 'apphome.html'
export class AppHomePage implements OnInit {

    constructor(public navCtrl: NavController ,public paytm:Paytm) {}

        window.plugins.paytm.startPayment("526", "25862", "", 
           "777777777", "25", successCallback, failureCallback);
        var userids=window.localStorage.getItem('userid');
        if(userids!= null)

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.paytm)
       .subscribe((res: any) => {
             // As per my backend i will get checksumhash under
             this.paytm['CHECKSUMHASH'] =;
             // than i will create form

createPaytmForm() {
   const my_form: any = document.createElement('form'); = 'paytm_form';
    my_form.method = 'post';
    my_form.action = '';

    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'; = key;
      my_tb.value = this.paytm[key];

// after click will fire you will redirect to paytm payment page.
// after complete or fail transaction you will redirect to your CALLBACK URL

How can i integrate paytm in angular4, Integrate paytm wallet in your laravel application easily with this package. This package uses Paytm Payment Gateway Integration With NodeJS & Express. Paytm integration. x,6 Paytm Payment Gateway Integration E. Using the kit really simplifies the task and allows you quickly add the paytm payment option to your web/mobile applications. Paytm Payments offers Thin-clients, software-development kits, developer API and secure checkout solution for all major shopping carts.

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]="" [value]="input.value" />
        <textarea *ngIf="input.multiline" [name]="" class="textarea--hidden">{{input.value}}</textarea>
      <button (click)="onPost()">Post</button> 

paytm · GitHub Topics · GitHub, Hi, I am integrating paytm payment gateway in angular 8 application but i am facing issue for call back url how to set call back url which is  PAYTM_MERCHANT_WEBSITE – Website name can be collected from Paytm team. 4. Now final step to create a sample html form with required filed, You can also find demo html form in PaytmKit/TxnTest.php, You can execute this file and test your Paytm Payment Gateway Integrate is working properly.

Regarding paytm,they are not supporting REST.So it is better to follow ordinary Form submitting 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="">

ngNoForm will directly post all data to their gateway.

Not able to open paytm payment page in angular 8 · Issue #24 , So Let's integrate the paytm wallet in your project. So guys as you know that while implementing any payment gateway, we have to obtain the merchant key and  The Paytm QR Payment Gateway plugin allow you to accept payments using Paytm QR code. User can place order on your website and pay using paytm. This is the simplest way to collect payment directly into your paytm wallet with easy checkout.

As I got some info from, 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.


How to integrate paytm wallet using nodejs, Outline What is Rave Setting Up and Folder structure Angular part I Tagged with angular, flutterwave, rave, payments. In this tutorial, I am going to share with you How to integrate paytm payment gateway in laravel 5.4 application. As we know today market, all the things digital and as specially for india. India become digital india. Paytm is a very popular payment and commerce company based india.

 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.timestamp = +new Date;
    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.authenticationService.SaveBillingDetailforRegistration(this.RequestedData).subscribe(res => {
      this.responseBilling = res;
      this.PurchaseStatus = this.responseBilling.purchasePlanStatus;
      this.TransactionFormshow = true;;
      localStorage.setItem('PurchaseStatus', this.PurchaseStatus);

      this.RequestDataPay = {
        "MID": this.responseBilling.mid,
        "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,
        "TXN_AMOUNT": this.responseBilling.txN_AMOUNT,
        "CHECKSUMHASH": this.responseBilling.checksum,
        "CALLBACK_URL": this.responseBilling.callbacK_URL

  createPaytmForm() {
    const my_form: any = document.createElement('form'); = 'paytm_form';
    my_form.method = 'post';
    // my_form.action = '';
    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'; = key;
      my_tb.value = this.RequestDataPay[key];

Paytm for Developers, You will get a hands on integrating paytm at production level in a react native application. So what are we waiting for ? Let's get started. First,we  Integration of Paytm Payment Gateway on your website is quite simple you just have to download Paytm_Web_Sample_Kit_PHPAfter that follow below steps suggested by Paytm Web Kit. Can i get any sample code or api documentation to develop it. Integrations. js tests, wallaby by default tries to re-use previously created node.

Creating an Angular Shopping app and integrating payments using , We have existing web application using Angular 1.3 in UI and Java,Spring 4,​Tomcat,MySql in backend. Want to integrate paytm payment gateway on our  Create PaytmClientCertificate Object holding the Certificate information. This step is conditional. Only if the client certificate is requested and used by merchant (as given in Prerequisites section above), then create the PaytmClientCertificate object. Otherwise pass the PaytmClientCertificate as null.

Production Grade PAYTM Payment Gateway Integration in React , How to Integrate a Payment Gateway Into a Website. A payment gateway allows your online store to accept credit card payments from customers. Payment gateways cost money and charge per transactions, and there are a lot of them to choose

How to integrate paytm with Node and Express [ SOURCE CODE , A detailed documentation is available for Magento, WooCommerce, and you can see the full list of integrations with the rest of the shopping carts here. If your online shop is custom and not powered by any CMS, you can hire a developer to help you integrate Amazon Pay using an API.

  • Hey were u able to integrate it. How did u handle callback Url? Was it ur Angular page or a backend page.
  • can you please elaborate the problem with use case?
  • my_tb.value = paytmParams[key]; paytm params is not defined any where is it paytmparams library? pls answer
  • @RahulSeth, Replace paytmParams[key] with this.paytm[key]. See updated answer
  • thanks ... it works but shows Access Denied You don't have permission to access "" on this server. please Reply. I am testing it on local
  • check your MID or other paytm IDs that you pass to paytm
  • thank you for your suggestion ..........but can you please tell me how can i use this sdk in my code..
  • 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.