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 +// Definitions by: Florian Luccioni , +// 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; loadPaymentData(request: PaymentDataRequestFull): Promise;