Integraciones con Mercado Pago

Con Mercado Pago, puedes cobrar a través de una página web, una app o por redes sociales.

Desarrollar un Checkout que cumpla con los estándares de calidad del equipo de integraciones de Mercado Pago.

Objetivo de Tutorial.

Requisitos previos para el desarrollo de la de la integración:

  • Apache Server, puede ser el XAMPP para ambiente Windows.
  • Lenguaje de Programación es PHP > 7.1.
  • Composer, para descargar el API de Mercado Pago.
  • PostMan, para probar el API de Mercado Pago.

Lo que vamos a hacer

  1. Vamos a instalar la Tienda que contiene los productos precargados.
  2. Crear un webhook para recibir las notificaciones de mercado Pago.
  3. Guardar el json de la respuesta de la notificación.
  4. Mostrar el preference_id del Pago Creado.

Instalación.

1.- Entrar a github descargar la tiendita:

https://github.com/agustinfrancesconi/mp-ecommerce-php

Ustedes pueden optar por seguir las instrucciones del README, o descargarlo como en este caso para trabajarlo de forma local.

Es necesario suprimir el archivo composer.json, para que no ocasione conflictos mas adelante con el API de Mercado Pago.

2.- Descargar el Api de Mercado Pago.

Verificamos que esté instalado correctamente Composer.

Navegamos con el comando cd en la ruta donde tenemos la tiendita y tecleamos el siguiente comando

composer require "mercadopago/dx-php"

Podemos percatarnos de que se creó un archivo llamado composer.json, pero ahora contiene información necesaria del Api de Mercado Pago.

Al finalizar, podemos observar que el contenido lo descargó en la carpeta vendor, es la forma de trabar en composer.

Creamos una carpeta llamada: notificaciones.

En producción, será necesario ponerle permisos de escritura.

Creamos un nuevo archivo llamado: webhook.php

1- El primer paso será, incluir la librería de Mercado Pago, mediante el autoload generado por composer.
2.- Configurar el Access Token proporcionado por Mercado pago.

<?php
require 'vendor/autoload.php';
$AccessToken	= 'APP_USR-1159009372558727-072921-8d0b9980c7494985a5abd19fbe921a3d-617633181';
MercadoPago\SDK::setAccessToken($AccessToken);

Después leer el body que envía Mercado Pago y decodificarlo con PHP.

$body = @file_get_contents('php://input');
$data = json_decode($body);

Aprovechamos para almacenar el json en la carpeta notificaciones que creamos.

file_put_contents('notificaciones/'.$data->id.".json", $body);

Podemos crear un switch como sugiere la documentación de Mercado Pago.
Aprovechamos para enviar el http response del tipo 201.

switch($data->type) {
case "payment":
$payment = MercadoPago\Payment::find_by_id($data->data->id);
http_response_code(201);
// var_dump($payment);
break;
case "test":
echo "ok";
break;
case "plan":
$plan = MercadoPago\Plan::find_by_id($_POST["id"]);
break;
case "subscription":
$plan = MercadoPago\Subscription::find_by_id($_POST["id"]);
break;
case "invoice":
$plan = MercadoPago\Invoice::find_by_id($_POST["id"]);
break;
}

El código completo del webhook.php quedaría así:

<?php
require 'vendor/autoload.php';
$AccessToken = 'APP_USR-1159009372558727-072921-8d0b9980c7494985a5abd19fbe921a3d-617633181';
MercadoPago\SDK::setAccessToken($AccessToken);
$body = @file_get_contents('php://input');
$data = json_decode($body);
file_put_contents('notificaciones/'.$data->id.".json", $body);
switch($data->type) {
case "payment":
$payment = MercadoPago\Payment::find_by_id($data->data->id);
http_response_code(201);
// var_dump($payment);
break;
case "test":
echo "ok";
break;
case "plan":
$plan = MercadoPago\Plan::find_by_id($_POST["id"]);
break;
case "subscription":
$plan = MercadoPago\Subscription::find_by_id($_POST["id"]);
break;
case "invoice":
$plan = MercadoPago\Invoice::find_by_id($_POST["id"]);
break;
}

Abrimos PostMan para configurar la prueba de notificaciones.
Es necesario indicarle que recibirá un body, de tipo POST, en formato JSON. Así como se muestra en la imagen.

Pegamos el json de prueba que sugiere la documentación de Mercado Pago.

{
    "id": 12345,
    "live_mode": true,
    "type": "payment",
    "date_created": "2015-03-25T10:04:58.396-04:00",
    "application_id": 123123123,
    "user_id": 44444,
    "version": 1,
    "api_version": "v1",
    "action": "payment.created",
    "data": {
        "id": "999999999"
    }
}

Y al enviarlo, nos damos cuenta que la respuesta fue satisfactoria, del tipo 201 como lo indicamos en PHP.

Al abrir la carpeta de notificaciones, encontraremos el json que enviamos por el body en el URL.

Estamos listos para publicar el webhook en algún hosting, en el cual tengamos acceso.

Abre el archivo detail.php y agrega el siguiente código al inicio:

<?php
require 'vendor/autoload.php';
$AccessToken = 'APP_USR-1159009372558727-072921-8d0b9980c7494985a5abd19fbe921a3d-617633181';
MercadoPago\SDK::initialize();
MercadoPago\SDK::setAccessToken($AccessToken);
MercadoPago\SDK::setPlatformId("PLATFORM_ID");

MercadoPago\SDK::setIntegratorId("dev_24c65fb163bf11ea96500242ac130004"); MercadoPago\SDK::setCorporationId("CORPORATION_ID"); $config = MercadoPago\SDK::config();

Lo que hicimos fue inicializar el SDK de Mercado Pago, configurar el Access Token y lo mas importante, establecer el IntegratorId.

Nos ubicamos en donde sale el botón de Pagar:

Para ir anexando el siguiente código:

<?php 
$preference = new MercadoPago\Preference();
# Building an Payer
$payer = new MercadoPago\Payer();
$payer->name 		= "Lalo";
$payer->surname 	= "Landa";
$payer->email 		= test_user_58295862@testuser.com";
$payer->phone = array(
"area_code" => "52",
"number" => "5549737300"
);
$payer->identification = array(
"type" => "DNI",
"number" => "123456789"
);

$payer->address = array(
"street_name" => "Insurgentes Sur",
"street_number" => 1602,
"zip_code" => "03940"
);

$preference->payer = $payer;

Se crea una preferencia de Pago y después un nuevo pagador, colocamos los datos que solicita Mercado Pago para el ejercicio.

A continuación configuramos los datos de envío que nos solicitan.

# Building an shipments
$shipments = new MercadoPago\Shipments();
$shipments->receiver_address = array(
"zip_code" => "03940",
"street_number" => 1602,
"street_name" => "Insurgentes Sur",
"floor" => 16,
"apartment" => "C");

$preference->shipments = $shipments;

Construimos el Item con las especificaciones solicitadas.

# Building an Item
$item = new MercadoPago\Item();
$item->id 			= "1234";
$item->title 			= $_POST['title'];
$item->description 		= "Dispositivo móvil de Tienda e-commerce";
$item->quantity 		= $_POST['unit'];
$item->unit_price 		= $_POST['price'];
$item->picture_url		= $_SERVER['HTTP_REFERER'].$_POST['img'];

$preference->items = array($item);

Especificamos las URL’s de retorno.

# Building an back_urls
$preference->back_urls = array(
"success" => "http://tiendita.cubo.esy.es/respuesta.php?id=success",
"failure" => "http://tiendita.cubo.esy.es/respuesta.php?id=failure",
"pending" => "http://tiendita.cubo.esy.es/respuesta.php?id=pending");
$preference->auto_return = "approved";

Deshabilitamos los medios de pago solicitados

$preference->payment_methods = array(									"excluded_payment_methods" => array(
array("id" => "amex")
),
"excluded_payment_types" => array(
array("id" => "atm")
),
"installments" => 6
);

Configuramos la referencia externa. Y la liga de nuestro archivo de notificaciones.

$preference->external_reference = "correo@gmail.com";
$preference->notification_url="http://tiendita.cubo.esy.es/webhook.php";
$preference->save();

Reemplazamos el botón pagar por el siguiente código.

echo "<a href='$preference->init_point'>
<button type='button' class='mercadopago-button' formmethod='post'>Pagar la compra</button>
</a>";

Agregamos el archivo de security.js

Código completo del archivo: detail.php

Respuesta después del Pago.

Creamos un nuevo archivo llamado: respuesta.php

Y agregamos el siguiente código:

<?php
require 'vendor/autoload.php';
MercadoPago\SDK::setAccessToken("APP_USR-1159009372558727-072921-8d0b9980c7494985a5abd19fbe921a3d-617633181");
$data=$_GET;
switch($data['id']){
	case "failure":
		echo "<h2>El pago fue rechazado</h2>";
		break;
	case "pending":
		echo "<h2>El pago está siendo procesado</h2>";
		break;
	case "success":
		echo "<h2>Aprobado";
		echo "</p>		".$data['id'];
		echo "</p>preference_id:".$data['preference_id'];
		echo "</p>external_reference:".$data['external_reference']."</h2>";
		break;
}

Subir fuente al Servidor.

Para el ejercicio utilizaré hostinger, ustedes suban en el hosting con el que tengan más experiencia.

Podemos probar el webhook de producción, para revisar que todo esté en orden:

Configuración del Webhook en Mercado Pago

Entramos a la siguiente liga para habilitar la lectura de nuestro webhook:

https://www.mercadopago.com.mx/ipn-notifications

Insertamos el url del webhook de producción de nuestro sitio, en mi caso es: http://tiendita.cubo.esy.es/webhook.php

Después entramos a esta liga para probar nuestro webhook desde el API de MP.

https://www.mercadopago.com/mlm/account/webhooks

O podemos entrar desde el menú del usuario.

Escribimos en el modo sandbox el url y le damos en guardar.

Le damos en probar y podemos percatarnos de que Mercado Pago no tuvo problemas para comunicarse con nuestro webhook.

Prueba final.

En un navegador incógnito abrir la tiendita y dar en comprar.

Ahora en pagar en la compra.

Ingresamos con el usuario: test_user_58295862@testuser.com
Y contraseña: qatest9980

Realizamos la compra con alguna de las tarjetas:

TarjetaNúmeroCVVFecha de vencimiento
Mastercard5031 7557 3453 060412311/25
Visa4170 0688 1010 802012311/25

Realizamos el pago correspondiente.

image.png

Nos muestra que el pago fue correcto.

image.png

El Sitio redirecciona de forma automática, así fue especificado y solicitado.

Después de pagar, a los 5 segundos llega el json y se guarda en nuestra carpeta de notificaciones.

Este sería el JSON que necesitamos enviar a MP como evidencia para nuestra certificación.

image.png

Y ese sería el ID, con el que MP busca los detalles de un Pago.

Si te sirvió, puedes apoyarme dando click en los anuncios de Google Ads.

O enviando una aportación en los links de mercado Pago. Gracias.

Donar $25 pesos

Donar $50

Estaré atento de sus comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *