fix!: return paymentMethodPresent when ready to pay changes

Author: Soc Sieng

examples/angular/src/app/app.component.html

@@ -163,6 +163,7 @@
           }"
           (loadpaymentdata)="onLoadPaymentData($event)"
           (error)="onError($event)"
+          (readytopaychange)="onReadyToPayChange($event)"
           [paymentAuthorizedCallback]="onPaymentDataAuthorized"
         ></google-pay-button>
       </div>

examples/angular/src/app/app.component.ts

@@ -15,6 +15,8 @@
  */
 
 import '@google-pay/button-element';
+
+import { ReadyToPayChangeResponse } from '@google-pay/button-element';
 import { Component } from '@angular/core';
 
 @Component({
@@ -68,4 +70,8 @@ export class AppComponent {
       transactionState: 'SUCCESS',
     };
   };
+
+  onReadyToPayChange = (event: CustomEvent<ReadyToPayChangeResponse>): void => {
+    console.log('ready to pay change', event.detail);
+  };
 }

examples/react/src/examples/CryptogramExample.tsx

@@ -58,8 +58,9 @@ export default (props: any) => {
         onLoadPaymentData={paymentRequest => {
           console.log('Success', paymentRequest);
         }}
-        onReadyToPayChange={isReady => {
-          setIsReadyToPay(isReady);
+        onReadyToPayChange={result => {
+          console.log('ready to pay change', result);
+          setIsReadyToPay(result.isReadyToPay);
         }}
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         style={{

examples/react/src/examples/ShippingOptionsExample.tsx

@@ -80,6 +80,9 @@ export default (props: any) => {
         onLoadPaymentData={paymentRequest => {
           console.log('Success', paymentRequest);
         }}
+        onReadyToPayChange={result => {
+          console.log('ready to pay change', result);
+        }}
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}

examples/vue/src/components/Examples.vue

@@ -161,6 +161,7 @@
             }"
             v-on:loadpaymentdata="onLoadPaymentData"
             v-on:error="onError"
+            v-on:readytopaychange="onReadyToPayChange"
             v-bind:onPaymentAuthorized.prop="onPaymentDataAuthorized"
           ></google-pay-button>
         </div>
@@ -219,6 +220,9 @@ export default {
       return {
         transactionState: 'SUCCESS',
       };
+    },
+    onReadyToPayChange: (event) => {
+      console.log('ready to pay change', event.detail);
     }
   }
 }

src/button-element/GooglePayButton.ts

@@ -15,7 +15,7 @@
  */
 
 import { Alias, Notify, NotifyAttribute, NotifyBooleanAttribute } from '../lib/property-decorators';
-import { ButtonManager, Config } from '../lib/button-manager';
+import { ButtonManager, Config, ReadyToPayChangeResponse } from '../lib/button-manager';
 import { name as softwareId, version as softwareVersion } from './package.json';
 import { debounce } from '../lib/debounce';
 
@@ -55,7 +55,7 @@ class GooglePayButton extends HTMLElement {
   onPaymentAuthorized?: google.payments.api.PaymentAuthorizedHandler;
 
   @Alias('readyToPayChangeCallback')
-  onReadyToPayChange?: (isReadyToPay: boolean) => void;
+  onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
 
   @Alias('loadPaymentDataCallback')
   onLoadPaymentData?: (paymentData: google.payments.api.PaymentData) => void;
@@ -126,11 +126,11 @@ class GooglePayButton extends HTMLElement {
       onPaymentAuthorized: this.onPaymentAuthorized,
       buttonColor: this.buttonColor,
       buttonType: this.buttonType,
-      onReadyToPayChange: isReadyToPay => {
+      onReadyToPayChange: result => {
         if (this.onReadyToPayChange) {
-          this.onReadyToPayChange(isReadyToPay);
+          this.onReadyToPayChange(result);
         }
-        this.dispatch('readytopaychange', isReadyToPay);
+        this.dispatch('readytopaychange', result);
       },
       onCancel: reason => {
         if (this.onCancel) {

src/button-element/index.ts

@@ -15,5 +15,6 @@
  */
 
 import GooglePayButton from './GooglePayButton';
+export { ReadyToPayChangeResponse } from '../lib/button-manager';
 
 export default GooglePayButton;

src/button-react/index.ts

@@ -15,5 +15,6 @@
  */
 
 import GooglePayButton from './GooglePayButton';
+export { ReadyToPayChangeResponse } from '../lib/button-manager';
 
 export default GooglePayButton;

src/lib/button-manager.ts

@@ -18,6 +18,12 @@
 
 import { loadScript } from '../lib/load-script';
 
+export interface ReadyToPayChangeResponse {
+  isButtonVisible: boolean;
+  isReadyToPay: boolean;
+  paymentMethodPresent?: boolean;
+}
+
 export interface Config {
   environment?: google.payments.api.Environment;
   existingPaymentMethodRequired?: boolean;
@@ -27,7 +33,7 @@ export interface Config {
   onLoadPaymentData?: (paymentData: google.payments.api.PaymentData) => void;
   onCancel?: (reason: google.payments.api.PaymentsError) => void;
   onError?: (error: Error) => void;
-  onReadyToPayChange?: (isReadyToPay: boolean) => void;
+  onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
   buttonColor?: google.payments.api.ButtonColor;
   buttonType?: google.payments.api.ButtonType;
 }
@@ -52,6 +58,7 @@ export class ButtonManager {
   private oldInvalidationValues?: any[];
 
   isReadyToPay?: boolean;
+  paymentMethodPresent?: boolean;
 
   constructor(options: ButtonManagerOptions) {
     this.options = options;
@@ -278,11 +285,12 @@ export class ButtonManager {
     this.setClassName(element, [element.className, 'not-ready']);
     element.appendChild(button);
 
-    let isReadyToPay = false;
+    let showButton = false;
+    let readyToPay: google.payments.api.IsReadyToPayResponse | undefined;
 
     try {
-      const readyToPay = await this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config));
-      isReadyToPay =
+      readyToPay = await this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config));
+      showButton =
         (readyToPay.result && !this.config.existingPaymentMethodRequired) ||
         (readyToPay.result && readyToPay.paymentMethodPresent && this.config.existingPaymentMethodRequired) ||
         false;
@@ -292,18 +300,29 @@ export class ButtonManager {
 
     if (!this.isMounted()) return;
 
-    if (isReadyToPay) {
+    if (showButton) {
       // remove hidden className
       this.setClassName(
         element,
         (element.className || '').split(' ').filter(className => className && className !== 'not-ready'),
       );
     }
 
-    if (this.isReadyToPay !== isReadyToPay) {
-      this.isReadyToPay = isReadyToPay;
+    if (this.isReadyToPay !== readyToPay?.result || this.paymentMethodPresent !== readyToPay?.paymentMethodPresent) {
+      this.isReadyToPay = !!readyToPay?.result;
+      this.paymentMethodPresent = readyToPay?.paymentMethodPresent;
+
       if (this.config.onReadyToPayChange) {
-        this.config.onReadyToPayChange(isReadyToPay);
+        const readyToPayResponse: ReadyToPayChangeResponse = {
+          isButtonVisible: showButton,
+          isReadyToPay: this.isReadyToPay,
+        };
+
+        if (this.paymentMethodPresent) {
+          readyToPayResponse.paymentMethodPresent = this.paymentMethodPresent;
+        }
+
+        this.config.onReadyToPayChange(readyToPayResponse);
       }
     }
   }