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

G

2

14

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>

Glia answered 21/2, 2018 at 16:33 Comment(0)

G

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".

Glia answered 1/3, 2018 at 17:29 Comment(0)

P

1

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="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="[email protected]" 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>

Planetoid answered 5/3, 2018 at 23:11 Comment(1)

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. – Glia 7/3, 2018 at 10:7

Recommended topics

Hot tags