Todos los medios de pago - Ejemplo de código - Mercado Pago Developers

Ejemplo de código (todos los medios de pago)

Para facilitar y optimizar su proceso de integración, ve a continuación un ejemplo completo de cómo incluir la Cuenta de Mercado Pago como medio de pago con Payment Brick.

Crea tu preferencia

Server-Side

Requerido para Cuenta de Mercado Pago.

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

  // 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 guest, puede omitir esta propiedad
  $preference->purpose = 'wallet_purchase';
  $preference->save();
?>

          
// SDK de Mercado Pago
const mercadopago = require ('mercadopago');
// Agregar credenciales
mercadopago.configure({
 access_token: 'PROD_ACCESS_TOKEN'
});
 
// Crear un objeto de preferencia
let preference = {
  // el "purpose": "wallet_purchase" solo permite pagos registrados
  // para permitir pagos de guest, 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);
  });

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

// 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);

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

# 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']

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

// 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);

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

# Crear 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
        }
    ]
}'

Configurar la integración

Client-Side

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.paymentBrickController.unmount().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bricks</title>
</head>
<body>
  <div id="paymentBrick_container"></div>
  <script src="https://sdk.mercadopago.com/js/v2"></script>
  <script>
    const mp = new MercadoPago('YOUR_PUBLIC_KEY');
    const bricksBuilder = mp.bricks();
    const renderPaymentBrick = async (bricksBuilder) => {
      const settings = {
        initialization: {
           /*
           "amount" es el monto a ser pago
           por todos los medios de pago a excepción de la Cuenta de Mercado Pago,
           que tiene su valor de procesamiento determinado en el backend a través de "preferenceId"
           */
          amount: 100, // cantidad de procesamiento a realizar
          preferenceId: '<PREFERENCE_ID>', // preferenceId generado en el backend
        },
        customization: {
          paymentMethods: {
            creditCard: 'all',
            debitCard: 'all',
            ticket: 'all',
          },
        },
        callbacks: {
          onReady: () => {
            /*
             Callback llamado cuando Brick está listo
             Aquí puedes ocultar loadings de su sitio, por ejemplo.
            */
          },
          onSubmit: ({ selectedPaymentMethod, formData }) => {
            //  callback llamado al hacer clic en el botón de envío de datos

            return new Promise((resolve, reject) => {
              let url = undefined;

              if (selectedPaymentMethod === 'credit_card' || selectedPaymentMethod === 'debit_card') {
                url = 'process_payment_card';
              } else if (selectedPaymentMethod === 'ticket') {
                url = 'process_payment_ticket';
              }

              if (url) {
                fetch(url, {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify(formData)
                })
                  .then((response) => {
                    // recibir el resultado del pago
                    resolve();
                  })
                  .catch((error) => {
                    // manejar la respuesta de error al intentar crear el pago
                    reject();
                  })
              } else if (selectedPaymentMethod === 'wallet_purchase') {
                // wallet_purchase (Cuenta de Mercado Pago) no necesita ser enviado desde el backend
                resolve();
              } else {
                reject();
              }
            });
          },
          onError: (error) => {
            // callback llamado para todos los casos de error de Brick
            console.error(error);
          },
        },
      };
      window.paymentBrickController = await bricksBuilder.create(
        'payment',
        'paymentBrick_container',
        settings
      );
    };
    renderPaymentBrick(bricksBuilder);
  </script>
</body>
</html>