Duplicated Paypal buttons with Paypal REST API and AngularJS

Question

I'm building an Single Page App where the paypal button is generated on ng-click from a button (Add products).

The problem I'm facing, is that if the user clicks this button several times, the app will generate several buttons one after the other.

This can very well happen as the user might click the button, but then go back and add an extra product, before finish the purchase.

How could I manage to remove all existing buttons before adding the new one?

The function looks like this:

$scope.formulari = function(){
  paypal.Button.render({

      env: 'production', // Or 'sandbox'
      locale: 'es_ES',

      style: {
          label: 'paypal',
      ...

And after a few clicks, my initial HTML button <a id="paypal-button"></a> looks like this:

<a id="paypal-button">
    <div id="xcomponent-paypal-button-6d3dcbc0c4" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-46823018c3" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-41aad29e14" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
    <div id="xcomponent-paypal-button-48d3247535" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
</a>

I think you may need to reexamine your fundamental assumptions about "creating" a new button after each click. Perhaps a "hide" and "show" paradigm is what you want to implement... — andrewdleach, Mar 06 '18 at 16:21

score 0 · Answer 1 · answered Mar 07 '18 at 11:11

Generating a button on click might not be the way you want to go with an AngularJs structure. Editing your DOM structure is more a jQuery thing and in general you don't want to mix the two (Some explanations of why: 1, 2).

An Angular way to pick this up would be the following (Explanation beneath snippet):

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.articles = ['PC', 'Playstation', 'Xbox'];
  $scope.cart = [];

  $scope.addArticleToCart = function(article) {
    $scope.cart.push(article);
  }

  $scope.clearCart = function() {
    $scope.cart = [];
  }

  $scope.doPaypalThings = function() {
    //REST API stuff
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="article in articles">
      <button ng-click="addArticleToCart(article)">
        {{article}}
      </button>
    </div>

    <br>

    <div ng-show="cart.length > 0">
      <button id="paypal-button" ng-click="doPaypalThings()">
        Paypal
      </button>
    </div>

    <br>

    <div>
      In cart:
    </div>
    <div ng-repeat="item in cart">
      {{item}}
    </div>

    <br>

    <div>
      <button ng-click="clearCart()">
        Clear cart
      </button>
    </div>
  </div>
</body>

</html>

With this method the button always exists, it just isn't visible until the requirements within the ng-show are met. In the example, the requirement is that there are items in the cart. You will notice that once the requirements are no longer met the button will disappear again.

An opposite of ng-show is ng-hide which can be used in the same way:

ng-hide="cart.length == 0" or ng-hide="cart.length < 1

If you're dead set on using your current method, you can check out this answer here, although it is not Angular.

Duplicated Paypal buttons with Paypal REST API and AngularJS

1 Answers1