Add createButton types for googlepay (#27303)

* Add createButton types for googlepay

New API changes added createButton, a method to request the creation of
a HTMLElement button.

* Bump googlepay version and author list

* Change from Promise to HTMLElement in googlepay

The return value for createButton is HTMLElement, not
Promise<HTMLElement>.

types/googlepay/googlepay-tests.ts

@@ -26,10 +26,13 @@ function onGooglePayLoaded() {
 }
 
 function addGooglePayButton() {
-    const button = document.createElement('button');
-    button.className = 'google-pay';
-    button.appendChild(document.createTextNode('Google Pay'));
-    button.addEventListener('click', onGooglePaymentButtonClick);
+    const buttonOptions: google.payments.api.ButtonOptions = {
+        onClick: onGooglePaymentButtonClick,
+        buttonColor: 'black',
+        buttonType: 'short',
+    };
+    const client = getGooglePaymentsClient();
+    const button = client.createButton(buttonOptions);
     document.appendChild(document.createElement('div').appendChild(button));
 }
 

types/googlepay/index.d.ts

@@ -1,12 +1,15 @@
-// Type definitions for Google Pay API 0.0
+// Type definitions for Google Pay API 0.1
 // Project: https://developers.google.com/pay/api/web/setup/
-// Definitions by: Florian Luccioni <https://github.com/Fluccioni>
+// Definitions by: Florian Luccioni <https://github.com/Fluccioni>,
+//                 Radu Raicea <https://github.com/Radu-Raicea>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 declare namespace google.payments.api {
     type AddressFormat = 'FULL' | 'MIN';
     type AllowedCardNetwork = 'AMEX' | 'DISCOVER' | 'JCB' | 'MASTERCARD' | 'VISA';
     type AllowedPaymentMethod = 'CARD' | 'TOKENIZED_CARD';
+    type ButtonColor = 'default' | 'black' | 'white';
+    type ButtonType = 'long' | 'short';
     type CardClass = 'CREDIT' | 'DEBIT';
     type CardInfo = CardInfoMin | CardInfoFull;
     type CardRequirements = CardRequirementsMin | CardRequirementsFull;
@@ -19,6 +22,12 @@ declare namespace google.payments.api {
     type PaymentDataRequest = PaymentDataRequestMin | PaymentDataRequestFull;
     type PaymentData = PaymentDataMin | PaymentDataFull;
 
+    interface ButtonOptions {
+        onClick: EventListener;
+        buttonColor?: ButtonColor;
+        buttonType?: ButtonType;
+    }
+
     interface PaymentOptions {
         environment?: EnvironmentType;
     }
@@ -151,6 +160,7 @@ declare namespace google.payments.api {
 
     class PaymentsClient {
         constructor(paymentOptions: PaymentOptions);
+        createButton(request: ButtonOptions): HTMLElement;
         isReadyToPay(request: IsReadyToPayRequest): Promise<{result: boolean}>;
         loadPaymentData(request: PaymentDataRequestMin): Promise<PaymentDataMin>;
         loadPaymentData(request: PaymentDataRequestFull): Promise<PaymentDataFull>;