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

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?

Hi @garytsnaptravel thanks for raising this. bigpayBaseUrl is a required config value under config here

checkout-sdk-js/dist/checkout-sdk.d.ts

Line 5108 in 83f8f29

declare interface PaymentSettings {

and

checkout-sdk-js/dist/checkout-sdk.d.ts

Line 5842 in 83f8f29

declare interface StoreConfig {

.

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.

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:

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:

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.

@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.