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

Questions
1

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.

Screenshot 2024-02-14 at 4.50.38 PM
Screenshot 2024-02-14 at 4.50.38 PM807×120 24.3 KB

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?

2

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

3

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:

4

@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="https://sandbox.web.squarecdn.com/v1/square.js"></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)
      setError(true)
    }
    return
  }

  return (
    <div>
      {/* <CreditCard /> */}
      <Styled.StyledSquareCCForm id='payment-form'>
        {error ? (
          <ErrorContainer
            title="There was an error loading payment details."
            description="Please refresh to try again."
          >
            <StyledPrimaryButton type="button">
              Refresh
            </StyledPrimaryButton>
          </ErrorContainer>
        ) : (
          <>
            <StyledFormField width={'100%'} id={'card-container'} >
              <SecureField
                fieldType={"square-card-number"}
                label="Card Number"
                icon={"card-empty"}
              >
                <StyledInput
                  placeholder="Card Number"
                  type="text"
                  onChange={() => {
                    isSquareDefined()
                  }}
                />
              </SecureField>
            </StyledFormField>
      </>
      )}
      </Styled.StyledSquareCCForm>
    </div>
  );
};
5

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

6

@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