feat: add support for buttonSizeMode

examples/html/dynamic-examples.js

@@ -179,6 +179,25 @@ const googlePayButtons = [
       };
     },
   },
+  {
+    title: 'Button Size',
+    get props() {
+      return {
+        buttonColor: controls.buttonColor.value,
+        buttonType: controls.buttonType.value,
+        buttonSizeMode: 'fill',
+        paymentRequest: {
+          ...defaultPaymentRequest,
+          transactionInfo: {
+            ...defaultPaymentRequest.transactionInfo,
+            totalPrice: controls.amount.value,
+          },
+        },
+        existingPaymentRequired: controls.existingPaymentRequired.value === 'true',
+        onLoadPaymentData,
+      };
+    },
+  },
 ];
 
 window.controls = controls;

examples/react/src/App.tsx

@@ -30,6 +30,7 @@ import OnCancelExample from './examples/OnCancelExample';
 import DisplayItemsExample from './examples/DisplayItemsExample';
 import DynamicPriceUpdateExample from './examples/DynamicPriceUpdateExample';
 import DirectIntegrationExample from './examples/DirectIntegrationExample';
+import ButtonSizeExample from './examples/ButtonSizeExample';
 
 const App: React.FC = () => {
   const [amount, setAmount] = useState('100.00');
@@ -107,6 +108,7 @@ const App: React.FC = () => {
       <OnCancelExample {...props} />
       <DisplayItemsExample {...props} />
       <DynamicPriceUpdateExample {...props} />
+      <ButtonSizeExample {...props} />
     </div>
   );
 };

examples/react/src/examples/ButtonSizeExample.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Example from './Example';
+import GooglePayButton from '@google-pay/button-react';
+
+export default (props: any) => {
+  return (
+    <Example title="Button Size">
+      <GooglePayButton
+        paymentRequest={{
+          apiVersion: 2,
+          apiVersionMinor: 0,
+          allowedPaymentMethods: [
+            {
+              type: 'CARD',
+              parameters: {
+                allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+                allowedCardNetworks: ['MASTERCARD', 'VISA'],
+              },
+              tokenizationSpecification: {
+                type: 'PAYMENT_GATEWAY',
+                parameters: {
+                  gateway: 'example',
+                  gatewayMerchantId: 'exampleGatewayMerchantId',
+                },
+              },
+            },
+          ],
+          merchantInfo: {
+            merchantId: '12345678901234567890',
+            merchantName: 'Demo Merchant',
+          },
+          transactionInfo: {
+            totalPriceStatus: 'FINAL',
+            totalPriceLabel: 'Total',
+            totalPrice: props.amount,
+            currencyCode: 'USD',
+            countryCode: 'US',
+          },
+        }}
+        onLoadPaymentData={paymentRequest => {
+          console.log('Success', paymentRequest);
+        }}
+        existingPaymentMethodRequired={props.existingPaymentMethodRequired}
+        buttonColor={props.buttonColor}
+        buttonType={props.buttonType}
+        style={{ width: 400, height: 60 }}
+        buttonSizeMode="fill"
+      />
+    </Example>
+  );
+};

package.json

@@ -28,7 +28,7 @@
   "author": "socsieng@google.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/googlepay": "^0.4.2"
+    "@types/googlepay": "^0.5.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.0.0",

src/button-element/GooglePayButton.ts

@@ -50,6 +50,10 @@ class GooglePayButton extends HTMLElement {
   @Alias('buttontype')
   buttonType?: google.payments.api.ButtonType;
 
+  @NotifyAttribute()
+  @Alias('buttonsizemode')
+  buttonSizeMode?: google.payments.api.ButtonSizeMode;
+
   @Notify()
   @Alias('paymentDataChangedCallback')
   @Alias('paymentdatachangedcallback')
@@ -142,6 +146,7 @@ class GooglePayButton extends HTMLElement {
       onPaymentAuthorized: this.onPaymentAuthorized,
       buttonColor: this.buttonColor,
       buttonType: this.buttonType,
+      buttonSizeMode: this.buttonSizeMode,
       onReadyToPayChange: result => {
         if (this.onReadyToPayChange) {
           this.onReadyToPayChange(result);

src/button-element/README.md

@@ -177,6 +177,16 @@ integrating Google Pay into your website.
       <p>Default value <code>"default"</code>.</p>
     </td>
   </tr>
+  <tr>
+    <td><p>buttonSizeMode</p></td>
+    <td><p><code>"static" | "fill"</code></p></td>
+    <td>
+      <p>Optional.</p>
+      <p><code>"static"</code> buttons will be sized according to the translated <code>buttonType</code>.</p>
+      <p><code>"fill"</code> buttons will be styled according the the element's size. Use this mode when resizing the button with CSS <code>width</code> and <code>height</code> properties.</p>
+      <p>Default value <code>"static"</code>.</p>
+    </td>
+  </tr>
   <tr>
     <td><p>buttonType</p></td>
     <td><p><code>"buy" | "plain" | "donate" | "long" | "short"</code></p></td>

src/button-react/README.md

@@ -79,6 +79,16 @@ integrating Google Pay into your website.
       <p>Default value <code>"default"</code>.</p>
     </td>
   </tr>
+  <tr>
+    <td><p>buttonSizeMode</p></td>
+    <td><p><code>"static" | "fill"</code></p></td>
+    <td>
+      <p>Optional.</p>
+      <p><code>"static"</code> buttons will be sized according to the translated <code>buttonType</code>.</p>
+      <p><code>"fill"</code> buttons will be styled according the the element's size. Use this mode when resizing the button with CSS <code>width</code> and <code>height</code> properties.</p>
+      <p>Default value <code>"static"</code>.</p>
+    </td>
+  </tr>
   <tr>
     <td><p>buttonType</p></td>
     <td><p><code>"buy" | "plain" | "donate" | "long" | "short"</code></p></td>

src/lib/button-manager.ts

@@ -36,6 +36,7 @@ export interface Config {
   onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
   buttonColor?: google.payments.api.ButtonColor;
   buttonType?: google.payments.api.ButtonType;
+  buttonSizeMode?: google.payments.api.ButtonSizeMode;
 }
 
 interface ButtonManagerOptions {
@@ -220,6 +221,7 @@ export class ButtonManager {
     const button = this.client.createButton({
       buttonType: this.config.buttonType,
       buttonColor: this.config.buttonColor,
+      buttonSizeMode: this.config.buttonSizeMode,
       onClick: this.handleClick,
     });
 
@@ -333,11 +335,6 @@ export class ButtonManager {
             height: 0;
             overflow: hidden;
           }
-          ${this.options.cssSelector}.fill > div,
-          ${this.options.cssSelector}.fill > div > button, ${this.options.cssSelector}.fill > div > button.long, ${this.options.cssSelector}.fill > div > button.short {
-            width: 100%;
-            height: inherit;
-          }
         `;
 
         if (rootNode instanceof Document && rootNode.head) {
@@ -393,6 +390,7 @@ export class ButtonManager {
       !!config.onPaymentAuthorized,
       config.buttonColor,
       config.buttonType,
+      config.buttonSizeMode,
       config.paymentRequest.merchantInfo.merchantId,
       config.paymentRequest.merchantInfo.merchantName,
       config.paymentRequest.merchantInfo.softwareInfo?.id,