Changing the style of a PayPal Checkout Button as an Angular.js component?

Question

How do you set the style option of the PayPal Checkout Button when using it as Angular.js element directive?

this.paypal = {
  // ...
  style: {
    color: 'black',
    shape: 'rect'
  }
}

It would seem that the style option cannot be passed in a binding as style as this is already a reserved HTMLElement attribute?

<paypal-button
  client="$ctrl.paypal.client"
  commit="true"
  env="$ctrl.paypal.env"
  style="$ctrl.paypal.style"
  on-authorize="$ctrl.paypal.onAuthorize"
  on-cancel="$ctrl.paypal.onCancel"
  payment="$ctrl.paypal.payment">
</paypal-button>

score 9 · Accepted Answer · edited Mar 08 '18 at 16:35

9

Got it, you have to use ng-attr-style="$ctrl.paypal.style" and it will work.

ng-attr-style allows you to evaluate an expression instead of interpreting a string literal for the style attribute of that input element. The full explanation can be found here underneath the heading "ngAttr for binding to arbitrary attributes".

edited Mar 08 '18 at 16:35

M. Irvin

143
1
13

answered Mar 01 '18 at 17:29

jshbrntt

5,134
6
31
60

Nishanth · Answer 2 · 2018-03-05T23:28:42.057

Please refer the plnkr link for the working code of applying syles over paypalbutton which is inside directive

You can pass the entire paypal variable to the directive inside scope of controller.

scope: {
    paypal: '='
},

And then you can bind the variable to the template

<test-directive paypal="$ctrl.paypal"></test-directive>

(function() {
      var app = angular.module("myApp", ['ui.bootstrap', 'paypal-button']);
      app.controller('testCtrl', ['$scope', function($scope) {
        var $ctrl = this;
        $ctrl.paypal = {
          env: 'sandbox',

          client: {
            sandbox: 'AWi18rxt26-hrueMoPZ0tpGEOJnNT4QkiMQst9pYgaQNAfS1FLFxkxQuiaqRBj1vV5PmgHX_jA_c1ncL',
            production: '<insert production client id>'
          },

          payment: function() {
            var env = this.props.env;
            var client = this.props.client;

            return paypal.rest.payment.create(env, client, {
              transactions: [{
                amount: {
                  total: '1.00',
                  currency: 'USD'
                }
              }]
            });
          },

          commit: true, // Optional: show a 'Pay Now' button in the checkout flow

          onAuthorize: function(data, actions) {

            // Optional: display a confirmation page here

            return actions.payment.execute().then(function() {
              // Show a success page to the buyer
            });
          },
          style: {
            color: 'black',
            shape: 'rect'
          }
        };
      }]);
      
      app.directive('testDirective', [function () {
        return {
            restrict: 'E',
            template: '<paypal-button env="paypal.env"   style="paypal.style" client="paypal.client"  payment="paypal.payment"  commit="paypal.commit"  on-authorize="paypal.onAuthorize"></paypal-button>',
            scope: {
                paypal: '='
            },
            link: function (scope, element, attrs, controller) {
            }
        };
    }]);
    }());

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
  <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
</head>

<body ng-app="myApp">
  <div ng-controller="testCtrl as $ctrl">
    <test-directive paypal="$ctrl.paypal">
    </test-directive>

  </div>
</body>

</html>

Thank you for your answer, but I was not looking to override the styles of the PayPal Checkout button (which is difficult as its in embedded in the page via an iframe`). I was simply looking for how to set the `style` parameter of the Angular.js component, given `style` is already a valid HTMLElement attribute. — jshbrntt, Mar 07 '18 at 10:07

Changing the style of a PayPal Checkout Button as an Angular.js component?

2 Answers2