Uncaught TypeError: Cannot read properties of undefined (reading 'bigpayBaseUrl')

[garytsnaptravel]

Describe the bug Uncaught TypeError: Cannot read properties of undefined (reading 'bigpayBaseUrl') when calling await checkoutService.loadCheckout()

To Reproduce Steps to reproduce the behavior: Call this code from within an empty React component, where checkoutId is the cart ID from bc_cartId

useEffect(() => {
    const checkoutService = createCheckoutService()
    loadCheckout()
    async function loadCheckout() {
      const state = await checkoutService.loadCheckout(checkoutId)
    }

Expected behavior That I don't encounter this issue, because I am not looking to integrate with BigPay.

Screenshots (won't be of additional help)

Desktop (please complete the following information): Desktop Chrome, Mac M1

Smartphone (please complete the following information): N/A

Additional context I'm basically following the https://github.com/bigcommerce/checkout-sdk-js#usage section. Is there any steps I might have missed, such as configuring environment variables?

[animesh1987]

Hi @garytsnaptravel thanks for raising this. bigpayBaseUrl is a required config value under config here https://github.com/bigcommerce/checkout-sdk-js/blob/83f8f297eab4af8987dcf96f77c096d6e4a29e44/dist/checkout-sdk.d.ts#L5108 and https://github.com/bigcommerce/checkout-sdk-js/blob/83f8f297eab4af8987dcf96f77c096d6e4a29e44/dist/checkout-sdk.d.ts#L5842.

Out of curiosity can you please attach a screencast as to where and how you are trying to initialise the above component. Also can you check if there is a call to /api/storefront/checkout-settings endpoint is successful in the network team?

Also you have listed that you are using bc_cartId as checkoutId, I don't think they the same thing.

[garytsnaptravel]

Hi @animesh1987, thank you for trying to help. This is the code for the whole page/component:

import { createCheckoutService } from '@bigcommerce/checkout-sdk'
import React, { useEffect, FC } from 'react'
interface Props {
  checkoutId?: string
}

const Checkout: FC<Props> = ({ checkoutId }) => {
  useEffect(() => {
    if (!checkoutId) return

    const checkoutService = createCheckoutService()

    loadCheckout()

    async function loadCheckout() {
      const state = await checkoutService.loadCheckout(checkoutId)
      console.log(state.data.getCart())
    }
  }, [checkoutId])

  return <h1>Test</h1>
}

export default Checkout

And this is the screenshot of the corresponding page:

[garytsnaptravel]

I am aware that bigpayBaseUrl is part of those two interfaces, but I am confused where to pass in the config when I'm only calling createCheckoutService() or service.loadCheckout() - neither of the parameters expected have the store config or payment settings type expected.

Could you show a full example of how to pass in the bigPayBaseUrl explicitly but with dummy values?

---

I think bc_cartId, which is the cart ID, is synonymous with checkout ID. I'm not sure if this is causing the current issue though.

---

And yes, the /checkout-settings endpoint is called successfully:

[animesh1987]

So in the response of checkout-settings call you should have a paymentSettings with bigpayBaseUrl as a property

Also fairly certain bc_cartId is not the checkoutId.

[garytsnaptravel]

@animesh1987 , I see what you mean now - the /api/storefront/checkout-settings request was returning a "not found" page, but this means I have to implement my own backend API for that to return the store config - which I wouldn't know what to fill in anyway.

Nothing in the docs suggests anything about this part of the setup, so this is a very poor developer experience so far and not something one could have figured out on their own. I think I will try using the checkout APIs as well instead of messing with this SDK.