Receba um pagamento com cartão

Com o MercadoPago é possível capturar os dados do cartão de forma segura, ao mesmo tempo que mantém o controle sobre a experiência de compra oferecida aos seus usuários.

Capture os dados do cartão

A captura de dados do cartão é realizada a partir do navegador do seu comprador. Por questões de segurança, é muito importante que os dados nunca cheguem aos seus servidores.

O Mercado Pago conta com uma biblioteca Javascript para ajudá-lo a fazer isso de forma simples e segura.

1. Incluir MercadoPago.js

Para utilizar esta biblioteca, primeiramente insira o seguinte código em nosso checkout:

<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>

Nota

A biblioteca deve ser sempre importada a partir de https://secure.mlstatic.com.

2. Configure sua public key

Sua chave pública é sua identificação para poder capturar os dados do cartão de forma segura. O upload da chave pública deve ser feito após incluir MercadoPago.js e antes de efetuar uma solicitação.

Mercadopago.setPublishableKey("TEST-b3d5b663-664a-4e8f-b759-de5d7c12ef8f");

Nota

Esta é uma chave pública do ambiente de testes. Para capturar cartões reais, você deve substituí-la pela sua chave pública de produção.

3. Capturar dados do cartão

Formulário

O próximo passo é capturar os dados do cartão. Para isso, é importante possuir um formulário que utilize os seguintes atributos data-checkout:

<form action="" method="post" id="pay" name="pay" >
    <fieldset>
        <ul>
            <li>
                <label for="email">Email</label>
                <input id="email" name="email" value="test_user_19653727@testuser.com" type="email" placeholder="your email"/>
            </li>
            <li>
                <label for="cardNumber">Credit card number:</label>
                <input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="4509 9535 6623 3704" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
            </li>
            <li>
                <label for="securityCode">Security code:</label>
                <input type="text" id="securityCode" data-checkout="securityCode" placeholder="123" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
            </li>
            <li>
                <label for="cardExpirationMonth">Expiration month:</label>
                <input type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="12" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
            </li>
            <li>
                <label for="cardExpirationYear">Expiration year:</label>
                <input type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="2015" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
            </li>
            <li>
                <label for="cardholderName">Card holder name:</label>
                <input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="APRO" />
            </li>
            <li>
                <label for="docType">Document type:</label>
                <select id="docType" data-checkout="docType"></select>
            </li>
            <li>
                <label for="docNumber">Document number:</label>
                <input type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" />
            </li>
        </ul>
        <input type="hidden" name="paymentMethodId" />
        <input type="submit" value="Pay!" />
    </fieldset>
</form>

Importante

Os campos que possuem dados confidenciais não contam com o atributo name e, portanto, nunca chegarão aos seus servidores.

Obtenha o tipo de documento

Entre os campos obrigatórios estão o tipo e o número do documento.

É possível obter a lista de documentos disponíveis:

Mercadopago.getIdentificationTypes();

Obtenha o meio de pagamento do cartão

É importante obter o meio de pagamento do cartão para poder efetuar o pagamento.

Para obter o meio de pagamento, utilize o método MercadoPago.getPaymentMethod(jsonParam,callback). Este método admite dois parâmetros: um objeto e uma função de callback.


Mercadopago.getPaymentMethod({
    "bin": bin
}, setPaymentMethodInfo);

O bin corresponde aos 6 primeiros dígitos do cartão, que identificam o meio de pagamento e o banco emissor do cartão.

O callback recebe um status e uma resposta. A função deverá armazenar a id da resposta no campo paymentMethodId (input hidden), por exemplo:

function setPaymentMethodInfo(status, response) {
  if (status == 200) {
        const paymentMethodElement = document.querySelector('input[name=paymentMethodId]');

        if (paymentMethodElement) {
        paymentMethodElement.value = response[0].id;
        } else {
        const inputEl = document.createElement('input');
        inputEl.setattribute('name', 'paymentMethodId');
        inputEl.setAttribute('type', 'hidden');
        inputEl.setAttribute('value', response[0].id);     

        form.appendChild(inputEl);
        }
    } else {
        alert(`payment method info error: ${response}`);  
    }
};

Capture os dados

Antes de enviar o formulário, deve-se capturar o evento submit e utilizar o método Mercadopago.createToken(form, sdkRespondeHandler)`.

doSubmit = false;
addEvent(document.querySelector('#pay'), 'submit', doPay);
function doPay(event){
    event.preventDefault();
    if(!doSubmit){
        var $form = document.querySelector('#pay');

        Mercadopago.createToken($form, sdkResponseHandler); // The function "sdkResponseHandler" is defined below

        return false;
    }
};

Ao enviar o form, e utilizar os atributos data-checkout, a captura de todos os campos é realizada.

O método createToken retornará um card_token, que é a representação segura do cartão:

{
    "id": "ff8080814cbd77a8014cc",
    "public_key": "TEST-b3d5b663-664a-4e8f-b759-de5d7c12ef8f",
    "card_id": null,
    "luhn_validation": true,
    "status": "active",
    "date_used": null,
    "card_number_length": 16,
    "date_created": "2015-04-16T13:06:25.525-04:00",
    "first_six_digits": "450995",
    "last_four_digits": "3704",
    "security_code_length": 3,
    "expiration_month": 6,
    "expiration_year": 2017,
    "date_last_updated": "2015-04-16T13:06:25.525-04:00",
    "date_due": "2015-04-24T13:06:25.531-04:00",
    "live_mode": false,
    "cardholder": {
        "identification": {
            "number": "23456789",
            "type": "type"
        },
        "name": "name"
    }
}

O segundo campo do método createToken é o sdkResponseHandler, que é uma função de callback que será executada ao criar o card_token.

Nós a utilizaremos para criar um campo oculto (input hidden) e armazenaremos o valor de id para então enviar o formulário aos seus servidores.

function sdkResponseHandler(status, response) {
    if (status != 200 && status != 201) {
        alert("verify filled data");
    }else{
        var form = document.querySelector('#pay');
        var card = document.createElement('input');
        card.setAttribute('name', 'token');
        card.setAttribute('type', 'hidden');
        card.setAttribute('value', response.id);
        form.appendChild(card);
        doSubmit=true;
        form.submit();
    }
};

É possível fazer o download do exemplo completo aqui.

Receba um pagamento com cartão

Para efetuar um pagamento único, deve-se obter o id do card_token a partir dos parâmetros enviados no POST.

Os card_token são válidos por 7 dias e podem ser utilizados apenas uma vez.

Para efetuar o pagamento, basta realizar um API call:

O valor da propriedade status indicara o estado de um pagamento (approved, rejected or **in_process).

<?php  
    MercadoPago\SDK::setAccessToken("ENV_ACCESS_TOKEN");
    //...
    $payment = new MercadoPago\Payment();
    $payment->transaction_amount = 161;
    $payment->token = "ff8080814c11e237014c1ff593b57b4d";
    $payment->description = "Heavy Duty Rubber Pants";
    $payment->installments = 1;
    $payment->payment_method_id = "visa";
    $payment->payer = array(
    "email" => "norbert.zemlak@bol.com.br"
    );
    // Save and posting the payment
    $payment->save();
    //...
    // Print the payment status
    echo $payment->status;
    //...
?>

O valor de getStatus() indicara o estado de um pagamento (approved, rejected or **in_process).

MercadoPago.SDK.setAccessToken("ENV_ACCESS_TOKEN");
//...
Payment payment = new Payment();
payment.setTransactionAmount(161)
       .setToken("ff8080814c11e237014c1ff593b57b4d")
       .setDescription("Heavy Duty Rubber Pants")
       .setInstallments(1)
       .setPaymentMethodId("visa")
       .setPayer(new Payer()
         .setEmail("norbert.zemlak@bol.com.br"));
// Save and posting the payment
payment.save();
//...
// Print the payment status
System.out.println(payment.getStatus());
//...

O valor da propriedade status indicara o estado de um pagamento (approved, rejected or **in_process).

var mercadopago = require('mercadopago');
mercadopago.configurations.setAccessToken(config.access_token);

var payment_data = {
  transaction_amount: 161,
  token: 'ff8080814c11e237014c1ff593b57b4d'
  description: 'Heavy Duty Rubber Pants',
  installments: 1,
  payment_method_id: 'visa',
  payer: {
    email: 'norbert.zemlak@bol.com.br'
  }
};

// Save and posting the payment
mercadopago.payment.save(payment).then(function (data) {
  // ...    
  // Print the payment status
  Console.log(payment.status);
}).catch(function (error) {
  // ...
});

O valor da propriedade status indicara el estado de um pagamento (approved, rejected or **in_process).

require 'mercadopago'
MercadoPago::SDK.access_token = "ENV_ACCESS_TOKEN";

payment = MercadoPago::Payment.new()
payment.transaction_amount = 161
payment.token = 'ff8080814c11e237014c1ff593b57b4d'
payment.description = 'Heavy Duty Rubber Pants'
payment.installments = 1
payment.payment_method_id = "visa"
payment.payer = {
  email: "norbert.zemlak@bol.com.br"
}
# Save and posting the payment
payment.save()

O valor da propriedade status indicara el estado de um pagamento (approved, rejected or **in_process).

using MercadoPago;
using MercadoPago.DataStructures.Payment;
using MercadoPago.Resources;
// ...
MercadoPago.SDK.SetAccessToken("ENV_ACCESS_TOKEN");
//...
Payment payment = new Payment()
{
    TransactionAmount = float.Parse("161"),
    Token = "ff8080814c11e237014c1ff593b57b4d",
    Description = "Heavy Duty Rubber Pants",
    Installments = 1,
    PaymentMethodId = "visa",
    Payer = new Payer(){
        Email = "norbert.zemlak@bol.com.br"
    }
};
// Save and posting the payment
payment.Save();
//...
// Print the payment status
Console.log(payment.Status);
//...

Os campos obrigatórios para enviar são token, transaction_amount, payment_method_id e o payer.email.

Você pode consultar mais informações sobre manipulação de respostas.

Receba um pagamento em parcelas

Para utilizar as promoções que o Mercado Pago oferece, é importante enviar o campo issuer_id e installments ao criar um campo de pagamento.

O campo installments corresponde ao número de parcelas selecionado pelo comprador. O issuer_id corresponde ao banco emissor do cartão.

Para obter as parcelas disponíveis:


Mercadopago.getInstallments({
    "bin": bin,
    "amount": amount
}, setInstallmentInfo);

A resposta inclui o issuer_id que deve ser enviado e a mensagem recomendada para exibição em cada uma das parcelas disponíveis indicando o valor a ser pago:

[
  {
    "payment_method_id": "amex",
    "payment_type_id": "credit_card",
    "issuer": {
        "id": "310",
        ...,
        {
            "installments": 3,
            "installment_rate": 18.9,
            "discount_rate": 0,
            "labels": [
            ],
            "min_allowed_amount": 2,
            "max_allowed_amount": 250000,
            "recommended_message": "3 cuotas de $ 396,33 ($ 1.189,00)",
            "installment_amount": 396.33,
            "total_amount": 1189
        }
        ...,
    ]
  }
]

Para criar o pagamento, é importante enviar os dados indicados acima:

<?php  

    MercadoPago\SDK::setAccessToken("ENV_ACCESS_TOKEN");
    //...
    $payment = new MercadoPago\Payment();
    $payment->transaction_amount = 161;
    $payment->token = "ff8080814c11e237014c1ff593b57b4d";
    $payment->description = "Heavy Duty Rubber Pants";
    $payment->installments = 3;
    $payment->payment_method_id = "visa";
    $payment->issuer_id = 310;
    $payment->payer = array(
    "email" => "norbert.zemlak@bol.com.br"
    );
    // Save and posting the payment
    $payment->save();
    //...
?>

MercadoPago.SDK.configure("ENV_ACCESS_TOKEN");
// ...
Payment payment = new Payment();
payment.setTransactionAmount(161)
       .setToken("ff8080814c11e237014c1ff593b57b4d")
       .setDescription("Heavy Duty Rubber Pants")
       .setInstallments(3)
       .setIssuerId(310)
       .setPaymentMethodId("visa")
       .setPayer(new Payer()
         .setEmail("norbert.zemlak@bol.com.br"));
// Save and posting the payment
payment.save
// ...

var mercadopago = require('mercadopago');
mercadopago.configurations.setAccessToken(config.access_token);

var payment_data = {
  transaction_amount: 161,
  token: 'ff8080814c11e237014c1ff593b57b4d'
  description: 'Heavy Duty Rubber Pants',
  installments: 3,
  payment_method_id: 'amex',
  issuer_id: 310,
  payer: {
    email: 'norbert.zemlak@bol.com.br'
  }
};
// Save and posting the payment
mercadopago.payment.save(payment_data).then(function (payment) {
  // ...
}).catch(function (error) {
  // ...
});

require 'mercadopago'
# ...
MercadoPago::SDK.setAccessToken(ENV_ACCESS_TOKEN)
# ...
payment = MercadoPago::Payment.new()
payment.transaction_amount = 161
payment.token = 'ff8080814c11e237014c1ff593b57b4d'
payment.description = 'Heavy Duty Rubber Pants'
payment.installments = 3
payment.payment_method_id = 'amex'
payment.issuer_id = 310
payment.payer = {
  email: "norbert.zemlak@bol.com.br"
}
# Save and posting the payment
payment.save()

using MercadoPago;
using MercadoPago.DataStructures.Payment;
using MercadoPago.Resources;
//...
MercadoPago.SDK.SetAccessToken("ENV_ACCESS_TOKEN");
//...
Payment payment = new Payment()
{
    TransactionAmount = float.Parse("161"),
    Token = "ff8080814c11e237014c1ff593b57b4d",
    Description = "Heavy Duty Rubber Pants",
    Installments = 3,
    IssuerId = 310,
    PaymentMethodId = "visa",
    Payer = new Payer(){
        Email = "norbert.zemlak@bol.com.br"
    }
};
// Save and posting the payment
payment.Save();
//...

Aqui está um exemplo de pagamento integral

 {
    "transaction_amount": 100,
    "token": "ff8080814c11e237014c1ff593b57b4d",
    "description": "Title of what you are paying for",
    "installments": 12,
    "payment_method_id": "visa",
    "payer": {
        "email": "test_user_19653727@testuser.com"
    },
    "external_reference": "Reference_1234",
    "metadata": {
        "key1": "value1",
        "key2": "value2"
    },
    "statement_descriptor": "MY E-STORE",
    "notification_url": "https://www.your-site.com/webhooks",
    "additional_info": {
        "items": [
            {
                "id": "item-ID-1234",
                "title": "Title of what you are paying for",
                "picture_url": "https://www.mercadopago.com/org-img/MP3/home/logomp3.gif",
                "description": "Item description",
                "category_id": "art", // Available categories at https://api.mercadopago.com/item_categories
                "quantity": 1,
                "unit_price": 100
            }
        ],
        "payer": {
            "first_name": "user-name",
            "last_name": "user-surname",
            "registration_date": "2015-06-02T12:58:41.425-04:00",
            "phone": {
                "area_code": "11",
                "number": "4444-4444"
            },
            "address": {
                "street_name": "Street",
                "street_number": 123,
                "zip_code": "5700"
            } 
        },
        "shipments": {
            "receiver_address": {
                "zip_code": "5700",
                "state_name": "State",
                "city_name": "City",
                "street_name": "Street",
                "street_number": 123,
                "floor": 4,
                "apartment": "C"
            }
        }
    }
}

Manipulação de respostas

É muito importante comunicar corretamente os resultados recebidos ao criar um pagamento. Isso ajudará a melhorar a conversão em casos de rejeições, e evitará estornos em casos de transações aprovadas.

Recomendamos que leia o artigo sobre manipulação de respostas e utilize a comunicação sugerida em cada um dos casos.

Receba uma notificação de pagamento

É importante estar ciente sobre quaisquer atualizações do status do seu pagamento. Para isso, deve-se utilizar Webhooks.

Um Webhook é uma notificação enviada de um servidor para outro mediante uma requisição HTTP POST.

Todas as informações relacionadas a esse assunto podem ser encontradas no artigo sobre Webhooks.

Próximos passos

Receba pagamentos com cartões armazenados

Armazene os cartões de seus clientes com segurança e efetue pagamentos com uma experiência one-click-to-buy (ou compra com um clique).

Mais informações

Receba um pagamento com cartão

Capture os dados do cartão

1. Incluir MercadoPago.js

2. Configure sua public key

3. Capturar dados do cartão

Formulário

Obtenha o tipo de documento

Obtenha o meio de pagamento do cartão

Capture os dados

Receba um pagamento com cartão

Receba um pagamento em parcelas

Aqui está um exemplo de pagamento integral

Manipulação de respostas

Receba uma notificação de pagamento

Próximos passos

Receba pagamentos com cartões armazenados

La búsqueda no arrojó ningún resultado.

Verifica la la ortografía de los términos de búsqueda o prueba con otras palabras clave.