Google-pay-button paymentRequest typeErrors when building

I’ve created this stackBlitz example where its building fine, no errors. I have uploaded this to a repository on github for me to clone and build locally or via github.dev /stackBlitz dev.

On each of those clones it throws typeErrors with the import { GooglePayButtonModule } from '@google-pay/button-angular';.

<google-pay-button environment="TEST" [paymentRequest]="paymentRequest" 
(loadpaymentdata)="onLoadPaymentData($event)"></google-pay-button>

It complains about the paymentRequest config:

  paymentRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['AMEX', 'VISA', 'MASTERCARD'],
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'example',
            gatewayMerchantId: 'exampleGatewayMerchantId',
          },
        },
      },
    ],
    merchantInfo: {
      merchantId: '12345678901234567890',
      merchantName: 'Demo Merchant',
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPriceLabel: 'Total',
      totalPrice: '100.00',
      currencyCode: 'USD',
      countryCode: 'US',
    },
  };

Example of error from other IDEs…

Whats wrong and why does it work and not complain on stackBlitz?

Is there some setting in tsconfig I’m missing about strict typings, where StackBlitz is more sympathetic?

>Solution :

The error is coming from the below line.

✘ [ERROR] NG2: Type '{ apiVersion: number; apiVersionMinor: number; allowedPaymentMethods: { type: string; parameters: { allowedAuthMethods: string[]; allowedCardNetworks: string[]; }; tokenizationSpecification: { ...; }; }[]; merchantInfo: { ...; }; transactionInfo: { ...; }; }' is not assignable to type 'PaymentDataRequest'.
  Types of property 'allowedPaymentMethods' are incompatible.
    Type '{ type: string; parameters: { allowedAuthMethods: string[]; allowedCardNetworks: string[]; }; tokenizationSpecification: { type: string; parameters: { gateway: string; gatewayMerchantId: string; }; }; }[]' is not assignable to type 'PaymentMethodSpecification[]'.
      Type '{ type: string; parameters: { allowedAuthMethods: string[]; allowedCardNetworks: string[]; }; tokenizationSpecification: { type: string; parameters: { gateway: string; gatewayMerchantId: string; }; }; }' is not assignable to type 'PaymentMethodSpecification'.
        Types of property 'type' are incompatible.
          Type 'string' is not assignable to type 'PaymentMethodType'. [plugin angular-compiler]

When I lookup the type of PaymentMethodType in DefinetlyTyped for google pay.

index.d.ts – github

type PaymentMethodType = "CARD" | "PAYPAL";

So you are passing value as string, but it is not matching with this type. To solve this problem, I first installed the typings for google pay from the below package:

@types/googlepay

npm install --save @types/googlepay

Then we can strict type the property which you pass as input to the google pay component.

  paymentRequest: google.payments.api.PaymentDataRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      ...

Now your code should compile. The problem was the string you set 'CARD' was not recognized for the union type "CARD" | "PAYPAL", When we strict type the object, typescript recognizes the configuration and the error goes away.

Github Repo