Pular para o conteúdo principal
Use esta página para estilizar o campo hospedado e reagir a mudanças de estado sem ser dono dos dados brutos do cartão.

​
Exemplo de aparência

const card = elements.create("card", {
  theme: "default",
});

card.mount("#card-element");

​
Padrão de eventos suportados

let cardState = {
  valid: false,
  brand: null,
  errors: {},
};

card.on("ready", () => {
  messageEl.textContent = "";
});

card.on("change", (event) => {
  cardState = event;

  submitButton.disabled = !event.valid;
  brandEl.textContent = event.brand ? event.brand.toUpperCase() : "";
  messageEl.textContent = Object.values(event.errors ?? {})[0] ?? "";
});

card.on("error", (event) => {
  messageEl.textContent = event.message ?? "Unable to initialize the card field.";
});
Chame card.off("change", handler) no unmount do componente se o seu framework mantiver a mesma instância do cartão entre renders.

​
Payloads dos eventos

ready dispara quando o iframe hospedado carregou. Isso não significa que os dados do cartão são válidos. change dispara sempre que a entrada do cartão muda: 
{
  "valid": false,
  "brand": "visa",
  "errors": {
    "number": "Card number is invalid"
  }
}
Quando a bandeira não for identificada, brand será null. Quando o estado atual for válido, errors estará vazio e valid será true. error dispara quando o campo hospedado falha ao carregar ou recebe uma falha de pagamento fora de uma tentativa ativa de tokenização: 
{
  "message": "Unable to initialize the card field."
}

​
Estados inválidos

Use change.valid como a única trava de submit. Não deduza validade apenas pela bandeira do cartão. 
card.on("change", ({ valid, brand, errors }) => {
  submitButton.disabled = !valid;
  cardBrandEl.textContent = brand ?? "";

  const firstError = Object.values(errors ?? {})[0];
  errorEl.textContent = firstError ?? "";
});
O objeto errors é indexado pelo campo hospedado que precisa de atenção. As chaves exatas são controladas pelo campo hospedado, então renderize as mensagens em vez de fixar todas as chaves possíveis. Como corrigir: confirme a versão do script, o ambiente e a publicKey. Handlers de evento devem atualizar apenas o estado da interface; o estado final do pagamento continua vindo do back-end e dos webhooks.