Tokenizando mais de um cartão

Para tokenizar dois ou mais cartões na mesma página, crie uma instância de MalgaTokenization para cada cartão. Cada instância tem seus próprios campos, eventos e token. O que muda em relação a um único cartão é o container: ele aceita qualquer id, desde que seja único na página. As chaves de config.fields continuam as mesmas (cardNumber, cardHolderName, cardCvv, cardExpirationDate). O sufixo numérico do exemplo abaixo é só uma convenção: numero-titular e numero-dependente funcionam igual.

<div id="card-number-1"></div>
<div id="card-holder-name-1"></div>
<div id="card-cvv-1"></div>
<div id="card-expiration-date-1"></div>

<div id="card-number-2"></div>
<div id="card-holder-name-2"></div>
<div id="card-cvv-2"></div>
<div id="card-expiration-date-2"></div>

const buildOptions = (suffix: string) => ({
  sandbox: true,
  config: {
    fields: {
      cardNumber: { container: `card-number-${suffix}` },
      cardHolderName: { container: `card-holder-name-${suffix}` },
      cardCvv: { container: `card-cvv-${suffix}` },
      cardExpirationDate: { container: `card-expiration-date-${suffix}` },
    },
  },
})

const firstCard = new MalgaTokenization({
  apiKey: 'API_KEY',
  clientId: 'CLIENT_ID',
  options: buildOptions('1'),
})

const secondCard = new MalgaTokenization({
  apiKey: 'API_KEY',
  clientId: 'CLIENT_ID',
  options: buildOptions('2'),
})

const [first, second] = await Promise.all([
  firstCard.tokenize(),
  secondCard.tokenize(),
])

Os eventos não são compartilhados entre as instâncias: um on registrado em firstCard só recebe eventos dos campos do primeiro cartão. O campo field dos eventos devolve o container configurado, por exemplo card-number-1.

Cada instância aplica o próprio config.styles aos seus campos, e a classe de cada input é o seu container. Por isso, no segundo cartão, o seletor do número é .card-number-2, e não .card-number. Veja Estilos.

Não reutilize o mesmo container em duas instâncias. Os campos são localizados pelo id na página, e um id repetido faz os dados de um cartão se misturarem com os do outro.

Eventos

Aprenda a utilizar os eventos disponíveis.

Tokenization SDK

API SDKs

UI SDKs

Plugins

Tokenizando mais de um cartão

Eventos