SSG'd pages double render CreditCard component

[calebfaruki]

I attempted to submit this bug on issues tab but it has way too many required fields and too much upfront work just to get this issue published. I just need a workaround. SSG'd pages render the <CreditCard /> component twice and I'm not sure how to fix this.

Tested on non-SSG page: no issue.

Tested on SSR page (two renders): two credit card forms are present.

On my SSG'd page, I get the following error:

Uncaught (in promise) PaymentMethodNotAttachedError: Card has not been attached to the page. It must be attached before a payment method can be tokenized

This is my form code:

<PaymentForm applicationId={env.SQUARE_APPLICATION_ID}
  locationId={env.SQUARE_LOCATION_ID}
  cardTokenizeResponseReceived={(props: Square.TokenResult) => {
    console.log(props)
  }}>
  <CreditCard />
</PaymentForm>

Versions:

• GatsbyJS v4.16
• Node v16.14.0
• MacOS v12.3.1
• Firefox v101.0.1

I found one similar issue but its root cause appears to be unrelated: #46