Por que os campos de entrada do meu cartão não estão carregando para o Componente do Cartão ou Drop-in?

Se você receber Chave inválida do cliente ou Erro de origem desconhecida nos iFrames dos campos de entrada do cartão no seu Drop-in ou Card Component, isso está relacionado a uma chave incorreta para a autenticação client-side. Dependendo da sua integração, pode ser a chave do cliente ou a chave de origem. Você pode gerar estas chaves na Dashboard — para isso, acesse Desenvolvedores > Credenciais de API, onde você pode selecionar a credencial da API para a qual você quer gerar a chave.

Caso você esteja fazendo a autenticação usando uma chave de cliente, verifique se:

1. Você está usando a chave de cliente correta em sua integração?
2. Todos os domínios nos quais os campos de entrada do cartão são carregados são adicionados ao campo "Allowed Origins", como explicado aqui?
3. Você está usando a chave do cliente no ambiente correto (teste/real)?

Caso você esteja fazendo a autenticação usando uma chave de origem, verifique se:

1. Você está usando a chave de origem correta em sua integração? Tente gerar a chave de origem novamente para os domínios em que você está carregando o componente de cartão ou o Drop-in.
2. A chave de origem é gerada para o domínio no qual os campos do cartão estão hospedados? Você pode encontrar a origem da sua página verificando window.location.origin no console do navegador como explicado aqui.
3. A chave de origem foi gerada no ambiente correto (teste/real)?