TypeError: Cannot read property 'startPayment' of undefined

[IAmRajendraJangir]

Hi Arun,

I am using IONIC 3 and trying to open in web browser platform. But I am getting "TypeError: Cannot read property 'startPayment' of undefined" this error.

I followed below step for this - 1) cordova plugin add cordova-plugin-paytm --variable MERCHANT_ID='CaDGbP28315471*****4' --variable INDUSTRY_TYPE_ID='Retail' --variable WEBSITE='WEBSTAGING' --save 2) Here is below code paytm.ts

export class HomePage { paytm: any; constructor(public navCtrl: NavController, public platform: Platform) { }

buyProduct() { let options = { "ENVIRONMENT": "staging", "REQUEST_TYPE": "DEFAULT", "MID": "CaDGbP28315471*****4", "ORDER_ID": "ORDER_ID001", "CUST_ID": "CUSTOMER01", "INDUSTRY_TYPE_ID": "Retail", "CHANNEL_ID": "WEB", "TXN_AMOUNT": "1", "WEBSITE": "WEBSTAGING", "CALLBACK_URL": "http://45.33.36.43:8000/api/v1/payment/CALLBACK_URL/?username=username", "EMAIL": "abcd@gmail.com", "MOBILE_NO": "1234567890", "CHECKSUMHASH": "WNa3MjewUP3lHSmAKLYSBHUewyBNEhUNIflxENLAbzjmi05nkK7t/NP5uYywfE4p8Nwv79gCfTL/MHjuux6PKUGfqyzih0EXs++#######M=" }

try{
  this.paytm.startPayment(options, this.successCallback, this.failureCallback);
} catch(err){
  console.log(err);
}

}

successCallback(response:any) { alert("call successCallback"); console.log(response); }

failureCallback(error:any) { alert("call failureCallback"); console.log(error); }

Please help me out.

Thanks in advance

[manudev91]

Try with this

declare let paytm: any;

export class HomePage {

constructor(public navCtrl: NavController, public platform: Platform) { }

buyProduct() { let options = { "ENVIRONMENT": "staging", "REQUEST_TYPE": "DEFAULT", "MID": "CaDGbP28315471*****4", "ORDER_ID": "ORDER_ID001", "CUST_ID": "CUSTOMER01", "INDUSTRY_TYPE_ID": "Retail", "CHANNEL_ID": "WEB", "TXN_AMOUNT": "1", "WEBSITE": "WEBSTAGING", "CALLBACK_URL": "http://45.33.36.43:8000/api/v1/payment/CALLBACK_URL/?username=username", "EMAIL": "abcd@gmail.com", "MOBILE_NO": "1234567890", "CHECKSUMHASH": "WNa3MjewUP3lHSmAKLYSBHUewyBNEhUNIflxENLAbzjmi05nkK7t/NP5uYywfE4p8Nwv79gCfTL/MHjuux6PKUGfqyzih0EXs++#######M=" }

try{ paytm.startPayment(options, this.successCallback, this.failureCallback); } catch(err){ console.log(err); }

successCallback(response:any) { alert("call successCallback"); console.log(response); }

failureCallback(error:any) { alert("call failureCallback"); console.log(error); }

}

[ArunYogi]

@IAmRajendraJangir , this plugin is for WAP channel and not for WEB channel. Try with WAP credentials.

[Govindmallurwar]

I am getting same issue even using WAP channel. below is content and exactly followed steps given in README file. Ionic version-- C:>ionic --version 5.2.1

C:>cordova --version 9.0.0 (cordova-lib@9.0.1)

PS D:\Projects\cafeteria\cafe\Cafeteria\cafeteria-mobile-app> cordova plugin cordova-plugin-advanced-http 2.1.1 "Advanced HTTP plugin" cordova-plugin-device 2.0.2 "Device" cordova-plugin-file 6.0.1 "File" cordova-plugin-inappbrowser 3.0.0 "InAppBrowser" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview" cordova-plugin-paytm 0.0.10 "PayTM" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" PS D:\Projects\cafeteria\cafe\Cafeteria\cafeteria-mobile-app>

{ "CALLBACK_URL": "http://localhost:8080/testApi", "CHANNEL_ID": "WAP", "CHECKSUMHASH": "iVZR4mO5FYzkp31dZv3+S7j/gMZL1uWw4nd/UZBj8kfCynICS1UcHt+qmzlu35txmXmPaSIU5GCSDTk5znN7inZ7Wee+oPau3ll0Bxnezs0=", "CUST_ID": "7850da83-b834-491f-8516-eac9fb4a928b", "INDUSTRY_TYPE_ID": "Retail", "MID": "jglWo***43240305", "ORDER_ID": "e0a62f98-b20f-41b7-9dc4-4b706a24c53f", "TXN_AMOUNT": "1", "WEBSITE": "WEBSTAGING" }

I am using IONIC devapp and running on mobile device also after multiple installation installed emulator still same issue. Please help me and let me know anything required from my side.

[ArunYogi]

@Govindmallurwar , what error message you are facing ? Is it "TypeError: Cannot read property 'startPayment' of undefined" this error.? If yes, the plugin is not installed. Give me your npm installation log for this plugin and android logs for the same.

Further I see you are sending channel as WAP but WEBSITE as WEBSTAGING.. it should be APPSTAGING

[Govindmallurwar]

Yes, attached ionic devapp mobile snap.

for about installation, I tried multiple way, I mean npm commands. i done npm install attaching projects files instated of logs(not able to find logs)

Cordova Error.zip

Thanks for the quick reply. please let me know what i am missing, Also attaching code of .ts

at top of file written statement as "declare var paytm: any" paynow(){ this.checkoutProvider.getChecksumWithCheckout("1").subscribe((data)=>{ console.log(data['MID']); let tRequest:any = { "MID": data['MID'], // PayTM Credentials "ORDER_ID": data['ORDER_ID'], //Should be unique for every order. "CUST_ID": data['CUST_ID'], "INDUSTRY_TYPE_ID": data['INDUSTRY_TYPE_ID'], // PayTM Credentials "CHANNEL_ID":data['CHANNEL_ID'], // PayTM Credentials "TXN_AMOUNT": data['TXN_AMOUNT'], // Transaction Amount should be a String "WEBSITE": data['WEBSITE'], "CALLBACK_URL":data['CALLBACK_URL'], "CHECKSUMHASH":data['"CHECKSUMHASH"'], "ENVIRONMENT":"staging",

  };
 // window.cordova.plugins.Platform.
  if (!(<any>window).cordova) {
    alert(`Cordova is not persent..`);  
    //return;
} else {
  alert(`Cordova is persent..`);    --This Alert is coming
}

if(this.platform.is("cordova")){
  alert(`Cordova is persent in platform..`);    --This Alert is coming
  alert(window['plugins'].paytm)                --This coming undefined

}

  const successCallback = (response) => {
    if (response.STATUS == "TXN_SUCCESS") {

      alert(`Transaction Success! : - ${response.RESPMSG} (${response.RESPCODE})`);
        // Verify Transaction Status and Amount.
        // Proceed further...
        // Refer PayTM Gateway Docs for Response Attributes/Properties
    } else {
        // response.RESPCODE will be the error code.

        alert(`Transaction Failed for reason: - ${response.RESPMSG} (${response.RESPCODE})`);

        // Handle Error...
    }
}
const failureCallback = (error) => {
    // response.RESPCODE will be the error code.
    alert(`Transaction Failed for reason`);   
   // alert(`Transaction Failed for reason: - ${response.RESPMSG} (${response.RESPCODE})`);

    // Handle Error...
}
alert(`${(<any>window).plugin.paytm}`);       --This is also coming undefined

(<any>window).paytm.startPayment(
  tRequest,
  successCallback,
  failureCallback
);

// (<any>window).paytm.startPayment(
//   tRequest,
//   successCallback,
//   failureCallback
// );

console.log(tRequest) this.isReceived=true; });

}

[ArunYogi]

@Govindmallurwar , After declaring "declare var paytm: any" at the top of the ts file, you have to access paytm methods as paytm.startPayment( tRequest, successCallback, failureCallback ); and not as (<any>window).paytm.startPayment( tRequest, successCallback, failureCallback );

[Govindmallurwar]

@ArunYogi I already tried this and again after your comment i tried giving paytm is not defined.

Tried multiple but still not succeed:). tried with lots of comments from discussion. Please help

[ArunYogi]

@Govindmallurwar , I don't see "android"engine in your config.xml. Are you trying this paytm plugin in "ionic serve" command. This plugin doesn't support "browser" mode.

[Govindmallurwar]

could you please help me to add it, I tried it by using different suggestion but not working. i am using "ionic serve --devapp" and using Ionic dev mobile app to test also tried it on emulator same issue coming. Also for Nokia 8.1 it giving not supported plugin. so testing moto g4 plus on different mobile(not giving any warning for this mobile ).

[ArunYogi]

@Govindmallurwar , Try adding android platform to your ionic project. ionic platform add android. After that create an apk file for android device and then run in a development device or simulator.

[ArunYogi]

No Activity for long time, so closing this issue