AngularJS doesn't working with paypal

Question

I'm working in a project that I have to integrate angular with paypal plus. But when I put the script (paypal script) in a HTML the angular doesn't recognize the PAYPAL.apps.PPP script's variable I receives this error at console.

angular.js:13550 ReferenceError: PAYPAL is not defined
at eval (eval at globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:1:23)
at Function.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:343:5)
at domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5291:15)
at jQuery.append (http://localhost:9000/bower_components/jquery/dist/jquery.js:5431:10)
at jQuery.<anonymous> (http://localhost:9000/bower_components/jquery/dist/jquery.js:5525:18)
at access (http://localhost:9000/bower_components/jquery/dist/jquery.js:3614:8)
at jQuery.html (http://localhost:9000/bower_components/jquery/dist/jquery.js:5492:10)
at link (http://localhost:9000/bower_components/angular/angular.js:25866:18)
at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:9694:9)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:9093:11) <div ng-include="'app/account/payment/panel/paypal.html'" class="ng-scope">"

HTML code:

<script src="https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js" type="text/javascript"></script>
<script type="application/javascript">
var ppp = PAYPAL.apps.PPP({"approvalUrl": '.$approvalUrl.',"placeholder": "ppplus","mode": "sandbox"});
</script>
<div id="ppplus"> </div>
<button type="submit"
id="continueButton"
onclick="ppp.doContinue(); return false;">Continuar
</button>

Someone here know how to integrate paypal with angular or imports others scripts to be used in application. o/

It seems like the paypal js is not getting loaded or the angular script is running before it is loaded. — plong0
– plong0, Commented Sep 1, 2016 at 17:57
The PAYPAL works with jQuery. Did you included jQuery script on header? — Teymur Mardali
– Teymur Mardali, Commented Sep 1, 2016 at 18:06
@plong0 I put the script in the index.html page and it works! Thanks man for the quickly answer! :P — Gleidson Ferreira
– Gleidson Ferreira, Commented Sep 1, 2016 at 18:20
@TeymurMardaliyerLennon jQuery already it's in the project. But thanks for helping! :) — Gleidson Ferreira
– Gleidson Ferreira, Commented Sep 1, 2016 at 18:21

Gleidson Ferreira · Accepted Answer · 2016-09-01 18:30:10Z

1

It seems like the paypal js is not getting loaded or the angular script is running before it is loaded.

I put the script in the html index.html :)

answered Sep 1, 2016 at 18:30

Gleidson Ferreira

214 bronze badges

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

Comments

Rayner Villalba · Accepted Answer · 2016-09-01 18:12:15Z

0

You need to add jQuery library.You should include it before PAYPAL library.

answered Sep 1, 2016 at 18:12

Rayner Villalba

711 bronze badge

1 Comment

Olivier De Meulder Over a year ago

Welcome to SO. I would consider expanding your answer a little bit.

Fabio Bento Luiz · Accepted Answer · 2018-05-12 18:49:42Z

I'm working in a project with Angular 5 and I'd like to share my (almost) final solution to integrate Paypal Plus folowing the tipps from @Gleidson Ferreira.

On the head of the index.html:

<script src="https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js" type="text/javascript"></script>

On the checkout.component.ts:

import { Component, OnInit } from '@angular/core';
declare var PAYPAL: any;

@Component({
    selector: 'checkout',
    templateUrl: './checkout.component.html'
})
export class CheckoutComponent implements OnInit {
    paypalPlus: any;

    ngOnInit() {

    // TODO: add further customization to get your own proval URL dinamically
    this.paypalPlus = PAYPAL.apps.PPP(
    {
     'approvalUrl': 'https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-31737613MN931841V',
      'placeholder': 'ppplus',
       'mode': 'sandbox'
    });
}

}

On checkout.component.html:

<div class="row" id="ppplus"> </div>

Collectives™ on Stack Overflow

AngularJS doesn't working with paypal

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related