Help with Google pay

[max-fletcher]

Hello. I am trying to use the react-square-web-payments-sdk(https://react-square-payments.weareseeed.com/) package to integrate Google Pay with Square. I am using the code below as main component in my react application to test out if google pay works. However, after the google pay modal opens, it shows the message :
This merchant is having trouble accepting your payment right now. Try using a different payment method. [OR_BIBED_06] OR_BIBED_06

I need to know why this might be happening and also if there is something extra I need to do to use this for testing(i.e local environment) .

P.S: I tried to use "@google-pay/button-react" from google and that works for test environment, but that is a bit tedious to use because of the token decryption step for merchants. Any help is appreciated.

import { useEffect, useState } from 'react'
import { CreditCard, GooglePay, PaymentForm } from 'react-square-web-payments-sdk';

function App() {
  const [loading, setLoading] = useState(false)

  const amount = "1.00"

  const handleResponse = (token) => {
    console.log('success', token)
    setLoading(true)
  }

  const applicationId = import.meta.env.VITE_SQUARE_APPLICATION_ID
  const locationId = import.meta.env.VITE_SQUARE_LOCATION_ID

  return (
    <>
        <PaymentForm
          applicationId={applicationId}
          locationId={locationId}
          createPaymentRequest={() => ({
            countryCode: "US",
            currencyCode: "USD",
            lineItems: [
              {
                amount: "22.15",
                label: "Item to be purchased",
                id: "SKU-12345",
                imageUrl: "https://url-cdn.com/123ABC",
                pending: true,
                productUrl: "https://my-company.com/product-123ABC"
              }
            ],
            taxLineItems: [
              {
                label: "State Tax",
                amount: "8.95",
                pending: true
              }
            ],
            discounts: [
              {
                label: "Holiday Discount",
                amount: "5.00",
                pending: true
              }
            ],
            requestBillingContact: false,
            requestShippingContact: false,
            shippingOptions: [
              {
                label: "Next Day",
                amount: "15.69",
                id: "1"
              },
              {
                label: "Three Day",
                amount: "2.00",
                id: "2"
              }
            ],
            // pending is only required if it's true.
            total: {
              amount: "41.79",
              label: "Total",
            },
          })}
        >
          <GooglePay />
        </ PaymentForm>
    </>
  )
}

export default App