Skip to main content

​
Implementação com JavaScript

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Tokenização - HYDRA HUB</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
    }
    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }
    button {
      background-color: #6941C6;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    .result {
      margin-top: 20px;
      padding: 15px;
      background-color: #f5f5f5;
      border-radius: 4px;
      display: none;
    }
  </style>
</head>
<body>
  <h1>Tokenização de Cartão</h1>
  <p>Este exemplo demonstra como tokenizar um cartão de crédito usando a API do HYDRA HUB.</p>
  
  <form id="card-form">
    <div class="form-group">
      <label for="card-number">Número do Cartão</label>
      <input type="text" id="card-number" placeholder="0000 0000 0000 0000" maxlength="19">
    </div>
    
    <div class="form-group">
      <label for="card-holder">Nome no Cartão</label>
      <input type="text" id="card-holder" placeholder="NOME COMO APARECE NO CARTÃO">
    </div>
    
    <div style="display: flex; gap: 10px;">
      <div class="form-group" style="flex: 1;">
        <label for="expiry-month">Mês de Expiração</label>
        <input type="text" id="expiry-month" placeholder="MM" maxlength="2">
      </div>
      
      <div class="form-group" style="flex: 1;">
        <label for="expiry-year">Ano de Expiração</label>
        <input type="text" id="expiry-year" placeholder="AAAA" maxlength="4">
      </div>
      
      <div class="form-group" style="flex: 1;">
        <label for="cvv">CVV</label>
        <input type="text" id="cvv" placeholder="123" maxlength="4">
      </div>
    </div>
    
    <button type="submit">Tokenizar Cartão</button>
  </form>
  
  <div class="result" id="result">
    <h3>Token Gerado:</h3>
    <code id="token-output"></code>
  </div>
  
  <script>
    // Configurando a chave pública
    const PUBLIC_KEY = 'pk_userKey';
    
    // Função para tokenizar o cartão
    async function tokenizeCard(cardData) {
      const response = await fetch(`https://api.hydrahub.com.br/api/v1/card-token?publicKey=${PUBLIC_KEY}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(cardData)
      });
      
      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'Erro ao tokenizar cartão');
      }
      
      return await response.text();
    }
    
    // Manipulador do formulário
    document.getElementById('card-form').addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const cardData = {
        number: document.getElementById('card-number').value.replace(/\s/g, ''),
        holderName: document.getElementById('card-holder').value,
        expirationMonth: document.getElementById('expiry-month').value,
        expirationYear: document.getElementById('expiry-year').value,
        cvv: document.getElementById('cvv').value
      };
      
      try {
        const token = await tokenizeCard(cardData);
        document.getElementById('token-output').textContent = token;
        document.getElementById('result').style.display = 'block';
      } catch (error) {
        alert('Erro ao tokenizar cartão: ' + error.message);
      }
    });
    
    // Formatação do número do cartão (adicionando espaços a cada 4 dígitos)
    document.getElementById('card-number').addEventListener('input', function(e) {
      let value = e.target.value.replace(/\s/g, '');
      let formattedValue = '';
      
      for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) {
          formattedValue += ' ';
        }
        formattedValue += value[i];
      }
      
      e.target.value = formattedValue;
    });
  </script>
</body>
</html>

​
Como Funciona

  1. O usuário preenche os dados do cartão no formulário
  2. Quando o usuário submete o formulário, os dados são enviados para o endpoint /api/v1/card-token com a chave pública como parâmetro
  3. O token JWT retornado é exibido na tela e pode ser usado para criar uma transação de pagamento
  4. Os dados reais do cartão nunca são armazenados em seu servidor, aumentando a segurança

​
Exemplo de Dados para Teste

Para testar a tokenização, você pode usar os seguintes dados fictícios: 
Número do cartão: 4000000000000010
Nome: JOAO M SILVA
Mês de expiração: 12
Ano de expiração: 2028
CVV: 123

​
Implementando na sua Aplicação

Para implementar este exemplo em sua aplicação:
  1. Substitua pk_userKey pela sua chave pública real
  2. Adapte o estilo e layout para corresponder ao design do seu site
  3. Após obter o token, você pode enviá-lo para seu servidor junto com outros dados de pedido para criar uma transação

​
Próximos Passos

Após tokenizar o cartão com sucesso, você deve:
  1. Enviar o token para seu servidor backend
  2. Criar uma transação usando o endpoint /api/v1/transactions
  3. Processar o resultado da transação (aprovada, negada, etc.)
O token gerado tem validade de 5 minutos. Certifique-se de utilizá-lo para criar uma transação antes desse prazo expirar.
Consulte a documentação de Transações com Cartão para mais detalhes sobre como processar pagamentos com o token gerado.