Implementing in ionic 2 getting Cannot find name 'RazorpayCheckout'

[kirandc]

Hi,

I am using razorpay payment integration in my ionic 2 application. I was used in Ionic 1 it working fine.

But in ionic 2 when I build app getting this error Cannot find name 'RazorpayCheckout'

any one has ionic 2 integration example? This plugin work with Ionic?

[selvagsz]

@kirandc Can you please provide the code snippet you used ?

[akshaybhalotia]

Also, consider checking examples here: https://github.com/razorpay/razorpay-cordova-sample-app

[kirandc]

@selvagsz thanks for replay here is my code

 renewSubscription() {
    this.platform.ready().then(() => {
      this.fetchParentInfo(); 
      this.urlProvider.razorPayKey().subscribe((response) =>{
        var razorPayKeyResponse = response;
        var paymentOptions = {
          description: 'title',
          currency: 'INR',
          key: razorPayKey,
          amount: '50000', //Amout in Paisa
          name: 'name',
          prefill: {email: this.parent_data.email, contact: this.parent_data.mobile, name: this.parent_data.name},
          notes: {childId: this.child_id, childName: this.child.name}
        };
        RazorpayCheckout.open(paymentOptions, successCallback, cancelCallback)

      }, (error) => {
        this.displayToast("Please try again.");
      });
    });
  }

How to import Razopay library not getting.

[selvagsz]

@kirandc Try using ionic run browser instead of ionic serve.

ionic serve doesn't support cordova browser plugins at the moment. See https://github.com/driftyco/ionic-cli/issues/354

[selvagsz]

@kirandc Just added a sample app for ionic2 https://github.com/razorpay/razorpay-cordova-sample-app/tree/master/rzp-ionic2-example

[kirandc]

@selvagsz Thanks for the example but still I am getting error

Following step I done

1. In my application I install cordova plugin add https://github.com/razorpay/razorpay-cordova.git --save

2. I added plugin in my package.json

   
   {
     "locator": "https://github.com/razorpay/razorpay-cordova.git",
     "id": "com.razorpay.cordova"
   }

3. Copy pay() action code code from https://github.com/razorpay/razorpay-cordova-sample-app/blob/master/rzp-ionic2-example/src/app/app.component.ts and paste in app.component.ts

4. trying to build app using - 'ionic run android' command and getting following error

[18:13:40]  Error: Error at /Users/kiran/projects/bullet_phoneapp_v2/.tmp/app/app.component.ts:212:7
[18:13:40]  Cannot find name 'RazorpayCheckout'.
[18:13:40]  ngc failed
[18:13:40]  ionic-app-script task: "build"
[18:13:40]  Error: Error

I am doing anything wrong? or missing some thing. Thanks in advance for help

[kirandc]

@selvagsz can you help on this issue.

[selvagsz]

@kirandc Pardon for the delay. Was out of town for a while. I believe that the above error occurs during compile time. You should declare the RazorpayCheckout type for the typescript compiler to understand the object's type. Add the following line in declarations.d.ts

declare var RazorpayCheckout: any;

Check this commit https://github.com/razorpay/razorpay-cordova-sample-app/commit/20a8abfdbbb437c5bfc56c0d872040f936dd2f7f

[kirandc]

@selvagsz thanks for response it's work. Thanks for quick support.

[gitguru24]

Razor pay transaction id and status are stored in local database

[gitguru24]

how to acheived the transaction details and information are stored in local database

[akshaybhalotia]

Hey @gitguru24 , didn't understand your query? Do you want to save the transaction details in your device's local DB? Or have you already saved it and want to retrieve it?

[gitguru24]

save transaction details my local DB

[akshaybhalotia]

You can use any of the open source tools like https://github.com/litehelpers/Cordova-sqlite-storage or https://github.com/nolanlawson/cordova-plugin-sqlite-2

[divyam3897]

hi, I am facing the same issue with my ionic2 app. I copied the code from https://github.com/razorpay/razorpay-cordova-sample-app/blob/master/rzp-ionic2-example/src/app/app.component.ts and Added the line in declarations.d.ts but still I get "Razorpay checkout is not defined".

[kirandc]

@divyam3897 have added this

declare var RazorpayCheckout: any;

[divyam3897]

@kirandc yes, I added this line in src/declarations.d.ts but it didn't work

[selvagsz]

@divyam3897 Can you provide the following details,

1. Are you getting the error in build time or runtime ?
2. What command did you use to run the build ?

[divyam3897]

@selvagsz

1. I am getting the error during runtime.
2. "ionic serve"

[selvagsz]

@divyam3897 See https://github.com/razorpay/razorpay-cordova/issues/22#issuecomment-266385143

Try using ionic run browser instead of ionic serve. ionic serve doesn't support cordova browser plugins at the moment. See driftyco/ionic-cli#354

[ShaileshBhatNP]

Remember to add below lines to package.json file to clear the above bug

"scripts": { "start": "ionic-app-scripts serve", "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build" },