fix!: update onError callback signature to match runtime values

The `onError` method signature is currently incorrect. This change will make it consistent with what is actually happening at runtime.

Note that this is a semver breaking change.

Fixes #101

examples/react/src/App.tsx

@@ -33,6 +33,7 @@ import DynamicPriceUpdateExample from './examples/DynamicPriceUpdateExample';
 import DirectIntegrationExample from './examples/DirectIntegrationExample';
 import ButtonSizeExample from './examples/ButtonSizeExample';
 import OnClickExample from './examples/OnClickExample';
+import OnErrorExample from './examples/OnErrorExample';
 
 const App: React.FC = () => {
   const [amount, setAmount] = useState('100.00');
@@ -137,6 +138,7 @@ const App: React.FC = () => {
       <PaymentDataChangedExample {...props} />
       <PaymentDataChangedErrorExample {...props} />
       <OffersExample {...props} />
+      <OnErrorExample {...props} />
       <OnCancelExample {...props} />
       <DisplayItemsExample {...props} />
       <DynamicPriceUpdateExample {...props} />

examples/react/src/examples/OnErrorExample.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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 OnErrorExample(props: any): React.ReactElement {
+  return (
+    <Example title="On Error">
+      <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',
+          },
+          callbackIntents: ['SHIPPING_ADDRESS'],
+        }}
+        onLoadPaymentData={paymentRequest => {
+          console.log('Success', paymentRequest);
+        }}
+        onError={error => {
+          if (error instanceof Error) {
+            console.log('Error', error, error.message, error.stack);
+          } else {
+            console.log('Error', error.statusCode, error.statusMessage);
+          }
+        }}
+        existingPaymentMethodRequired={props.existingPaymentMethodRequired}
+        buttonColor={props.buttonColor}
+        buttonType={props.buttonType}
+        buttonLocale={props.buttonLocale}
+      />
+    </Example>
+  );
+}

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

@@ -41,7 +41,7 @@ export class GooglePayButtonComponent implements OnInit, OnChanges {
   @Input() readyToPayChangeCallback?: (result: any) => void;
   @Input() loadPaymentDataCallback?: (paymentData: google.payments.api.PaymentData) => void;
   @Input() cancelCallback?: (reason: google.payments.api.PaymentsError) => void;
-  @Input() errorCallback?: (error: Error) => void;
+  @Input() errorCallback?: (error: Error | google.payments.api.PaymentsError) => void;
   @Input() clickCallback?: (event: Event) => void;
 
   constructor(private elementRef: ElementRef) {}

src/button-element/GooglePayButton.ts

@@ -88,7 +88,7 @@ class GooglePayButton extends HTMLElement {
   @Alias('errorCallback')
   @Alias('errorcallback')
   @Alias('onerror')
-  onError?: (error: Error) => void;
+  onError?: (error: Error | google.payments.api.PaymentsError) => void;
 
   @Alias('clickCallback')
   @Alias('clickcallback')

src/lib/button-manager.ts

@@ -32,7 +32,7 @@ export interface Config {
   onPaymentAuthorized?: google.payments.api.PaymentAuthorizedHandler;
   onLoadPaymentData?: (paymentData: google.payments.api.PaymentData) => void;
   onCancel?: (reason: google.payments.api.PaymentsError) => void;
-  onError?: (error: Error) => void;
+  onError?: (error: Error | google.payments.api.PaymentsError) => void;
   onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
   onClick?: (event: Event) => void;
   buttonColor?: google.payments.api.ButtonColor;
@@ -253,7 +253,7 @@ export class ButtonManager {
         || false;
     } catch (err) {
       if (this.config.onError) {
-        this.config.onError(err);
+        this.config.onError(err as Error);
       } else {
         console.error(err);
       }
@@ -325,12 +325,12 @@ export class ButtonManager {
         config.onLoadPaymentData(result);
       }
     } catch (err) {
-      if (err.statusCode === 'CANCELED') {
+      if ((err as google.payments.api.PaymentsError).statusCode === 'CANCELED') {
         if (config.onCancel) {
-          config.onCancel(err);
+          config.onCancel(err as google.payments.api.PaymentsError);
         }
       } else if (config.onError) {
-        config.onError(err);
+        config.onError(err as google.payments.api.PaymentsError);
       } else {
         console.error(err);
       }