Sugerir alterações
Ajude-nos a melhorar a documentação
Você viu informações equivocadas, gostaria que explicássemos algo a mais ou que melhorássemos nossos manuais? Deixe suas sugestões no GitHub.

Receba Pagamentos

Pré-requisitos
  • Esta guia presume que você já tenha seguido os passos da seção ‘introdução da documentação para instalação do SDK’.

Esta guia irá ajudá-lo a integrar o componente visual de pagamento do Mercado Pago em sua aplicação. Este componente gerencia a seleção do meio de pagamento, a coleta de dados do meio de pagamento do usuário e a comunicação do resultado do pagamento.

A integração consiste em duas etapas:

  • Integração em seu servidor: nesta etapa, você receberá a informação sobre o pagamento.
  • Integração em sua aplicação: nesta etapa, você irá configurar o componente visual.

scheme

  1. Crie a preferência de pagamento a partir de seu servidor nos servidores do MercadoPago.
  2. Inicie o Checkout em sua aplicação utilizando a ID da preferência.
  3. O Checkout efetuará o pagamento nos servidores do MercadoPago.
  4. Inscreva-se nas notificações para obter informações sobre seus novos pagamentos e atualizações de status.

Configure seu servidor

Para poder iniciar o fluxo de pagamento, é necessário obter as informações sobre o produto ou serviço a ser pago.

Esta entidade é a preferência de pagamento e contém:

  1. Descrição e preço.
  2. Informações do seu comprador (e-mail, nome, endereço, etc.).
  3. Meios de pagamentos aceitos.
  4. ID de referência do seu sistema.
<?php  
  require ('mercadopago.php');
  MercadoPago\SDK::configure(['ACCESS_TOKEN' => 'ENV_ACCESS_TOKEN']);
?>
import com.mercadopago.*;
MercadoPago.SDK.configure("ENV_ACCESS_TOKEN");
var mercadopago = require('mercadopago');
mercadopago.configure({
    access_token: 'ENV_ACCESS_TOKEN'
});
require 'mercadopago'
MercadoPago::SDK.configure(ACCESS_TOKEN: ENV_ACCESS_TOKEN)

Depois você deverá adicionar os atributos das suas preferências de pagamento:

<?php
  $preference = new MercadoPago\Preference();

  $item = new MercadoPago\Item();
  $item->title = "Fantastic Granite Keyboard";
  $item->quantity = 3;
  $item->currency_id = "ARS";
  $item->unit_price = 55.24;

  $payer = new MercadoPago\Payer();
  $payer->email = "test_user_19653727@testuser.com";

  $preference->items = array($item);
  $preference->payer = $payer;
  $preference->save();
?>
Preference preference = new Preference();

Item item = new Item();
item.setId("1234")
    .setTitle("Fantastic Granite Keyboard")
    .setQuantity(3)
    .setCategoryId("ARS")
    .setUnitPrice((float)55.24);

Payer payer = new Payer();
payer.setEmail("petra@live.com");

preference.setPayer(payer);
preference.appendItem(item);
preference.save();

var preference = {}

var item = {
  title: 'Fantastic Granite Keyboard',
  quantity: 3,
  currency_id: 'ARS',
  unit_price: 55.24
}

var payer = {
  email: "demo@mail.com"
}

preference.items = [item]
preference.payer = payer

mercadopago.preferences.create(preference).then(function (data) {
   // Do Stuff...
 }).catch(function (error) {
   // Do Stuff...
 });
preference = MercadoPago::Preference.new()

item = MercadoPago::Item.new()
item.title="Fantastic Granite Keyboard"
item.quantity= 3
item.currency_id = 'ARS'
item.unit_price = 55.24

payer = MercadoPago::Payer.new()
payer.email="petra@live.com"

preference.items = [item]
preference.payer = payer

preference.save

Conteúdo da preferência

Quanto mais informações você nos enviar, melhor será a aprovação dos pagamentos e a experiência de seus usuários.

Payer

É necessário o envio do e-mail de seu comprador.

Json

{
   ...,
  "payer": {
    "name": "Amélia",
    "surname": "Reis",
    "email": "petra@live.com",
    "date_created": "2015-06-02T12:58:41.425-04:00",
    "phone": {
      "area_code": "",
      "number": "506-121-3946"
    },
    "identification": {
      "type": "DNI",
      "number": "123456789"
    },
    "address": {
      "street_name": "Martins Rua",
      "street_number": 6950,
      "zip_code": "8080"
    }
  },
  ...
}

Integre o fluxo de pagamentos do Mercado Pago em sua aplicação

1. Conecte sua aplicação com seu servidor

No SDK, nós oferecemos uma classe chamada CustomServer para que a conexão com seu servidor seja mais fácil. O método createPreference faz um POST e envia como corpo da mensagem o mapa que tiver definido (preferenceMap). Indique sua URL base (https://your-base-url.com) e a URI (/your-create-preference-uri) onde espera os dados para criar a preferência.

O CustomServer irá transformar a resposta do seu serviço (que deve ter a mesma estrutura que a do MercadoPago) em um objeto CheckoutPreference, cuja ID é o ponto de entrada para o nosso checkout.

Crie a preferência em seu servidor a partir de sua aplicação com o seguinte código:

public void submit(View view) {
// Create a map with payment’s details.
Map<String, Object> preferenceMap = new HashMap<>();
preferenceMap.put("item_id", "1");
preferenceMap.put("amount", new BigDecimal(10));
preferenceMap.put("currency_id", "ARS");
preferenceMap.put("payer_email", "petra@live.com");

final Activity activity = this;
LayoutUtil.showProgressLayout(activity);
CustomServer.createCheckoutPreference(activity, "https://your-base-url.com", "/your-create-preference-uri", preferenceMap, new Callback<CheckoutPreference>() {
@Override
public void success(CheckoutPreference checkoutPreference) {
startMercadoPagoCheckout(checkoutPreference);
LayoutUtil.showRegularLayout(activity);
}

@Override
public void failure(ApiException apiException) {
// Ups, something went wrong
}
});
}
let preferenceBody : [String : Any] = ["item_id" : "id", "quantity" : 3]

CustomServer.createCheckoutPreference(url: "https://your-base-url.com/", uri: "your-create-preference-uri", bodyInfo: preferenceBody as NSDictionary, success: { (checkoutPrefernece) in
    startMercadoPagoCheckout(checkoutPreference)
}) { (error) in
    // Handle error
}
NSDictionary *preferenceBody = @{
                                 @"amount" : @10,
                                 @"itemId" : @29334,
                                 @"customerId" : @207,
                                 @"payerEmail" : @"petra@live.com" };


[CustomServer createCheckoutPreferenceWithUrl:@"https://your-base-url.com" uri:@"/your-create-preference-uri" bodyInfo:preferenceBody success:^(CheckoutPreference * checkoutPreference) {
    [self startMercadoPagoCheckoutWithCheckoutPreference: checkoutPreference];

} failure:^(NSError * error) {
    // Ups, something went wrong
}];

2. 2. Crie um botão de pagamento

Como exemplo, sugerimos que inicie o fluxo do Mercado Pago a partir de um botão.

  1. Crie uma Atividade para inserir o botão (MainActivity, por exemplo).
  2. Adicione um campo de texto para mostrar o resultado do pagamento.
  3. Cole o seguinte código de exemplo em res/layout/activity_main.xml.
<FrameLayout xmlns:android='http://schemas.android.com/apk/res/android'
xmlns:tools='http://schemas.android.com/tools'
android:layout_width='match_parent'
android:layout_height='match_parent'
android:paddingLeft='@dimen/activity_horizontal_margin'
android:paddingRight='@dimen/activity_horizontal_margin'
android:paddingTop='@dimen/activity_vertical_margin'
android:paddingBottom='@dimen/activity_vertical_margin'
android:orientation='vertical'
tools:context='.MainActivity'>
<include layout="@layout/mpsdk_view_progress_bar"/>
<LinearLayout
android:id="@+id/mpsdkRegularLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<Button
android:layout_width='match_parent'
android:layout_height='50dp'
android:layout_marginTop='25dp'
android:gravity='center'
android:text='Pagar $10'
android:onClick='submit'/>

<TextView
android:layout_width='match_parent'
android:layout_height='wrap_content'
android:id='@+id/mp_results'
android:paddingTop='50dp'/>
</LinearLayout>
</FrameLayout>
  1. Crie um ViewController para inserir o botão (MainViewController, por exemplo).
  2. Insira um botão no .xib correspondente.
  3. Adicione um campo de texto para mostrar o resultado do pagamento.
  4. Cole o seguinte código de exemplo em sua classe MainViewController.swift.
  5. No próximo passo, você trabalhará no evento associado ao clique do botão (startCheckout).
import UIKit
import MercadoPagoSDK

class MainViewController: UIViewController {
@IBOutlet weak var payButton: UIButton!
@IBOutlet weak var paymentResult: UITextField!

override func viewDidLoad() {
super.viewDidLoad()

self.payButton.addTarget(self,
action: #selector(MainViewController.startCheckout),
for: .touchUpInside)
}
}
  1. Crie um ViewController para inserir o botão (MainViewController, por exemplo).
  2. Insira um botão no .xib correspondente.
  3. Adicione um campo de texto (em nosso exemplo, nós o chamamos de paymentResult) para mostrar o resultado do pagamento.
  4. Cole o seguinte código de exemplo em sua classe MainViewController.c.
  5. No próximo passo, você trabalhará no evento associado ao clique do botão (startCheckout).
@import MercadoPagoSDK;

@interface MainExamplesViewController()
@property (weak, nonatomic) IBOutlet UIButton *button;
@property (weak, nonatomic) IBOutlet UILabel *label;

@end
@implementation MainExamplesViewController

- (void)viewDidLoad {
[super viewDidLoad];

[_button addTarget:self action:@selector(startCheckout:)
forControlEvents:UIControlEventTouchUpInside];
}
@end

3. Inicie o Checkout!

Após ter criado a preferência de pagamento e definido um evento a partir do qual deseja iniciar o fluxo de pagamento, você poderá iniciar o nosso Checkout com o seguinte código:

private void startMercadoPagoCheckout(CheckoutPreference checkoutPreference) {
  new MercadoPagoCheckout.Builder()
    .setActivity(activity)
    .setPublicKey("ENV_PUBLIC_KEY").setCheckoutPreference(checkoutPreference)
    .startForPayment();
}

O fluxo do nosso checkout está baseado em NavigationController. Caso sua aplicação também esteja baseada em NavigationControllers, você pode iniciar o fluxo do Checkout utilizando o NavigationController da sua aplicação, ou você pode criar um, iniciar o Checkout sobre ele e, em seguida, apresentá-lo.

public func startMercadoPagoCheckout(_ checkoutPreference CheckoutPreference) {

  let checkout = MercadoPagoCheckout(publicKey: "ENV_PUBLIC_KEY", accessToken: nil, checkoutPreference: checkoutPreference,
  navigationController: self.navigationController!)

  checkout.start()
}

O fluxo do nosso checkout está baseado em NavigationController. Caso sua aplicação também esteja baseada em NavigationControllers, você pode iniciar o fluxo do Checkout utilizando o NavigationController da sua aplicação, ou você pode criar um, iniciar o Checkout sobre ele e, em seguida, apresentá-lo.

-(void)startMercadoPagoCheckout:(CheckoutPreference *)checkoutPreference {
    MercadoPagoCheckout *checkout = [[MercadoPagoCheckout alloc] initWithPublicKey: "ENV_PUBLIC_KEY" checkoutPreference:checkoutPreference discount:nil navigationController:self.navigationController];
    [checkout start];
}

4. Obtenha a resposta

O SDK sempre retornará o resultado do pagamento.

Se houve qualquer erro que não pôde ser evitado ou o usuário abandonou o fluxo, ele retornará um objeto que representa o erro para que você possa entender o que aconteceu.

Estes são os atributos mais importantes de pagamento:

  • id: Identificação do pagamento.
  • status: Status do pagamento.
  • payment_method_id: Identificador do meio de pagamento selecionado pelo usuário.
  • payment_type_id: Tipo de meio de pagamento selecionado.
  • card: Objeto que identifica o cartão do usuário.
  • issuer_id: Identificação do banco do cartão selecionado pelo usuário.
  • installments: Número de parcelas selecionado.

Os possíveis estados de um pagamento são:

payment-status

Você poderá obter a resposta com o seguinte código:

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == MercadoPagoCheckout.CHECKOUT_REQUEST_CODE) {
            if (resultCode == MercadoPagoCheckout.PAYMENT_RESULT_CODE) {
                Payment payment = JsonUtil.getInstance().fromJson(data.getStringExtra("payment"), Payment.class);
                ((TextView) findViewById(R.id.mp_results)).setText("Resultado del pago: " + payment.getStatus());
                //Done!
            } else if (resultCode == RESULT_CANCELED) {
                if (data != null && data.getStringExtra("mercadoPagoError") != null) {
                    MercadoPagoError mercadoPagoError = JsonUtil.getInstance().fromJson(data.getStringExtra("mercadoPagoError"), MercadoPagoError.class);
                    ((TextView) findViewById(R.id.mp_results)).setText("Error: " +  mercadoPagoError.getMessage());
                    //Resolve error in checkout
                } else {
                    //Resolve canceled checkout
                }
            }
        }
    }
MercadoPagoCheckout.setPaymentCallback { (payment) in
self.payment = payment
}

checkout.setCallbackCancel {
   // Resolved cancel checkout
   self.navigationController?.popToRootViewController(animated: true)
}
[MercadoPagoCheckout setPaymentCallbackWithPaymentCallback:^(Payment * payment) {
self.payment = payment
}];

[self.checkout setCallbackCancelWithCallback:^{
    // Resolved cancel checkout
  [self.navigationController popToRootViewControllerAnimated:YES];
}];

Configuração de cor

É possível alterar as cores da interface gráfica do fluxo de pagamento, bem como escurecer a fonte utilizando a classe DecorationPreference. Você pode fazer isso utilizando o seguinte código:

private void startMercadoPagoCheckout(CheckoutPreference checkoutPreference) {
  DecorationPreference decorationPreference = new DecorationPreference.Builder()
    .setBaseColor(ContextCompat.getColor(context, R.color.your_color))
    .enableDarkFont() //Optional
    .build();

  new MercadoPagoCheckout.Builder()
    .setActivity(activity)
    .setDecorationPreference(decorationPreference)
    .setPublicKey("ENV_PUBLIC_KEY")
    .setCheckoutPreference(checkoutPreference)
    .startForPayment();
}
public func startMercadoPagoCheckout(_ checkoutPreference CheckoutPreference) {
    let decorationPreference: DecorationPreference = DecorationPreference()
    decorationPreference.setBaseColor(color: UIColor.purple)
    decorationPreference.enableDarkFont()
    MercadoPagoCheckout.setDecorationPreference(decorationPreference)

    let checkout = MercadoPagoCheckout(publicKey: "ENV_PUBLIC_KEY", accessToken: nil, checkoutPreference: checkoutPreference,
    navigationController: self.navigationController!)

    checkout.start()
}
DecorationPreference *decorationPreference = [[DecorationPreference alloc] initWithBaseColor:[UIColor fromHex:@"#CA254D"]];
[decorationPreference enableDarkFont];
[MercadoPagoCheckout setDecorationPreference:decorationPreference];

-(void)startMercadoPagoCheckout:(CheckoutPreference *)checkoutPreference {
    MercadoPagoCheckout *checkout = [[MercadoPagoCheckout alloc] initWithPublicKey: "ENV_PUBLIC_KEY" checkoutPreference:checkoutPreference discount:nil navigationController:self.navigationController];
    [checkout start];
}

O SDK permite configurar a cor no formato hexadecimal, ou seja, por exemplo: setBaseColor(#060d72).

Ative as notificações de pagamento

As notificações informam automaticamente sobre seus novos pagamentos e atualizações de status.

Isto permitirá que você gerencie seu estoque e mantenha seu sistema sincronizado.

Para mais informações, consulte a seção de Notificações.

Teste a integração

Você pode testar sua integração antes de partir para a produção, a fim de verificar o funcionamento e fazer os ajustes necessários.

Para isso, deve-se utilizar usuários e cartões de teste.

Para mais informações, consulte a seção de Testes.

Próximos passos

Sua pesquisa não retorna resultados.

Check the spelling of search terms or test with other keywords.