checkout-transparent-dev v1.0.3

Utilizando a SDK de Checkout Transparente

O script do checkout transparente deve ser inserido na sua página, apontando para o local em que está salvo o código. <script src="dist/pp-transparent.js"></script>. Após adicionar o script na página ficaria disponível um objeto chamado CheckoutTransparent e nele contém os métodos necessários para tokenizar o cartão.

Passo 1

A primeira coisa a se fazer é registrar as credenciais da loja em que vai ser criado o cartão tokenizado, chamando o método setCredentials da SDK. Nesse método é necessário passar a MerchantCredential(CNPJ) e o TransparentToken dessa forma aqui: CheckoutTransparent.setCredentials({merchantCredential: "30155515000121", transparentToken: "tk_YTAyMjgzOWQtNjgzZS00YjA2LTliMjQtZWFiMjgwNDlhMDE5"}).

Passo 2

Após adicionar as credenciais deve chamar o método CheckoutTransparent.getCardBrand({bin: "411111", success, error}), onde o bin é os 6 primeiros dígitos do cartão usado para identificar a bandeira, sucess é o callback que vamos chamar retornando a resposta com a bandeira então deve passar uma função para fazer esse tratamento e o error é o callback quando acontecer algum erro no processamento da requisição.

Objeto de sucesso na response:

{
   "brand":"Visa"
}

Objeto de erro na response:

{
  "errors": [
    {
      "errorCode": 1,
      "message": "Propriedade 'CardBin' está ausente.",
      "field": "CardBin"v
    }
  ]
}

Passo 3

Após o retorno da bandeira de cartão, pode chamar o método CheckoutTransparent.createTemporaryCard({card, success, error}) que é responsável por criar o token do cartão, onde card é o objeto contendo informações do cartão, success é o callback onde será informado o token gerado e o error é o callback que será chamado quando estiver algum erro na requisição. Abaixo um exemplo do objeto card preenchido:

{
   "brand":"Visa",
   "number":"4111111111111111",
   "holderName":"Joao da Silva",
   "holderDocument":"65844359038",
   "expirationMonth":"02",
   "expirationYear":"2021",
   "cvv":"223"
}

Objeto de retorno de sucesso:

{
   "temporaryToken":"card_t/AIChh82EgN440hTW8vQqHcPC82EwBW"
}

Objeto de retorno de erro:

{
   "errors":[
      {
         "errorCode":1,
         "message":"Propriedade 'Cvv' está ausente.",
         "field":"Cvv"
      }
   ]
}

Passo 4

Após gerar o token, esse token pode ser enviado para seu servidor e ser usado pra passar uma requisição no endpoint v2/charge/ecommerce. Abaixo um exemplo de requisição usando esse token temporário.

{
    "source":1,
    "merchantChargeId": 1,
    "customer":{
        "name":"João da Silva",
        "email":"example@email.com",
        "document":"65844359038",
        "documentType":1,
        "phone":{
            "countryCode":55,
            "type":5,
            "areaCode":"41",
            "number":"444444444"
        }
    },
    "transactions":[{
        "paymentType":2,
        "amount": 8055,
        "installmentNumber":1,
        "temporaryCardToken": "card_vS7aIEd72Ei3rb2EZlioSaAWj8o66maM"
    }]
}