Como adicionar um cartão e obter o seu Id/Token (não falo de cliente e cartão)?

[alexandredorea]

Sabemos que existe a opção de Cliente e Cartão (Costumer and Card), onde vínculamos respectivamente o cliente ao seu cartão usando as classes CustomerRequest.cs e CustomerCardCreateRequest.cs, como no exemplo abaixo:

MercadoPagoConfig.AccessToken = "ENV_ACCESS_TOKEN";

var customerRequest = new CustomerRequest
{
    Email = "test_payer_12345@testuser.com",
};
var customerClient = new CustomerClient();
Customer customer = await customerClient.CreateAsync(customerRequest);

var cardRequest = new CustomerCardCreateRequest
{
    Token = "9b2d63e00d66a8c721607214cedaecda"
};
CustomerCard card = await customerClient.CreateCardAsync(customer.Id, cardRequest);

Entretanto, não localizei no SDK e nem na documentação um passo anterior que é exatamente o de adicionar/criar cartões.
O que estou dizendo é que para que eu tenha o Token do cartão (Id) para poder passar na classe CustomerCardCreateRequest, primeiro tenho de criar o cartão, para que com o retorno da API do Mercado Pago eu tenha Id/Token, como no request e response de exemplo abaixo:

Request

curl -X POST \
      'https://api.mercadopago.com/v1/card_tokens' \
      -H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
      -H 'Content-Type: application/json' \ 
      -d '{
    "site_id": "MLB",
    "card_number": "5031433215406351",
    "expiration_year": "2025",
    "expiration_month": "12",
    "security_code": "123",
    "cardholder": {
        "identification": {
            "type": "CPF",
            "number": "12345678909"
        },
        "name": "APRO"
    },
    "device": {
        "fingerprint": {
            "os": "iOS",
            "system_version": "8.3",
            "ram": 18446744071562067968,
            "disk_space": 498876809216,
            "model": "MacBookPro9,2",
            "free_disk_space": 328918237184,
            "vendor_ids": [
                {
                    "name": "vendor_id",
                    "value": "C2508642-79CF-44E4-A205-284A4F4DE04C"
                },
                {
                    "name": "uuid",
                    "value": "AB28738B-8DC2-4EC2-B514-3ACF330482B6"
                }
            ],
            "vendor_specific_attributes": {
                "feature_flash": false,
                "can_make_phone_calls": false,
                "can_send_sms": false,
                "video_camera_available": true,
                "cpu_count": 4,
                "simulator": true,
                "device_languaje": "en",
                "device_idiom": "Phone",
                "platform": "x86_64",
                "device_name": "iPhone Simulator",
                "device_family": 4,
                "retina_display_capable": true,
                "feature_camera": false,
                "device_model": "iPhone Simulator",
                "feature_front_camera": false
            },
            "resolution": "375x667"
        }
    }
}'

Response

{
    "id": "b0f72df0484fc5a8615668f42ac555e2",
    "first_six_digits": "503143",
    "expiration_month": 12,
    "expiration_year": 2025,
    "last_four_digits": "6351",
    "cardholder": {
        "identification": {
            "number": "12345678909",
            "type": "CPF"
        },
        "name": "APRO"
    },
    "status": "active",
    "date_created": "2023-03-11T15:02:21.403-04:00",
    "date_last_updated": "2023-03-11T15:02:21.403-04:00",
    "date_due": "2023-03-19T15:02:21.403-04:00",
    "luhn_validation": true,
    "live_mode": true,
    "require_esc": false,
    "card_number_length": 16,
    "security_code_length": 3
}

Dado todo o contexto, como posso adicionar um cartão e obter o Id/token do mesmo?

[romerosilva-meli]

Olá @alexandredorea, tudo bem?

O passo de criar token do cartão é feito no frontend por meio do SDK JS por questões de PCI. Você pode utilizar o mp.fields.createCardToken como esse exemplo da documentação para criar o token.

Não sei se entendi muito bem o seu caso de uso. Você gostaria de criar o card token no backend para associar um novo cartão a um customer?

[alexandredorea]

Você gostaria de criar o card token no backend para associar um novo cartão a um customer?

Exatamente. Quanto a preocupação do PCI, somos PCI e podemos transacionar dados, neste caso - no presente momento - só iremos guardar o Token/Id e o FirstSixDigits.

[romerosilva-meli]

Entendi. Nesse caso, por favor entre em contato com a gente pelo suporte para analisarmos melhor o caso.

[Gustavo6401]

Existe uma forma de criar esse token do cartão numa aplicação Blazor Server, ou apenas no Front-End por meio de JavaScript?

[alexandre-dorea]

Existe uma forma de criar esse token do cartão numa aplicação Blazor Server, ou apenas no Front-End por meio de JavaScript?

Creio que o que está procurando é esta documentação aqui sobre tokenização de cartão, correto?

[Gustavo6401]

Sim, sim.... Porém, estou tendo alguns erros na hora de colocar a API para funcionar....

Quando eu adiciono tanto o código HTML quanto o código JavaScript ao meu código Blazor ao renderizar o meu componente surge o seguinte erro:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Além disso, na hora de clicar para submeter o formulário, no console da minha aplicação ele informa esse outro erro:

MercadoPago.Error.MercadoPagoApiException: Error response from API. | Status code: 400 | API message: Invalid payment_method_id

Eu joguei o código JavaScript num arquivo externo chamado GerarTokenCartao.razor.js e adicionei o código-fonte informado na documentação de forma sequencial:

Bom, é isso....

[alexandre-dorea]

Bem, creio que eu não possa te ajudar muito neste quesito porque seu código deva ser privado/empresarial. E eu trabalho em outra empresa que não é o Mercado Pago. rsrsrs

Mas, o que pode ter gerado o erro no navegador "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT", pode ser muitas coisas no navegador como alguma configuração, AdBlockers (ou outros add-ons), regras na sua rede/firewall corporativo, antivírus instalados, etc.

Já o segundo erro que falou está mais claro onde está o problema:

MercadoPago.Error.MercadoPagoApiException: Error response from API. | Status code: 400 | API message: Invalid payment_method_id

O Invalid payment_method_id está se referindo o Id da bandeira do cartão, p.ex., payment_method_id="visa" ou payment_method_id=amex ou payment_method_id=elo... talvez este item aqui esclareça um pouco mais do que estou falando na montagem do seu payload (apenas a ideia por que não conheço o seu sistema).

Como deve está em processo de homologação com a plataforma, creio que possa abrir um chamado com eles explicando a situação que relatou ou abrir uma nova issue especifica para estes assuntos caso não tenha nada sobre estes assuntos.