Antes de realizar la renderización del Wallet Brick, primero ejecute los pasos de inicialización compartidos entre todos los Bricks. A partir de esto, a continuación se presentan las informaciones necesarias para que configures y renderices el Wallet Brick.

Crea la configuración de inicio de Brick

          
const renderWalletBrick = async (bricksBuilder) => {
    await bricksBuilder.create('wallet', 'walletBrick_container', {
        initialization: {
            preferenceId: "<PREFERENCE_ID>",
        },
        customization: {
            texts: {
                valueProp: 'smart_option'
            },
            ...
        },
    });
};

renderWalletBrick(bricksBuilder);

        

          
const initialization = {
  preferenceId: '<PREFERENCE_ID>',
}

const customization = {
  texts: {
   valueProp: 'smart_option',
  },
}

const onSubmit = async (formData) => {
 // callback llamado al hacer clic en Wallet Brick
 // esto es posible porque Brick es un botón 
};

const onError = async (error) => {
 // callback llamado para todos los casos de error de Brick
 console.log(error);
};

const onReady = async () => {
 // Callback llamado cuando Brick esté listo.
 // Aquí puedes ocultar loadings en tu sitio, por ejemplo.  
};

        

Este flujo está pensado para tiendas que utilizan Wallet Brick al final del proceso de pago y ya tienen la preferencia creada al renderizar el Brick, enviándola en la inicialización. Si lo desea, puede utilizar el Brick creando la preferencia en el momento del envío (onSubmit). Consulte más información en la sección de Preferencia en el envío.

Una vez creadas las configuraciones, ingrese el código a continuación.

          
<div id="walletBrick_container"></div>

        

          
import { Wallet } from '@mercadopago/sdk-react';


<Wallet
   initialization={initialization}
   customization={customization}
   onSubmit={onSubmit}
   onReady={onReady}
   onError={onError}
/>

        

El resultado de renderizar el Brick debe ser como se muestra en la imagen a continuación, presentando un texto y un aspecto predeterminado.

Para utilizar un método de pago (paymentMethods) del tipo "mercadoPago", se debe enviar una preferencia durante la inicialización del Brick, reemplazando el valor PREFERENCE_ID por el ID de la preferencia creada.

Para 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, pero también es posible establecerlo en onboarding_credits. Entienda la diferencia entre los dos:

• wallet_purchase: el usuario debe iniciar sesión cuando es redirigido a su cuenta de Mercado Pago.

• onboarding_credits: luego de iniciar sesión, el usuario verá la opción de pago de crédito preseleccionada en su cuenta de Mercado Pago.

  • php
  • node
  • java
  • ruby
  • csharp
  • python
  • curl

  php node java ruby csharp python curl

          
  <?php
  $client = new PreferenceClient();
  $preference = $client->create([
    "items"=> array(
      array(
        "title" => "Mi producto",
        "quantity" => 1,
        "unit_price" => 25
      )
    )
  ]);
  ?>
  
        

  Copiar

          
  // 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
      }
    ]
  };
  
  mercadopago.preferences.create(preference)
    .then(function (response) {
      // Este valor es el ID de preferencia que se enviará al Brick al inicio
      const preferenceId = response.body.id;
    }).catch(function (error) {
      console.log(error);
    });
  
        

  Copiar

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

  Copiar

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

  Copiar

          
  // 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,
          },
      },
  };
  
  // Crea la preferencia usando el cliente
  var client = new PreferenceClient();
  Preference preference = await client.CreateAsync(request);
  
        

  Copiar

          
  # 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
          }
      ]
  }
  
  preference_response = sdk.preference().create(preference_data)
  preference = preference_response["response"]
  
        

  Copiar

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

  Copiar

Con la integración completada, podrás probar la recepción de pagos. Para obtener más información, accede a la sección Hacer compra de prueba.