Adding and using plugins on Ionic

Question

Please, I need a final step-by-step to add and use plugins with Ionic. I lost several weeks trying to use plugins on Ionic but everytime I got plugin function "is not defined". I really need to solve this issue, but I don't got success.

First of all I'm not trying to use native plugins that uses special hardware components like camera. I'm following the steps below:

1) I created my app using cordova

2) I added my plugin using:

cordova plugin add mercadopago-plugin

3) I've inserted this following scripts on my index.html:

<script src="cordova.js"></script>
<script src="app.js"></script>

4) I created a button calling my plugin on my template.html

<button ng-click="startCheckout()"> OK </button>

5) I called my plugin on app.js

.controller('MyCtrl', function($scope) {    
        $scope.carrinho = allcarrinho;      
        var publicKey = "TEST";
        $scope.startCheckout = function(){
                MercadoPago.startCheckout(publicKey, prefId, null, false, success, failure);
        }               
})

6) I've emulated my app on the browser typing on my admin prompt command:

ionic serve

But when the plugin is called I got this error:

ReferenceError: MercadoPago is not defined

I following everything on documentation:

Plugin's documentation: http://mercadopago.github.io/px-hybrid/

How do I to fix it?

Thanks!

user3791775 · Accepted Answer · 2016-09-25 23:46:26Z

2

You probably have to inject MercadoPago in your controller:

.controller('MyCtrl', function($scope, MercadoPago /*<--here*/) {

I didn't see your full code but it has to be something like that.

or to have it not break when minifying:

.controller('MyCtrl', ['$scope', 'MercadoPago', function($scope, MercadoPago) { ....

See this

answered Sep 25, 2016 at 23:46

user3791775

4713 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vinoli Over a year ago

I tried it but I got a new error: ionic.bundle.min.js:133 Error: [$injector:unpr] http : // errors. angularjs. org /1.3.6/$injector/unpr?p0=MercadoPagoProvider%20%3C-%20MercadoPago%20%3C-%20MyCtrl at Error (native)

vinoli Over a year ago

Nothing about injection is mentioned on plugin documentation: mercadopago.github.io/px-hybrid

user3791775 Over a year ago

That's weird. I checked your link and it is in spanish, but after translating it is still confusing. Maybe you shouldnt inject it but call it with window.MercadoPago.startCheckout() (or document). I dont know. Did you check if the library is loaded?

vinoli Over a year ago

My developement's folder is "\app\www" but here I can't see my libraries here, I only can see on "\app\platforms\browser\platform_www\plugins", "\app\platforms\ios\platform_www\plugins" and "\app\platforms\android\platform_www\plugins".

Ladmerc · Accepted Answer · 2016-09-26 01:20:22Z

1

Most Cordova plugins do not work in the browser. You should try on an emulator or simulator.

Either that, or you need to wait for document.ready or ionicPlatform.ready for the plugin to initialize before trying to use it

answered Sep 26, 2016 at 1:20

Ladmerc

1,15811 silver badges18 bronze badges

Comments

Eden · Accepted Answer · 2016-09-27 16:16:16Z

1

This plugin makes native calls when you use ˝MercadoPago". It won't work in your browser, you should run it on an Android Emulator or Phone.

Try:

ionic emulate android -l -c

And it should work.

answered Sep 27, 2016 at 16:16

Eden

112 bronze badges

Collectives™ on Stack Overflow

Adding and using plugins on Ionic

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related