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. . 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:

``javascript
{
"brand":"Visa"
}
`

Objeto de erro na response:
`javascript
{
"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:

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

Objeto de retorno de sucesso:

`javascript
{
"temporaryToken":"card_t/AIChh82EgN440hTW8vQqHcPC82EwBW"
}
`

Objeto de retorno de erro:
`javascript
{
"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.

`javascript
{
"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"
}]
}
``