Recibir pagos

Pre-requisitos

Esta guía asume que ya has seguido los pasos de la sección introducción de la documentación para la instalación del SDK.

Esta guía te ayudará a integrar el componente visual de pago de Mercado Pago en tu aplicación. Este componente maneja la selección del medio de pago, la recolección de datos del medio de pago del usuario y la comunicación del resultado de pago.

La integración consta de dos etapas:

Integración en tu servidor: en esta etapa obtendrás la información del pago.
Integración en tu aplicación: en esta etapa configurarás el componente visual.

Esquema de creación de pagos en plataformas móviles Mercado Pago

Crea la preferencia de pago desde tu servidor en los servidores de Mercado Pago.
Inicia el Checkout en tu aplicación, utilizando el id de la preferencia.
El Checkout realizará el pago en los servidores de Mercado Pago.
Suscríbete a las notificaciones para enterarte de tus nuevos pagos y las actualizaciones de sus estados.

Configura tu servidor

Para poder iniciar el flujo de pago, necesitas obtener la información sobre el producto o servicio a pagar.

Esta entidad es la preferencia de pago y contiene:

Descripción y monto.
Información de tu comprador (Email, nombre, dirección, etc).
Medios de pago que aceptas.
ID de referencia de tu 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)

          
using MercadoPago;
MercadoPago.SDK.SetAccessToken = "ENV_ACCESS_TOKEN";

Luego, deberás agregar los atributos de tu preferencia de pago:

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

  $item = new MercadoPago\Item();
  $item->title = "Blue shirt";
  $item->quantity = 10;
  $item->currency_id = "BRL";
  $item->unit_price = 10;

  $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("Blue shirt")
    .setQuantity(10)
    .setCategoryId("BRL")
    .setUnitPrice((float) 10);

Payer payer = new Payer();
payer.setEmail("john@yourdomain.com");

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

          
var preference = {}

var item = {
  title: 'Blue shirt',
  quantity: 10,
  currency_id: 'BRL',
  unit_price: 10
}

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="Blue shirt"
item.quantity= 10
item.currency_id = 'BRL'
item.unit_price = 10

payer = MercadoPago::Payer.new()
payer.email="john@yourdomain.com"

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

preference.save

          
Preference preference = new Preference();

 preference.Items.Add(
  new Item()
  {
    Id = "1234",
    Title = "Blue shirt",
    Quantity = 10,
    CurrencyId = "BRL",
    UnitPrice = (float)10
  }
  preference.Payer = new Payer()
  {
    Email = "john@yourdomain.com"
  };

  preference.Save();

Contenido de la preferencia

Mientras más información nos envíes, mejor será la aprobación de los pagos y la experiencia de tus usuarios.

Payer

Es requerido el envío del email de tu comprador.

{
   ...,
  "payer": {
    "name": "Maria",
    "surname": "Silva",
    "email": "john@yourdomain.com",
    "date_created": "2015-06-02T12:58:41.425-04:00",
    "phone": {
      "area_code": "11",
      "number": "987654321"
    },
    
    "identification": {
      "type": "DNI",
      "number": "123456789"
    },
    
    "address": {
      "street_name": "Av. das Nações Unidas",
      "street_number": 7304,
      "zip_code": "52"
    }
  },
  ...
}

Integra el flujo de pago de Mercado Pago en tu aplicación

1. Crea un botón de pago

A modo de ejemplo proponemos que inicies el flujo de Mercado Pago desde un botón.

Crea un Activity para insertar el botón (MainActivity, por ejemplo). 2. Agrega un campo de texto para mostrar el resultado del pago. 3. Pega el siguiente código de ejemplo en 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='startMercadoPagoCheckout'/>

    <TextView
      android:layout_width='match_parent'
      android:layout_height='wrap_content'
      android:id='@+id/mp_results'
      android:paddingTop='50dp'/>
  </LinearLayout>
</FrameLayout>

Crea un ViewController para insertar el botón (MainViewController, por ejemplo). 2. Inserta un botón en el .xib correspondiente. 3. Agrega un campo de texto para mostrar el resultado del pago. 4. Pega el siguiente código de ejemplo en tu clase MainViewController.swift. 5. En el siguiente paso estarás trabajando sobre el evento asociado al click botón (startMercadoPagoCheckout).

          

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.startMercadoPagoCheckout),
    for: .touchUpInside)
  }
}

2. ¡Inicia el Checkout!

Una vez creada la preferencia de pago y definido un evento a partir del cual comenzar el flujo de pago, estás en condiciones de iniciar nuestro Checkout con el siguiente código:

Para iniciar el checkout debes usar el método startPayment pasando como parámetros el contexto de Android y un RequestCode que es el número con el que identificarás la respuesta del checkout en el método onActivityResult.

          

private static final int REQUEST_CODE = 1;

private void startMercadoPagoCheckout(final String checkoutPreferenceId) {
  new MercadoPagoCheckout.Builder("ENV_PUBLIC_KEY", checkoutPreferenceId).build()
                    .startPayment(MainActivity.this, REQUEST_CODE);
}

          
@IBAction func startMercadoPagoCheckout(_ sender: Any) {
    MercadoPagoCheckout.init(builder: MercadoPagoCheckoutBuilder.init(publicKey: "ENV_PUBLIC_KEY", preferenceId: checkoutPreferenceId))
    .start(navigationController: self.navigationController!)
}

3. Obtén la respuesta

El SDK devolverá siempre un resultado del pago.

Si hubo algún error insalvable o el usuario abandonó el flujo, devolverá un objeto que representa el error para que puedas entender qué pasó.

Estos son los atributos más importantes del pago:

id: Identificador del pago.
status: Estados del pago.
payment_method_id: Identificador del medio de pago que eligió tu usuario.
payment_type_id: Tipo de medio elegido.
card: Objeto que identifica la tarjeta de tu usuario.
issuer_id: Identificador del banco de la tarjeta que eligió tu usuario.
installments: Cantidad de cuotas elegidas.

Los posibles estados de un pago son:

payment-status

Podrás obtener la respuesta con el siguiente código:

Utiliza el RequestCode que enviaste en startPayment para obtener el resultado del checkout en onActivityResult.

          
@Override
protected void onActivityResult(final int requestCode, final int resultCode, final Intent data) {
    if (requestCode == REQUEST_CODE) {
        if (resultCode == MercadoPagoCheckout.PAYMENT_RESULT_CODE) {
            final Payment payment = (Payment) data.getSerializableExtra(MercadoPagoCheckout.EXTRA_PAYMENT_RESULT);
            ((TextView) findViewById(R.id.mp_results)).setText("Resultado del pago: " + payment.getStatus());
            //Done!
        } else if (resultCode == RESULT_CANCELED) {
            if (data != null && data.getExtras() != null
                && data.getExtras().containsKey(MercadoPagoCheckout.EXTRA_ERROR)) {
                final MercadoPagoError mercadoPagoError =
                    (MercadoPagoError) data.getSerializableExtra(MercadoPagoCheckout.EXTRA_ERROR);
                ((TextView) findViewById(R.id.mp_results)).setText("Error: " +  mercadoPagoError.getMessage());
                //Resolve error in checkout
            } else {
                //Resolve canceled checkout
            }
        }
    }
}

Para obtener una respuesta de pago se deberá implementar el protocolo PXLifeCycleProtocol y pasarlo como argumento al momento de inicializar el checkout. Los métodos que se deben implementar del protocolo son finishCheckout y cancelCheckout como se muestra en el siguiente ejemplo. Al implementar este protocolo el integrador es responsable de finalizar el flujo de checkout, en este ejemplo de implementación al finalizar se ejecuta un popToRootViewController.

          
@IBAction func startMercadoPagoCheckout(_ sender: Any) {
    MercadoPagoCheckout.init(builder: MercadoPagoCheckoutBuilder.init(publicKey: "ENV_PUBLIC_KEY", preferenceId: checkoutPreferenceId))
    .start(navigationController: self.navigationController!, lifeCycleProtocol: self)
}

func finishCheckout() -> ((_ payment: PXResult?) -> Void)? {
    return  ({ (_ payment: PXResult?) in
        print(payment)
        self.navigationController?.popToRootViewController(animated: false)
    })
}

func cancelCheckout() -> (() -> Void)? {
    return {
        self.navigationController?.popToRootViewController(animated: true)
    }
}

Activa las notificaciones de pagos

Las notificaciones son la forma automática de enterarte de tus nuevos pagos y las actualizaciones de sus estados. Esto te permitirá administrar tu stock y mantener tu sistema sincronizado.

Visita la sección Notificaciones para conocer más sobre esto.

Previene pagos rechazados

Un pago puede ser rechazado porque el emisor del medio de pago detecta un problema o porque no se cumple con los requisitos de seguridad necesarios.

Evita pagos rechazados con nuestras recomendaciones y mejora la aprobación de tus pagos.

Prueba la integración

Prueba tu integración antes de salir a producción, a fin de verificar el funcionamiento y realizar los ajustes que necesites.

Para ello debes usar usuario y tarjetas de prueba, visita la sección Probando para más información.

Próximos pasos

Visita la sección Personalización para adecuar el flujo de pago a tus necesidades.

Ayúdanos a mejorar la documentación