Tutorial para recibir pagos

Sigue este tutorial y podrás crear un botón para recibir pagos de tus usuarios.

Qué aprenderás a hacer:

  • Usar el SDK para crear una preferencia de pago.
  • Crear un botón usando los datos de la preferencia y personalizar los estilos.
  • Abrir el flujo de pagos (Checkout) a partir de este botón.

Antes de empezar:

Crea un típico link HTML, puedes hacerlo con tu herramienta de desarrollo web preferida o manualmente en HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Pagar</title>
    </head>
    <body>
        <a href="link_de_pago">Pagar</a>
    </body>
</html>

Paso 1: Agrega el SDK y configura tus credenciales

Para crear la preferencia necesitas comunicarte con nuestra API a través de nuestros SDK (en este ejemplo utilizaremos la versión en PHP).

  1. Descarga el SDK PHP e inclúyelo al inicio. También disponible en .NET, Ruby, Python, Node.js
  2. Obtén tus credenciales y reemplaza tu CLIENT_ID y CLIENT_SECRET.

<?php
require_once ('mercadopago.php');

/* Obtén tus credenciales en:
* Argentina: https://www.mercadopago.com/mla/herramientas/aplicaciones
* Brasil: https://www.mercadopago.com/mlb/ferramentas/aplicacoes
* México: https://www.mercadopago.com/mlm/herramientas/aplicaciones
* Venezuela: https://www.mercadopago.com/mlv/herramientas/aplicaciones
* Colombia: https://www.mercadopago.com/mco/herramientas/aplicaciones
*/
$mp = new MP('TU_CLIENT_ID', 'TU_CLIENT_SECRET');
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Pagar</title>
    </head>
    <body>
        <a href="link_de_pago">Pagar</a>
    </body>
</html>

Paso 2: Crea la preferencia de pago

Una vez que tengas el objeto $mp con tus credenciales, puedes utilizarlo para crear una preferencia de pago que el Checkout usará para solicitar el pago a tus usuarios.

Agrega el siguiente código debajo de tus credenciales:

<?php
require_once ('mercadopago.php');

$mp = new MP('TU_CLIENT_ID', 'TU_CLIENT_SECRET');

$preference_data = array(
    "items" => array(
       array(
           "title" => "Barrilete multicolor",
           "quantity" => 1,
           "currency_id" => "ARS",
           "unit_price" => 10.00
       )
    )
);

$preference = $mp->create_preference ($preference_data);
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Pagar</title>
    </head>
    <body>
        <a href="link_de_pago">Pagar</a>
    </body>
</html>

En este momento tu servidor está en condiciones de comunicarse con nuestra API para solicitar la creación de la preferencia, a través de nuestro SDK.

Paso 3: Usa la preferencia en el link de pago

Modifica el link de pago original, colocando en el atributo href la url de inicio del flujo de pagos (atributo init_point) que tiene la preferencia que creaste (objeto $preference):

<?php
require_once ('mercadopago.php');

$mp = new MP('TU_CLIENT_ID', 'TU_CLIENT_SECRET');

$preference_data = array(
    "items" => array(
       array(
           "title" => "Barrilete multicolor",
           "quantity" => 1,
           "currency_id" => "ARS",
           "unit_price" => 10.00
       )
    )
);

$preference = $mp->create_preference ($preference_data);
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Pagar</title>
    </head>
    <body>
        <a href="<?php echo $preference['response']['init_point']; ?>">Pagar</a>
    </body>
</html>

¡Ya estás en condiciones de empezar a recibir pagos!

Si quieres realizar pruebas, puedes utilizar nuestro Sandbox reemplazando solo el uso del atributo init_point por sandbox_init_point. (Ver Glosario de atributos)

¿Quieres avanzar un poco más?

Paso 4: Agrega estilos y comportamiento

Para que tu link tenga apariencia de botón, utiliza nuestro script render.js, que además te permitirá abrir el Checkout en una ventana modal dentro de tu propio sitio.

Agrega el script al final de la etiqueta body:

<?php
require_once ('mercadopago.php');

$mp = new MP('TU_CLIENT_ID', 'TU_CLIENT_SECRET');

$preference_data = array(
    "items" => array(
       array(
           "title" => "Barrilete multicolor",
           "quantity" => 1,
           "currency_id" => "ARS",
           "unit_price" => 10.00
       )
    )
);

$preference = $mp->create_preference ($preference_data);
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Pagar</title>
    </head>
    <body>
        <a href="<?php echo $preference['response']['init_point']; ?>">Pagar</a>
        <script type="text/javascript" src="https://www.mercadopago.com/org-img/jsapi/mptools/buttons/render.js"></script>
    </body>
</html>

Ahora, necesitamos indicarle a render.js cuál es el elemento que abrirá el Checkout, en este caso nuestro link. Para esto, agregamos al link el atributo name con el valor MP-Checkout, de la siguiente manera:

<a href="<?php echo $preference['response']['init_point']; ?>" name="MP-Checkout">Pagar</a>

También le agregaremos estilos, utilizando el atributo class:

<a href="<?php echo $preference['response']['init_point']; ?>" name="MP-Checkout" class="blue-rn-m">Pagar</a>

Ver las opciones de estilo.

Por defecto, el Checkout se abrirá ahora en una ventana modal en tu propio sitio, pero puedes cambiar ese comportamiento utilizando el atributo mp-mode en el link. Conoce las opciones posibles.

¡Listo! Ya tienes tu botón de pago completo.