Error As(framesv2) The card frame does not exist in the DOM.

[Efimov Maxim]

hey.

we're facing such an issue in our system with Frames implemented:

<Frames
        config={createCheckoutComFrameConfig({
          publicKey,
          localization: {
            cardNumberPlaceholder: 'E.g. 1234 5678 9123 4567',
            expiryMonthPlaceholder: `${translate('month')} (MM)`,
            expiryYearPlaceholder: `${translate('year')} (YY)`,
            cvvPlaceholder: 'E.g. 123',
          },
        })}
        cardTokenized={onCardTokenizedHandler}
        frameValidationChanged={onFrameValidationChangedHandler}
        ready={onReadyHandler}
        cardSubmitted={onCardSubmittedHandler}
      >

it only happens on mobile devices, it might happen quite randomly and not often.

did somebody face the same issue?

[Tony Miksa]

I have the same error

[Janos Dobronszki]

I get this too.
Anyone managed to solve this?

[Faisal TariQ]

i get this too, what's the workaround to fix this ?
@checkout is anyone maintaining this pkg ?

[Noora]

Same issue here. I'm guessing no one is maintaining this package, so we won't be getting a fix?

[Oleksandr Rodik]

Guys, do you load the frames script lazily or statically by simply including it into the Head section? We inject the script lazily and have this error, only on iPhones

[Noora]

Guys, do you load the frames script lazily or statically by simply including it into the Head section? We inject the script lazily and have this error, only on iPhones

I've tried both ways. I'm on NextJS, so I've loaded the script before anything else on the page loads, and then I tried again, loading the script lazily. Same error.

[Efimov Maxim]

Guys, do you load the frames script lazily or statically by simply including it into the Head section? We inject the script lazily and have this error, only on iPhones

using it as an npm package, error appears on different variety of devices:

[Alex / KATT]

A few observations that I've encountered while integrating this that might help someone:

• You can't reliably mount <FramesReact/> immediately on load
• You can't reliably mount <FramesReact/> unless the SDK is loaded
• You have to immediately mount <CardNumber/> etc at the same time as you mount <FramesReact />

Something code that might help someone:

export function CardFormFramesProvider(props: { children: ReactNode }) {
  // Adds the `<script>` tag to the DOM if not already present
  const scriptState = useCardFormScript();

  /**
   * If we don't wait for the component to be mounted before rendering the iframes, it sometimes fails
   * Possibly related: https://github.com/checkout/frames-react/issues/25
   **/
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);
  if (!isMounted) {
    return null;
  }
  if (scriptState === 'loading') {
    return null;
  }
  if (scriptState === 'error') {
    return <div>❌ Something went wrong loading our credit card provider</div>;
  }

  return (
    <FramesReact
      config={{
        // [...]
      }}
    >
      {props.children}
    </FramesReact>
  );
}