Preferencia en onSubmit - Configurar la integración - Mercado Pago Developers

Preferencia en onSubmit

Para configurar la integración de Wallet Brick para recibir pagos con la Cuenta de Mercado Pago debe seguir los pasos a continuación.

  1. Crear container
  2. Incluir y configurar la librería MercadoPago.js
  3. Instanciar Brick
  4. Renderizar Brick
  5. Crear preferencia y envíela en el callback de llamada onSubmit
Los pasos se realizan en el backend o frontend. Las etiquetas Client-Side y Server-Side ubicadas inmediatamente al lado del título lo ayudan a identificar qué paso se realiza en qué instancia.

Y, para ayudar, hemos preparado un ejemplo de código completo de la configuración de Wallet Brick con la Cuenta de Mercado Pago que puede usar como modelo.

Crear container

Client-Side

Deberás crear un container para definir dónde se colocará el Brick en la pantalla. La creación del container se realiza insertando un elemento (por ejemplo, un div) en el código HTML de la página en la que se renderizará el Brick (ver el código a continuación).

Atención
El valor que se muestra en la propiedad id a continuación es solo un ejemplo y puede ser alterado, pero siempre debe coincidir con el id indicado en la renderización.

html

  <div id="paymentBrick_container"></div>

Incluir y configurar la librería MercadoPago.js

Client-Side

Usa nuestra librería oficial para acceder a las funcionalidades de Mercado Pago desde tu frontend de forma segura.

Atención
Recuerda que todo el código JS se puede incluir en un < script > o también en archivos .js separados que importes en tu sitio.

Para esto deberás instalar la SDK agregando lo siguiente en tu código HTML:

html

<script src="https://sdk.mercadopago.com/js/v2"></script>

Luego, inicializa la SDK y configura tu clave pública mediante código JavaScript de la siguiente manera:

javascript

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Instanciar Brick

Client-Side

Con el container creado y la SDK JS instalada, el siguiente paso es instanciar el Brick builder, que permitirá generar el Brick. Para crear la instancia, inserta el código a continuación del paso anterior.

javascript

const bricksBuilder = mp.bricks();
Atención
Durante la instanciación del Brick, es posible que aparezcan diferentes errores. Para más detalles sobre cada uno de ellos, consulta la sección Posibles errores .

Renderizar Brick

Client-Side

Una vez instanciado el builder, nuestro Brick puede ser renderizado y tener todas sus configuraciones compiladas para que la estructura final sea generada.

NOTAAtenciónSi es necesario cerrar y volver a abrir el Brick (cuando un usuario vuelve al carrito para cambiar algún detalle de compra, por ejemplo) es necesario eliminar la instancia actual del Brick y crear una nueva cuando sea necesario mostrarlo otra vez. Para ello, utilice el método unmount disponible en el controller de Brick, en este caso: window.walletBrickController.unmount().

Para renderizar el Brick, inserta el código a continuación del paso anterior y completa los atributos de acuerdo con los comentarios destacados en este mismo código.

javascript

const renderWalletBrick = async (bricksBuilder) => {
  const settings = {
    callbacks: {
      onReady: () => {
        /*
        Callback llamado cuando el Brick está listo.
        Aquí puedes ocultar loading de su sitio, por ejemplo.
        */
      },
      onSubmit: () => {
       // callback called when clicking Wallet Brick
       // this is possible because the brick is a button
       // at this time of submit, you must create the preference (for more
       // info see step 5, create preference)
        const yourRequestBodyHere = {
          items: [
            {
              id: '202809963',
              title: 'Dummy title',
              description: 'Dummy description',
              quantity: 1,
              unit_price: 10,
            },
          ],
          purpose: 'wallet_purchase',
        };

        return new Promise((resolve, reject) => {
          fetch('/create_preference', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(yourRequestBodyHere),
          })
            .then((response) => {
              // resuelve la promise con el ID de preferencia
              resolve(response.preference_id);
            })
            .catch((error) => {
              // manejar la respuesta de error al intentar crear la preferencia
              reject();
            });
        });
      },
      onError: (error) => {
        // callback llamado para todos los casos de error de Brick
        console.error(error);
      },
    },
  };

  window.walletBrickController = await bricksBuilder.create(
    'wallet',
    'walletBrick_container',
    settings,
  );
};

renderWalletBrick(bricksBuilder);

El resultado de renderizar el Brick debe ser como la imagen de abajo:

wallet-brick-render

Crear preferencia y envíela en el callback de llamada onSubmit

Server-Side

El primer paso para darle al usuario la posibilidad de pagar con el Wallet de Mercado Pago es crear una preferencia en su backend. Agrega el SDK de Mercado Pago y las credenciales necesarias a tu proyecto para habilitar el uso de preferencias:

          
<?php
// SDK de Mercado Pago
require __DIR__ .  '/vendor/autoload.php';
// Agrega credenciales
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>

        
          
// SDK de Mercado Pago
const mercadopago = require("mercadopago");
// Agrega credenciales
mercadopago.configure({
  access_token: "PROD_ACCESS_TOKEN",
});

        
          
// SDK de Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Agrega credenciales
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");

        
          
# SDK de Mercado Pago
require 'mercadopago'
# Agrega credenciales
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')

        
          
// SDK de Mercado Pago
 using MercadoPago.Config;
 // Agrega credenciales
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";

        
          
# SDK de Mercado Pago
import mercadopago
# Agrega credenciales
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")

        

Luego establezca la preferencia de acuerdo a su producto o servicio.

Los ejemplos de código a continuación establecen el purpose de la preferencia en wallet_purchase, donde el usuario debe iniciar sesión cuando es redirigido a su cuenta de Mercado Pago.

          
<?php

// Crear un objeto de preferencia
$preference = new MercadoPago\Preference();

// Crear un elemento en la preferencia
$item = new MercadoPago\Item();
$item->title = 'Meu produto';
$item->quantity = 1;
$item->unit_price = 75.56;
$preference->items = array($item);

// el $preference->purpose = 'wallet_purchase'; solo permite pagos registrados
// para permitir pagos de guests, puede omitir esta propiedad
$preference->purpose = 'wallet_purchase';
$preference->save();
?>

        
          
// Crear un objeto de preferencia
let preference = {
  // el "purpose": "wallet_purchase" solo permite pagos registrados
  // para permitir pagos de guests puede omitir esta propiedad
  "purpose": "wallet_purchase",
  "items": [
    {
      "id": "item-ID-1234",
      "title": "Meu produto",
      "quantity": 1,
      "unit_price": 75.76
    }
  ]
};

mercadopago.preferences.create(preference)
  .then(function (response) {
    // Este valor es el ID de preferencia que se enviará al ladrillo al inicio
    const preferenceId = response.body.id;
  }).catch(function (error) {
    console.log(error);
  });

        
          
// Crear un objeto de preferencia
PreferenceClient client = new PreferenceClient();

// Crear un elemento en la preferencia
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
   PreferenceItemRequest.builder()
       .title("Meu produto")
       .quantity(1)
       .unitPrice(new BigDecimal("100"))
       .build();
items.add(item);

PreferenceRequest request = PreferenceRequest.builder()
  // el .purpose('wallet_purchase') solo permite pagos registrados
  // para permitir pagos de guest, puede omitir esta línea
  .purpose('wallet_purchase')
  .items(items).build();

client.create(request);

        
          
# Crear un objeto de preferencia
preference_data = {
  # el purpose: 'wallet_purchase', solo permite pagos registrados
  # para permitir pagos de guests, puede omitir esta propiedad
  purpose: 'wallet_purchase',
  items: [
    {
      title: 'Meu produto',
      unit_price: 75.56,
      quantity: 1
    }
  ]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]

# Este valor es el ID de preferencia que usará en el HTML en el inicio del Brick
@preference_id = preference['id']

        
          
// Crear el objeto de request de preferencia
var request = new PreferenceRequest
{
  // el Purpose = 'wallet_purchase', solo permite pagos registrados
  // para permitir pagos de invitados, puede omitir esta propiedad
    Purpose = 'wallet_purchase',
    Items = new List<PreferenceItemRequest>
    {
        new PreferenceItemRequest
        {
            Title = "Meu produto",
            Quantity = 1,
            CurrencyId = "BRL",
            UnitPrice = 75.56m,
        },
    },
};

// Crea la preferencia usando el cliente
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);

        
          
# Crea un elemento en la preferencia
preference_data = {
  # el "purpose": "wallet_purchase", solo permite pagos registrados
  # para permitir pagos de invitados, puede omitir esta propiedad
    "purpose": "wallet_purchase",
    "items": [
        {
            "title": "Mi elemento",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
}

preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]

        
          
curl -X POST \
'https://api.mercadopago.com/checkout/preferences' \
-H 'Content-Type: application/json' \
-H 'cache-control: no-cache' \
-H 'Authorization: Bearer **PROD_ACCESS_TOKEN**' \
-d '{
  "purpose": "wallet_purchase",
  "items": [
      {
          "title": "Mi producto",
          "quantity": 1,
          "unit_price": 75.76
      }
  ]
}'

        
Importante
Para más detalles sobre cómo configurarlo, acceda a la sección Preferencias.

Considera que cuando un usuario elige realizar un pago a través de la Billetera de Mercado Pago, será redirigido a la página de Mercado Pago para completar el pago. Por lo tanto, es necesario configurar back_urls si desea volver a su sitio al finalizar el pago. Para obtener más información, visite la sección Redirigir al comprador a su sitio web.