Obtendo os dados do Cartão

Com o Pagar.me, você pode obter os dados do cartão sem que o seu cliente tenha que sair da sua página/aplicativo. Para que o processo aconteça de forma segura, é necessário incluir a nossa biblioteca em sua página/aplicativo para obter esses dados e, posteriormente, criar uma transação. Para fazer isso nós disponibilizamos o pagarme.js e o Checkout Pagar.me.

Os passos a seguir descrevem como você pode gerar um Card Hash, a partir dos dados de cartão e usando a pagarme.js. Essa informação é usada para criar uma transação com a API Pagar.me.

Para saber mais sobre o que é um card_hash, veja a explicação em: Overview

Vamos lá!

Web

Para gerar o card_hash dentro de uma página web, você precisa incluir o pagarme.js, nosso Javascript, em sua página. Para fazer isso, insira o seguinte código antes do final da seção head da sua página HTML:

<script src=“https://assets.pagar.me/pagarme-js/4.5/pagarme.min.js” />

Nós também usamos também jQuery para gerar e inserir o card_hash no seu formulário, então é preciso incluir também esse script antes do final da seção head da sua página HTML:

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Depois de fazer isso, insira um formulário para digitar os dados de cartão, por exemplo:

<div id="form">
    Número do cartão: <input type="text" id="card_number"/>
    <br/>
    Nome (como escrito no cartão): <input type="text" id="card_holder_name"/>
    <br/>
    Mês de expiração: <input type="text" id="card_expiration_month"/>
    <br/>
    Ano de expiração: <input type="text" id="card_expiration_year"/>
    <br/>
    Código de segurança: <input type="text" id="card_cvv"/>
    <br/>
    <div id="field_errors">
    </div>
    <br/>
</div>
<form id="payment_form" action="https://seusite.com.br/transactions/new" method="POST">
    <input type="submit"></input>
</form>

Por fim, no seu Javascript, você precisa detectar quando o botão do formulário é pressionado. Quando isso for feito, é preciso chamar o pagarme.js para gerar o card_hash e substituir os outros campos dos dados de cartão por ele:

$(document).ready(function() { 
    var form = $("#payment_form")

    form.submit(function(event) {
        event.preventDefault();
        var card = {} 
        card.card_holder_name = $("#form #card_holder_name").val()
        card.card_expiration_date = $("#form #card_expiration_month").val() + '/' + $("#form #card_expiration_year").val()
        card.card_number = $("#form #card_number").val()
        card.card_cvv = $("#form #card_cvv").val()

        // pega os erros de validação nos campos do form e a bandeira do cartão
        var cardValidations = pagarme.validate({card: card})
				
        //Então você pode verificar se algum campo não é válido
        if(!cardValidations.card.card_number)
          console.log('Oops, número de cartão incorreto')
         
        //Mas caso esteja tudo certo, você pode seguir o fluxo
        pagarme.client.connect({ encryption_key: 'SUA_ENCRYPTION_KEY' })
          .then(client => client.security.encrypt(card))
          .then(card_hash => console.log(card_hash))
          // o próximo passo aqui é enviar o card_hash para seu servidor, e
          // em seguida criar a transação/assinatura

        return false
    })
});

Com o card_hash gerado, você pode criar uma transação. Saiba mais em: Cartão de crédito

iOS

Para realizar a geração do card_hash dentro de um aplicativo para iOS, você pode usar o nosso CocoaPod. Veja a seguir as instruções para inclusão e utilização do mesmo.

Instalando a biblioteca

Você deve incluir a dependência ao seu PodFile, segue:

pod 'PagarMe', '~> 1.1.1'

Em seguida, execute o comando:

pod install

Feito isso, o CocoaPod PagarMe é adicionado ao seu app.

Usando a biblioteca

Para utilizar a biblioteca com Objetive-C, você só precisa importar o Header file a seguir:

#import "PagarMe.h"

Para utilizar a biblioteca com Swift você precisa primeiro criar um Header file, que será seu Bridging Header, e depois adicionar o header PagarMe a este file:

//
//  SwiftPagarMePodFile-Bridging-Header.h
//  SwiftPagarMePodFile
//
//  Created by PagarMe
//  Copyright © 2017 PagarMe. All rights reserved.
//

#ifndef SwiftPagarMePodFile_Bridging_Header_h
#define SwiftPagarMePodFile_Bridging_Header_h

import "PagarMe"

#endif /* SwiftPagarMePodFile_Bridging_Header_h */

Em seguida já é possível importar a biblioteca PagarMe em sua classe Swift, e gerar o card_hash a partir dos dados de cartão:

[PagarMe sharedInstance].encryptionKey = @"SUA ENCRYPTION KEY";
    
    PagarMeCreditCard *pagarMeCreditCard = [[PagarMeCreditCard alloc]              initWithCardNumber:@"4242424242424242"
        cardHolderName:@"John Smith"
        cardExpirationMonth:@"05"
        cardExpirationYear:@"25"
        cardCvv:@"123"];
    
    if ([pagarMeCreditCard hasErrorCardNumber]) {
        // Error with CardNumber
        NSLog(@"Número de cartão inválido");
    }
    else if ([pagarMeCreditCard hasErrorCardHolderName]) {
        // Error with CardHolderName
        NSLog(@"Nome no cartão deve ter ao menos 1 caractere");
    }
    else if ([pagarMeCreditCard hasErrorCardCVV]) {
        // Error with CardCVV
        NSLog(@"O card CVV deve ter entre 3 e 4 números apenas");
    }
    else if ([pagarMeCreditCard hasErrorCardExpirationMonth]) {
        // Error with CardExpirationMonth
        NSLog(@"Mês de validade incorreto, deve estar entre 1 e 12");
    }
    else if ([pagarMeCreditCard hasErrorCardExpirationYear]) {
        // Error with CardExpirationYear
        NSLog(@"Ano de validade incorreto");
    }
    else {
        // Validated all Fields!
        [pagarMeCreditCard generateHash:^(NSError *error, NSString *cardHash) {
            if(error) {
                NSLog(@"Error: %@", error);
                return;
            }
            NSLog(@"CardHash Generated: %@", cardHash);
        }];
    }

PagarMe.sharedInstance().encryptionKey = "SUA ENCRYPTION KEY"
        let creditCard = PagarMeCreditCard(cardNumber: "4242424242424242", cardHolderName: "Test Card", cardExpirationMonth: "10", cardExpirationYear: "20", cardCvv: "123")
        
        if (creditCard?.hasErrorCardCVV())!{
            print("erro no CVV")
        }else if (creditCard?.hasErrorCardNumber())!{
            print("Erro no numero do cartão")
        }else if (creditCard?.hasErrorCardHolderName())!{
            print("Erro no nome do cartão")
        }else if (creditCard?.hasErrorCardExpirationYear())!{
            print("Erro no ano de expiração")
        }else if (creditCard?.hasErrorCardExpirationMonth())!{
            print("Erro no mês de expiração")
        }else{
            creditCard?.generateHash({ (error, cardHash) -> Void in
                if (error != nil) {
                    print("erro = \(error.debugDescription)")
                }
                else
                {
                    print(cardHash!)
                }
            })
        }

.NET

Para realizar a geração do card_hash dentro de um aplicativo para Windows Forms, Windows Phone (plataforma .NET) ou ASP.NET você precisa incluir a nossa biblioteca dentro dele. Para isso, instale a biblioteca .NET ou a biblioteca portável para .NET .

Para utilizar a biblioteca, primeiro importe o namespace:

using PagarMe;

Para gerar o card_hash a partir dos dados de cartão:

PagarMeService.DefaultEncryptionKey = "ek_test_Ec8KhxISQ1tug1b8bCcxC2nXfxqRnk";

CardHash card = new CardHash();

card.CardNumber = "4111111111111111";
card.CardHolderName = "Test User";
card.CardExpirationDate = "1017";
card.CardCvv = "123";

string cardhash = card.Generate();