Componente de Número de Cartão de Crédito Causa Re-renderização e Perda de Dados

[guilhermealves18]

Eu estou utilizando o onBinChange para armazenar os primeiros digitos do cartão para buscar as parcelas e exibir em um select através de um useState.

Porém, ao executar o useState o componente CardNumber faz um reload e prejudica a experiência do usuário... Meu cliente pediu para integrar o sistema e ele exige que o usuário faça tudo através do site...

Como posso resolver isso?

A documentação sobre como implementar os métodos core está bem escrita porém com poucas coisas sobre integração com React... Podem me ajudar?

import { CardNumber } from '@mercadopago/sdk-react'
import type {
  BinChangeArg,
  ValidityChangeArg,
} from '@mercadopago/sdk-react/secureFields/util/types'
import { memo } from 'react'

export const CreditCardField = memo(function CreditCardField({
  onValidityChange,
  onBinChange,
}: {
  onValidityChange: (argument: ValidityChangeArg<'cardNumber'>) => void
  onBinChange: (argument: BinChangeArg) => void
}) {
  return (
    <CardNumber
      onBinChange={onBinChange}
      onValidityChange={onValidityChange}
      style={{
        height: '100%',
        width: '100%',
        fontSize: '0.875rem',
        placeholderColor: 'var(--muted-foreground)',
        color: '#fff',
      }}
      placeholder="Número do cartão"
    />
  )
})

CreditCardField.displayName = 'CreditCardField'

[lemazzo]

Oi, Guilherme!

Pode ser uma falha no ciclo de vida da aplicação que está disparando renderização inapropriada nesse momento. Indico alguns artigos que podem ajudar a lidar com esse ponto:
React.dev - Memo
Medium - React Components rendered twice
Medium - Wait, you’re not using <React.StrictMode>?!

Caso não dê certo, quantos dos primeiros dígitos do cartão você armazena?

[guilhermealves18]

Olá!!!

Sim, é o ciclo de vida do componente, dei uma olhada nos artigos, nada pode me ajudar.

Os números é o valor retornado pelo onBinChange, exemplo: 50314332, lembrando que apenas quero armazenar em estado local para utilizar para gerar o card token.

[guilhermealves18]

O problema foi resolvido, o SDK não é o problema.

Como eu resolvi:
Armazenei o valor do onBinChange value?.bin no setValue do react-hook-form:

function handleBinChange(argument: BinChangeArg) {
    setValue('sixFirstDigit', argument.bin ?? '')
}

Também criei um input com type="hidden"

<Input
  id="sixFirstDigit"
  type="hidden"
  placeholder="Digite os 6 primeiros dígitos do cartão"
  {...register('sixFirstDigit')}
/>

E agora eu consigo recuperar tranquilamente no meu componente de exibição de parcelas sem re-renderizar o SDK....

Sendo assim deixo minha dica para os devs do SDK: Fazer um componente de seleção de parcelas que já identifica as parcelas assim que o usuário digitar o número no CardNumber... rsrs obrigado 😎