feat: add support for buttonBorderType

Author: dmengelt

.vscode/settings.json

@@ -8,7 +8,7 @@
   },
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "angular.enable-strict-mode-prompt": false
 }

package-lock.json

@@ -37,6 +37,7 @@ export class GooglePayButtonComponent implements OnInit, OnChanges {
   @Input() buttonRadius?: number;
   @Input() buttonSizeMode?: google.payments.api.ButtonSizeMode;
   @Input() buttonLocale?: string;
+  @Input() buttonBorderType?: google.payments.api.ButtonBorderType;
   @Input() paymentDataChangedCallback?: google.payments.api.PaymentDataChangedHandler;
   @Input() paymentAuthorizedCallback?: google.payments.api.PaymentAuthorizedHandler;
   @Input() readyToPayChangeCallback?: (result: any) => void;
@@ -79,6 +80,7 @@ export class GooglePayButtonComponent implements OnInit, OnChanges {
       buttonRadius: this.buttonRadius,
       buttonSizeMode: this.buttonSizeMode,
       buttonLocale: this.buttonLocale,
+      buttonBorderType: this.buttonBorderType,
       onReadyToPayChange: result => {
         if (this.readyToPayChangeCallback) {
           this.readyToPayChangeCallback(result);

src/button-angular/lib/google-pay-button.component.ts

@@ -62,6 +62,10 @@ class GooglePayButton extends HTMLElement {
   @Alias('buttonlocale')
   buttonLocale?: string;
 
+  @NotifyAttribute()
+  @Alias('buttonbordertype')
+  buttonBorderType?: google.payments.api.ButtonBorderType;
+
   @Notify()
   @Alias('paymentDataChangedCallback')
   @Alias('paymentdatachangedcallback')
@@ -166,6 +170,7 @@ class GooglePayButton extends HTMLElement {
       buttonRadius: this.buttonRadius,
       buttonSizeMode: this.buttonSizeMode,
       buttonLocale: this.buttonLocale,
+      buttonBorderType: this.buttonBorderType,
       onReadyToPayChange: result => {
         if (this.onReadyToPayChange) {
           this.onReadyToPayChange(result);

src/button-angular/package-lock.json

@@ -714,6 +714,7 @@ describe('createButton', () => {
       buttonRadius: 4,
       buttonLocale: 'fr',
       buttonSizeMode: 'fill',
+      buttonBorderType: 'no_border',
     };
     await manager.configure(config);
 
@@ -724,6 +725,7 @@ describe('createButton', () => {
         buttonRadius: 4,
         buttonLocale: 'fr',
         buttonSizeMode: 'fill',
+        buttonBorderType: 'no_border',
         onClick: expect.any(Function),
       }),
     );

src/button-element/GooglePayButton.ts

@@ -40,6 +40,7 @@ export interface Config {
   buttonRadius?: number;
   buttonSizeMode?: google.payments.api.ButtonSizeMode;
   buttonLocale?: string;
+  buttonBorderType?: google.payments.api.ButtonBorderType;
 }
 
 interface ButtonManagerOptions {
@@ -247,6 +248,7 @@ export class ButtonManager {
       buttonRadius: this.config.buttonRadius,
       buttonSizeMode: this.config.buttonSizeMode,
       buttonLocale: this.config.buttonLocale,
+      buttonBorderType: this.config.buttonBorderType,
       onClick: this.handleClick,
       allowedPaymentMethods: this.config.paymentRequest.allowedPaymentMethods,
     };
@@ -420,6 +422,7 @@ export class ButtonManager {
       config.buttonRadius,
       config.buttonLocale,
       config.buttonSizeMode,
+      config.buttonBorderType,
       config.paymentRequest.merchantInfo.merchantId,
       config.paymentRequest.merchantInfo.merchantName,
       config.paymentRequest.merchantInfo.softwareInfo?.id,