Error: Component/Frame is not yet registered

[jcfgt]

Hello

I try to integrate CardFields with React Visually it is ok

But in Console I have this

In my index.html (before call react bundle defered)

    <!--ChargeBee Integration-->
    <script src="https://js.chargebee.com/v2/chargebee.js"></script>

In my global context

const initialState = {
  ...
 cbInstance: Chargebee.init({
   site: global.window?.Config?.chargeBee.site,
   domain: global.window?.Config?.chargeBee.domain,
   publishableKey: global.window?.Config?.chargeBee.publishableKey
  }),
...
}

In my Component

const PaymentBlock = forwardRef(({ number, title, description, optional, currentStep, nextStep }, ref) => {

 //consts
  ...

  const cardRef = React.createRef();

  const handleOnChange = (status) => {
    let errors = {
      ...this.state.errors,
      [status.field]: status.error
    };
    let errMessages = Object.values(errors).filter(message => !!message);
    if (errMessages) {
      console.error({ errMessages })
    }
  }

  const handleOnReady = (el) => {
    Chargebee.registerAgain();
    el.focus();
  }

  useEffect(() => {
    setIsInactive(...)
  }, [state])

  const authorizeWith3ds = async () => {
    ...
  }

  const options = {
    ...
  }
  const { style, classes, locale, placeholder, fonts } = options;
  return (
    <StepBlock
      ref={ref}
      number={number}
      title={title}
      description={description}
      optional={optional}
      stepPassed={stepPassed}
      nextStep={nextStep}
      isInactive={isInactive}
    >
      <CardComponentWrapper
        styles={style}
        classes={classes}
        className="fieldset field"
        locale={locale}
        placeholder={placeholder}
        fonts={fonts}
        ref={cardRef}
        onReady={handleOnReady}
      >

        <CardCoupon placeholder="Ajout d'un coupon" after="(code réduction, etc.)" isInactive={isInactive} />
        <CardInformationWrapper>
          <CardName placeholder='Nom du titulaire' isInactive={isInactive} />
          <CardNumberInput placeholder='Numéro de carte' className="field empty" onChange={handleOnChange} onReady={handleOnReady} isInactive={isInactive} />

          <CardFieldsWrapper>
            <CardExpiryInput placeholder="Date d'expiration (MM / YY)" className="field empty" onChange={handleOnChange} isInactive={isInactive} />
            <CardCVVInput placeholder='Cryptogramme' className="field empty" onChange={handleOnChange} isInactive={isInactive} />
          </CardFieldsWrapper>
        </CardInformationWrapper>

      </CardComponentWrapper>
      <ButtonWrapper>
        <BlueButton disabled={isInactive} onClick={authorizeWith3ds}>Valider le paiement</BlueButton>
      </ButtonWrapper>
    </StepBlock>
  );
});

export default PaymentBlock;

[TomasBalaguer]

Same here!

[cb-dinesh]

Hi @TomasBalaguer , @jcfgt This issue has been fixed. Can you please check if you are still facing it?

[jcfgt]

Hi @cb-dinesh It seems to be good now!

Thank you :smiley:

[TomasBalaguer]

Hi @cb-dinesh Excellent. Is working fine now!!

Thank you!!!