angularjspaypalpaypal-buttons

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

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>
Solution

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