From 20be7a25e751e748a683887769463491d8a9be2c Mon Sep 17 00:00:00 2001
From: Radu Raicea <radu@raicea.com>
Date: Fri, 20 Jul 2018 11:44:39 -0400
Subject: [PATCH] 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 | 11 +++++++----
 types/googlepay/index.d.ts         | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/types/googlepay/googlepay-tests.ts b/types/googlepay/googlepay-tests.ts
index ea97c2a586..4897dd3c80 100644
--- a/types/googlepay/googlepay-tests.ts
+++ b/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));
 }
 
diff --git a/types/googlepay/index.d.ts b/types/googlepay/index.d.ts
index 524c277691..4e700d695d 100644
--- a/types/googlepay/index.d.ts
+++ b/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>;