Error type not matching the documentation

[tnguyen42]

I noticed that when printing the error using the onError property on the component, the error was stringified for some reason. Therefore, it was only printing Error.

Furthermore, to access the "actual error", I had to console.log(error.statusCode) or console.log(error.statusMessage), as the documentation indicates that this is the actual shape of the Google Pay error: https://developers.google.com/pay/api/web/reference/error-objects

However, the expected type in this package (@google-pay/button-react/dist/index.d.ts, line 33) expects the standard Error from TypeScript, which doesn't have the statusCode and statusMessage properties, causing the error handling difficult without overwriting the type at least locally.

Unless I mistunderstood something, I think it should instead use a custom error with statusCode and statusMessage properties.

My suggestion would be to define an interface just above the Config interface:

interface GooglePayError extends Error {
    statusCode?: string;
    statusMessage?: string;
}

And using it instead of Error in the Config interface:

interface Config {
    environment: google.payments.api.Environment;
    existingPaymentMethodRequired?: boolean;
    paymentRequest: google.payments.api.PaymentDataRequest;
    onPaymentDataChanged?: google.payments.api.PaymentDataChangedHandler;
    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: GooglePayError) => void;
    onReadyToPayChange?: (result: ReadyToPayChangeResponse) => void;
    onClick?: (event: Event) => void;
    buttonColor?: google.payments.api.ButtonColor;
    buttonType?: google.payments.api.ButtonType;
    buttonSizeMode?: google.payments.api.ButtonSizeMode;
    buttonLocale?: string;
}

[socsieng]

Thanks for reporting this. I think the actual problem here is that in some cases onError will receive Error while in other cases, onError receives google.payments.api.PaymentsError.

In any case, the onError method signature is currently incorrect. The correct method signature would look something like this:

function onError(error: Error | google.payments.api.PaymentsError) {}

This would mean that if you needed access to statusCode or statusMessage, you would need to do something like this:

function onError(error: Error | google.payments.api.PaymentsError) {
  if (error instanceof Error) {
    console.log('Error', error, error.message, error.stack);
  } else {
    console.log('Error', error.statusCode, error.statusMessage);
  }
}

Does this make it easier or harder for you?

[socsieng]

@tnguyen42, do you mind looking over #102?

[tnguyen42]

@socsieng Sorry I didn't see your notification earlier, I actually looked at your PR from day 1 and I was waiting for it to be merged 😅
It looks good to me!

[socsieng]

This should now be available in v3