Tokenizando o cartão de crédito

Na era digital atual, onde a segurança de dados é de suma importância, é crucial assegurar que informações sensíveis, como detalhes de cartões de crédito, sejam manuseadas com o máximo cuidado. Uma das principais preocupações para empresas que processam pagamentos online é a conformidade com o Padrão de Segurança de Dados da Indústria de Cartões de Pagamento (PCI DSS), um conjunto de diretrizes projetadas para garantir a segurança dessas informações críticas.

Servidores que não seguem os padrões do PCI DSS estão vulneráveis a uma série de riscos, incluindo ataques cibernéticos, vazamentos de dados, multas consideráveis, danos à reputação da empresa e responsabilidades legais. Diante desses desafios, torna-se essencial adotar soluções que minimizem o risco ao manipular dados de cartão de crédito.

Para atender a essa necessidade, desenvolvemos a tokenização de cartão, um script JavaScript avançado e fácil de integrar. Este script foi projetado para ser incorporado em páginas de checkout, operando de forma discreta e eficiente. Ele permite que os detalhes do cartão de crédito sejam capturados de forma segura e convertidos em um token único. Isso ocorre antes mesmo que os dados cheguem ao seu servidor ou sistema de pagamento.

Quando um cliente realiza uma compra e clica para finalizar o pedido, a tokenização de cartão entra em ação: ele captura os dados inseridos no formulário de pagamento e os envia diretamente para nossa API segura. Em resposta, nossa API gera e retorna um token representativo desses dados. Esse token pode ser utilizado para processar o pagamento sem expor as informações reais do cartão de crédito, garantindo assim conformidade com o PCI DSS, segurança para os clientes e tranquilidade para a sua empresa.

A integração utilizando esta tokenização de cartão é um passo estratégico para empresas que buscam oferecer não apenas conveniência, mas também segurança máxima em transações online, protegendo tanto a integridade dos dados dos clientes quanto a reputação e a confiabilidade do seu negócio.

Integração do Script

1. Adicione o script do Ticto à sua página de pagamento:

   <script src="https://icarus.ticto.dev/embed/tokenize.js" async></script>

2. Utilize a função encryptCard para gerar o token do cartão:

   async function tokenizeCard() {
     const cardData = {
       holder: "APRO",
       number: "5031433215406351",
       expMonth: "11",
       expYear: "2025",
       securityCode: "123"
     };
   
     const cardHolder = {
       identification: {
         type: "CPF", // Pode ser CPF ou CNPJ
         number: "12345678909"
       },
       name: "John Doe"
     };
   
     const result = await window.Ticto.encryptCard({cardData, cardHolder}, {
      onSuccess: (response) => doSomethingWith(response), 
      onError: (errors) => doSomethingWith(errors)
     });
   }

Parâmetros

• cardData: Objeto contendo os dados do cartão de crédito a ser tokenizado.
• cardHolder: Objeto contendo informações do titular do cartão.
• callbacks: Objeto contendo funções de callback onSuccess e onError.

Tipagem de cardData e cardHolder

• cardData: Objeto contendo informações do cartão:
  • holder: Nome do titular (string)
  • number: Número do cartão (string)
  • expMonth: Mês de expiração (string)
  • expYear: Ano de expiração (string)
  • securityCode: Código de segurança (string)
• cardHolder: Objeto contendo informações do titular:
  • identification:
    • type: Tipo de documento (CPF ou CNPJ)
    • number: Número do documento (string)
  • name: Nome do titular (string)

Callbacks

Em caso de sucesso onSuccess:

Retorna um objeto com:

  {
    "brand": "master",
    "token": "U2FsdGVkX1+laWiWlh2xNDpnTDEj0Iolx3Wqajlanf/94Fwz0f1pqmz+x35fhWBL8RpPdMUbN3taHrpvECIOmDy/GLsIH4S+GT75Mj3wF8uSn1u7i2BgZctKKUA5p6kwB1BwNTJdPs4/vDDt1pOiwUMc9BnYZIwWu871kYDr5gFS0R31AawGxva+0Z5xfdNPTGES6T1X18qYbj8WvYkKcwZp4wPxeNOYogiQ/heNfxUUzNzaEzeM4qNCNTzX0Dj1c9eUMnFkaLpykv0WBma3X7/P+VKx6SEuQ2QKo7yTJbQMhIsJVumDr9nYPdtC2rzVU5kVEYWEVNln7HPSeZq4VSa6xkafzT9qetonAViXu1sJdihyQm+6n1crjycRinZ4VOrD0pa13bJgyqqdobz3ZNLtNQjIF8GtfPTUxKUxEoHl3FCSjDZuyuz4eLB/ErmXiFQBTLotZB8BbV"
  }

Em caso de erro onError:

Retorna um array de erros:

  [
    "cardData.holder is required",
    "cardData.securityCode is required",
  ]

Exemplos de Uso

React

import React, { useState } from 'react';

const CardTokenizationForm = () => {
const [holderName, setHolderName] = useState('');
const [documentNumber, setDocumentNumber] = useState('');
const [cardNumber, setCardNumber] = useState('');
const [expMonth, setExpMonth] = useState('');
const [expYear, setExpYear] = useState('');
const [securityCode, setSecurityCode] = useState('');

const handleSubmit = async (e) => {
  e.preventDefault();

  const cardData = {
    holder: holderName,
    number: cardNumber,
    expMonth: expMonth,
    expYear: expYear,
    securityCode: securityCode
  };

  const cardHolder = {
    identification: {
      type: documentNumber.length === 11 ? 'CPF' : 'CNPJ',
      number: documentNumber
    },
    name: holderName
  };

  try {
    const token = await window.Ticto.encryptCard({ cardData, cardHolder }, {
      onSuccess: (response) => doSomethingWith(response), 
      onError: (errors) => doSomethingWith(errors)
    });
    // Processo adicional com o token
  } catch (error) {
    console.error('Erro na tokenização:', error);
  }
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={holderName}
      onChange={(e) => setHolderName(e.target.value)}
      placeholder="Nome do Titular"
    />
    <input
      type="text"
      value={documentNumber}
      onChange={(e) => setDocumentNumber(e.target.value)}
      placeholder="CPF ou CNPJ"
    />
    <input
      type="text"
      value={cardNumber}
      onChange={(e) => setCardNumber(e.target.value)}
      placeholder="Número do Cartão"
    />
    <input
      type="text"
      value={expMonth}
      onChange={(e) => setExpMonth(e.target.value)}
      placeholder="Mês de Expiração"
    />
    <input
      type="text"
      value={expYear}
      onChange={(e) => setExpYear(e.target.value)}
      placeholder="Ano de Expiração"
    />
    <input
      type="text"
      value={securityCode}
      onChange={(e) => setSecurityCode(e.target.value)}
      placeholder="Código de Segurança"
    />
    <button type="submit">Tokenizar Cartão</button>
  </form>
);
};

export default CardTokenizationForm;

Vue.js

<template>
<form @submit.prevent="handleSubmit">
  <input
    type="text"
    v-model="holderName"
    placeholder="Nome do Titular"
  />
  <input
    type="text"
    v-model="documentNumber"
    placeholder="CPF ou CNPJ"
  />
  <input
    type="text"
    v-model="cardNumber"
    placeholder="Número do Cartão"
  />
  <input
    type="text"
    v-model="expMonth"
    placeholder="Mês de Expiração"
  />
  <input
    type="text"
    v-model="expYear"
    placeholder="Ano de Expiração"
  />
  <input
    type="text"
    v-model="securityCode"
    placeholder="Código de Segurança"
  />
  <button type="submit">Tokenizar Cartão</button>
</form>
</template>

<script>
export default {
data() {
  return {
    holderName: '',
    documentNumber: '',
    cardNumber: '',
    expMonth: '',
    expYear: '',
    securityCode: ''
  };
},
methods: {
  async handleSubmit() {
    const cardData = {
      holder: this.holderName,
      number: this.cardNumber,
      expMonth: this.expMonth,
      expYear: this.expYear,
      securityCode: this.securityCode
    };

    const cardHolder = {
      identification: {
        type: this.documentNumber.length === 11 ? 'CPF' : 'CNPJ',
        number: this.documentNumber
      },
      name: this.holderName
    };

    try {
      await window.Ticto.encryptCard({ cardData, cardHolder }, {
        onSuccess: (response) => doSomethingWith(response), 
        onError: (errors) => doSomethingWith(errors)
      });
      // Processo adicional com o token
    } catch (error) {
      console.error('Erro na tokenização:', error);
    }
  }
}
};
</script>

Vanilla Javascript

• Crie um formulário HTML para entrada dos dados do cartão:

  <form id="cardForm">
    <input type="text" id="holderName" placeholder="Nome do Titular"/>
    <input type="text" id="cardNumber" placeholder="Número do Cartão"/>
    <input type="text" id="expMonth" placeholder="Mês de Expiração"/>
    <input type="text" id="expYear" placeholder="Ano de Expiração"/>
    <input type="text" id="securityCode" placeholder="Código de Segurança"/>
    <input type="text" id="document" placeholder="CPF ou CNPJ"/>
    <button type="submit">Tokenizar Cartão</button>
  </form>

• Adicione um ouvinte de eventos para processar os dados:

  document.getElementById('cardForm').addEventListener('submit', function(event) {
    event.preventDefault();
  
    const cardData = {
      holder: document.getElementById('holderName').value,
      number: document.getElementById('cardNumber').value,
      expMonth: document.getElementById('expMonth').value,
      expYear: document.getElementById('expYear').value,
      securityCode: document.getElementById('securityCode').value
    };
  
    const cardHolder = {
      identification: {
        type: "CPF", // CPF ou CNPJ
        number:  document.getElementById('document').value
      },
      name: document.getElementById('holderName').value 
    };
  
    await window.Ticto.encryptCard({ cardData, cardHolder }, {
      onSuccess: (response) => doSomethingWith(response), 
      onError: (errors) => doSomethingWith(errors)
    });
  });

info

Considerações Adicionais

• Garanta que o script seja carregado antes de tentar tokenizar os dados do cartão.
• Manipule os erros de forma adequada para melhorar a experiência do usuário.
• Certifique-se de seguir as melhores práticas de segurança ao coletar e processar dados de cartões de crédito.