feat: add callback to be executed when Google Pay button is clicked

For: #92

.vscode/settings.json

@@ -3,6 +3,9 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true

examples/html/dynamic-examples.js

@@ -260,6 +260,51 @@ const googlePayButtons = [
       };
     },
   },
+  {
+    title: 'OnClick',
+    get props() {
+      return {
+        buttonColor: controls.buttonColor.value,
+        buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
+        paymentRequest: {
+          ...defaultPaymentRequest,
+          transactionInfo: {
+            ...defaultPaymentRequest.transactionInfo,
+            totalPrice: controls.amount.value,
+          },
+        },
+        existingPaymentRequired: controls.existingPaymentRequired.value === 'true',
+        onLoadPaymentData,
+        onclick: () => {
+          console.log('click');
+        },
+      };
+    },
+  },
+  {
+    title: 'OnClick (preventDefault)',
+    get props() {
+      return {
+        buttonColor: controls.buttonColor.value,
+        buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
+        paymentRequest: {
+          ...defaultPaymentRequest,
+          transactionInfo: {
+            ...defaultPaymentRequest.transactionInfo,
+            totalPrice: controls.amount.value,
+          },
+        },
+        existingPaymentRequired: controls.existingPaymentRequired.value === 'true',
+        onLoadPaymentData,
+        onclick: event => {
+          console.log('prevent default');
+          event.preventDefault();
+        },
+      };
+    },
+  },
 ];
 
 window.controls = controls;

examples/react/src/App.tsx

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

examples/react/src/examples/OnClickExample.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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 function OnClickExample(props: any): React.ReactElement {
+  return (
+    <Example title="OnClick">
+      <GooglePayButton
+        environment="TEST"
+        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);
+        }}
+        onClick={event => {
+          console.log('click');
+        }}
+        existingPaymentMethodRequired={props.existingPaymentMethodRequired}
+        buttonColor={props.buttonColor}
+        buttonType={props.buttonType}
+        buttonLocale={props.buttonLocale}
+      />
+      <GooglePayButton
+        environment="TEST"
+        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);
+        }}
+        onClick={event => {
+          console.log('prevent default');
+          event.preventDefault();
+        }}
+        existingPaymentMethodRequired={props.existingPaymentMethodRequired}
+        buttonColor={props.buttonColor}
+        buttonType={props.buttonType}
+        buttonLocale={props.buttonLocale}
+      />
+    </Example>
+  );
+}

examples/svelte/src/App.svelte

@@ -96,6 +96,15 @@
     console.log('ready to pay change', event.detail);
   }
 
+  function onClick(event) {
+    console.log('click');
+  }
+
+  function onClickPreventDefault(event) {
+    console.log('prevent default');
+    event.preventDefault();
+  }
+
   function handleAmountChange() {
     updatePaymentRequests();
   }
@@ -262,5 +271,28 @@
           onPaymentAuthorized={onPaymentDataAuthorized} />
       </div>
     </div>
+    <div class="example">
+      <div class="title">OnClick</div>
+      <div class="demo">
+        <google-pay-button
+          environment="TEST"
+          button-type={buttonType}
+          button-color={buttonColor}
+          {existingPaymentMethodRequired}
+          paymentRequest={paymentRequests.basic}
+          clickCallback={onClick}
+          on:loadpaymentdata={onLoadPaymentData}
+          on:error={onError} />
+        <google-pay-button
+          environment="TEST"
+          button-type={buttonType}
+          button-color={buttonColor}
+          {existingPaymentMethodRequired}
+          paymentRequest={paymentRequests.basic}
+          clickCallback={onClickPreventDefault}
+          on:loadpaymentdata={onLoadPaymentData}
+          on:error={onError} />
+      </div>
+    </div>
   </div>
 </main>

examples/vue/src/components/Examples.vue

@@ -178,6 +178,55 @@
           ></google-pay-button>
         </div>
       </div>
+      <div class="example">
+        <div class="title">OnClick</div>
+        <div class="demo">
+          <google-pay-button
+            environment="TEST"
+            v-bind:button-type="buttonType"
+            v-bind:button-color="buttonColor"
+            v-bind:existing-payment-method-required="existingPaymentMethodRequired"
+            v-bind:paymentRequest.prop="{
+              apiVersion: paymentRequest.apiVersion,
+              apiVersionMinor: paymentRequest.apiVersionMinor,
+              allowedPaymentMethods: paymentRequest.allowedPaymentMethods,
+              merchantInfo: paymentRequest.merchantInfo,
+              transactionInfo: {
+                totalPriceStatus: 'FINAL',
+                totalPriceLabel: 'Total',
+                totalPrice: amount,
+                currencyCode: 'USD',
+                countryCode: 'US',
+              },
+            }"
+            v-on:loadpaymentdata="onLoadPaymentData"
+            v-on:error="onError"
+            v-bind:clickCallback.prop="onClick"
+          ></google-pay-button>
+          <google-pay-button
+            environment="TEST"
+            v-bind:button-type="buttonType"
+            v-bind:button-color="buttonColor"
+            v-bind:existing-payment-method-required="existingPaymentMethodRequired"
+            v-bind:paymentRequest.prop="{
+              apiVersion: paymentRequest.apiVersion,
+              apiVersionMinor: paymentRequest.apiVersionMinor,
+              allowedPaymentMethods: paymentRequest.allowedPaymentMethods,
+              merchantInfo: paymentRequest.merchantInfo,
+              transactionInfo: {
+                totalPriceStatus: 'FINAL',
+                totalPriceLabel: 'Total',
+                totalPrice: amount,
+                currencyCode: 'USD',
+                countryCode: 'US',
+              },
+            }"
+            v-on:loadpaymentdata="onLoadPaymentData"
+            v-on:error="onError"
+            v-bind:clickCallback.prop="onClickPreventDefault"
+          ></google-pay-button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -235,6 +284,13 @@ export default {
     onReadyToPayChange: event => {
       console.log('ready to pay change', event.detail);
     },
+    onClick: () => {
+      console.log('click');
+    },
+    onClickPreventDefault: event => {
+      console.log('prevent default');
+      event.preventDefault();
+    },
   },
 };
 </script>

src/button-angular/README.md

@@ -158,15 +158,31 @@ integrating Google Pay into your website.
       <p>Also raised as event <code>"cancel"</code>.</p>
     </td>
   </tr>
+  <tr>
+    <td><p>clickCallback</p></td>
+    <td>
+      <p>Invoked when the Google Pay button is clicked, before the payment sheet is displayed.</p>
+      <p>Display of the payment sheet can be prevented by calling <code>event.preventDefault()</code>.</p>
+    </td>
+  </tr>
   <tr>
     <td>
       <p>errorCallback</p>
     </td>
     <td>
-      <p>Invoked an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet.</p>
+      <p>Invoked when an error is encountered in the process of presenting and collecting payment options from the Google Pay payment sheet.</p>
       <p>Also raised as event <code>"error"</code>.</p>
     </td>
   </tr>
+  <tr>
+    <td>
+      <p>loadPaymentDataCallback</p>
+    </td>
+    <td>
+      <p>Invoked when a user has successfully nominated payment details. This callback receives the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentData"><code>PaymentData</code> response</a> which includes the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentMethodData"><code>PaymentMethodData</code></a> that can be sent to <a href="https://developers.google.com/pay/api#participating-processors">supported payment processors</a>.</p>
+      <p>Also raised as event <code>"loadpaymentdata"</code>.</p>
+    </td>
+  </tr>
   <tr>
     <td>
       <p>paymentAuthorizedCallback</p>
@@ -197,15 +213,6 @@ integrating Google Pay into your website.
       <p>Also raised as event <code>"readytopaychange"</code>.</p>
     </td>
   </tr>
-  <tr>
-    <td>
-      <p>loadPaymentDataCallback</p>
-    </td>
-    <td>
-      <p>Invoked when a user has successfully nominated payment details. This callback receives the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentData"><code>PaymentData</code> response</a> which includes the <a href="https://developers.google.com/pay/api/web/reference/response-objects#PaymentMethodData"><code>PaymentMethodData</code></a> that can be sent to <a href="https://developers.google.com/pay/api#participating-processors">supported payment processors</a>.</p>
-      <p>Also raised as event <code>"loadpaymentdata"</code>.</p>
-    </td>
-  </tr>
 </table>
 
 ## About this package

src/button-angular/lib/google-pay-button.component.ts

@@ -42,6 +42,7 @@ export class GooglePayButtonComponent implements OnInit, OnChanges {
   @Input() loadPaymentDataCallback?: (paymentData: google.payments.api.PaymentData) => void;
   @Input() cancelCallback?: (reason: google.payments.api.PaymentsError) => void;
   @Input() errorCallback?: (error: Error) => void;
+  @Input() clickCallback?: (event: Event) => void;
 
   constructor(private elementRef: ElementRef) {}
 
@@ -100,6 +101,11 @@ export class GooglePayButtonComponent implements OnInit, OnChanges {
         }
         this.dispatch('loadpaymentdata', paymentData);
       },
+      onClick: event => {
+        if (this.clickCallback) {
+          this.clickCallback?.(event);
+        }
+      },
     };
 
     this.manager.configure(config);