window.Square.payments(appId, locationId) is not returning the correct object

I am trying to initialize a card and attach the card to a ui element. Following the examples here web-payments-quickstart/public/examples at main · square/web-payments-quickstart · GitHub I am trying the below approach to initialize a card:
const payments = window.Square.payments(appId, locationId)
const card = await payments.card()
await card.attach('#card-container')

But payments returns the below Fp object.

So I am unable to call the card method that should have been returned → payments.card(). Which means I am unable to attach the card to the DOM element.

How can I correctly initialize a card?

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Card Payments
Payment APIs
Create a Card on File from a Payment ID

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

Exactly what changes did you make to our Quickstart that caused this to not work? Have you reverted any changes to debug? :slightly_smiling_face:

@Bryan-Square I haven’t made any changes. I added the src to the root of my React project <script id='square' type="text/javascript" src=""></script>

I’m using my sandbox appId and my default locationId.

I am using a custom form field (below) and attempting to attach the card to the input element, following this example → web-payments-quickstart/public/examples/card-styling-simple.html at main · square/web-payments-quickstart · GitHub

  const initializeCard = async (payments) => {
    const card = await payments.card()
    await card.attach('#card-container')
    return card

  const isSquareDefined = async () => {
    if (!window?.Square) throw new Error('Square.js failed to load properly') 
    try {
      const initializedCard = await initializeCard(window?.Square?.payments(appId, locationId))
    } catch (e) {
      console.error('Error in defining Square Card', e)

  return (
      {/* <CreditCard /> */}
      <Styled.StyledSquareCCForm id='payment-form'>
        {error ? (
            title="There was an error loading payment details."
            description="Please refresh to try again."
            <StyledPrimaryButton type="button">
        ) : (
            <StyledFormField width={'100%'} id={'card-container'} >
                label="Card Number"
                  placeholder="Card Number"
                  onChange={() => {

So your building a React project? Is there a reason your not using our React Web Payments SDK. :slightly_smiling_face:

@Bryan-Square I have that SDK installed. But I need to customize the credit card form to keep design across my app consistent. Is there an example of how to completely customize the CC form while using the react SDK? How should initialize a card using the SDK?

The CC form needs to be customized to have each required input field separate:
Screenshot 2024-02-15 at 9.27.01 AM