Preferência no onSubmit

Para configurar a integração do Wallet Brick para receber pagamentos com a Conta Mercado Pago você precisa seguir os passos abaixo.

1. Criar container
2. Incluir e configurar a biblioteca MercadoPago.js
3. Instanciar Brick
4. Renderizar Brick
5. Criar preferência e enviá-la no callback onSubmit

Você vai precisar criar um container para definir o local que o Brick será inserido na tela. A criação do container é feita inserindo um elemento (por exemplo, uma div) no código HTML da página no qual o Brick será renderizado (veja código abaixo).

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

Utilize a nossa biblioteca oficial para acessar as funcionalidades do Mercado Pago com segurança desde seu frontend.

Você precisará instalar o SDK adicionando o seguinte em seu código HTML:

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

Em seguida, inicialize o SDK definindo sua chave pública usando código JavaScript:

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Com o container criado e o SDK JS instalado, o próximo passo é instanciar o Brick builder, que permitirá gerar o Brick. Para instanciar o Brick, insira o código abaixo após a etapa anterior.

const bricksBuilder = mp.bricks();

Uma vez instanciado, o Brick pode ser renderizado e ter todas as suas configurações compiladas de modo que a estrutura final do Brick seja gerada.

Para renderizar o Brick, insira o código abaixo após o passo anterior e preencha os atributos conforme os comentários destacados neste mesmo código.

const renderWalletBrick = async (bricksBuilder) => {
  const settings = {
    callbacks: {
      onReady: () => {
        /*
            Callback chamado quando o Brick estiver pronto.
            Aqui você pode ocultar loadings do seu site, por exemplo.
          */
      },
      onSubmit: () => {
        // callback chamado ao clicar no Wallet Brick
        // isso é possível porque o brick é um botão
        // neste momento de submit, você deve criar a preferência (para mais
        // informações veja o passo 5, criar preferência)
        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) => {
              // resolver a promise com o ID da preferência
              resolve(response.preference_id);
            })
            .catch((error) => {
              // lidar com a resposta de erro ao tentar criar a preferência
              reject();
            });
        });
      },
      onError: (error) => {
        // callback chamado para todos os casos de erro do Brick
        console.error(error);
      },
    },
  };

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

renderWalletBrick(bricksBuilder);

O resultado de renderizar o Brick deve ser como na imagem abaixo:

Quando o usuário clicar no Wallet Brick para seguir com o pagamento, será criada uma preferência em seu backend que retornará ao Brick dentro do callback onSubmit. Adicione o SDK do Mercado Pago e as credenciais necessárias ao seu projeto para habilitar o uso de preferências:

          
<?php
// SDK do Mercado Pago
require __DIR__ .  '/vendor/autoload.php';
// Adicione as credenciais
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>

        

          
// SDK do Mercado Pago
const mercadopago = require ('mercadopago');
// Adicione as credenciais
mercadopago.configure({
  access_token: 'PROD_ACCESS_TOKEN'
});

        

          
// SDK do Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Adicione as credenciais
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");

        

          
# SDK do Mercado Pago
require 'mercadopago'
# Adicione as credenciais
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')

        

          
// SDK do Mercado Pago
using MercadoPago.Config;
 // Adicione as credenciais
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";

        

          
# SDK do Mercado Pago
import mercadopago
# Adicione as credenciais
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")

        

Em seguida, configure a preferência de acordo com o seu produto ou serviço.

Os exemplos de código abaixo configuram o purpose da preferência como wallet_purchase, mas também é possível configurá-lo como onboarding_credits. Entenda a diferença entre os dois:

• wallet_purchase: o usuário deverá fazer login quando for redirecionado para sua conta do Mercado Pago.

• onboarding_credits: após fazer login, o usuário verá a opção de pagamento com crédito pré-selecionada em sua conta do Mercado Pago.

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

  php node java ruby csharp python curl

          
  <?php
  // Cria um objeto de preferência
  $preference = new MercadoPago\Preference();
   
  // Cria um item na preferência
  $item = new MercadoPago\Item();
  $item->title = 'Meu produto';
  $item->quantity = 1;
  $item->unit_price = 75.56;
  $preference->items = array($item);
   
  // o $preference->purpose = 'wallet_purchase'; permite apenas pagamentos logados
  // para permitir pagamentos como guest, você pode omitir essa propriedade
  $preference->purpose = 'wallet_purchase';
  $preference->save();
  ?>
  
        

  Copiar

          
  // Cria um objeto de preferência
  let preference = {
    // o "purpose": "wallet_purchase" permite apenas pagamentos logados
    // para permitir pagamentos como guest, você pode omitir essa propriedade
    "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 é o preferenceId que será enviado para o Brick na inicialização
      const preferenceId = response.body.id;
    }).catch(function (error) {
      console.log(error);
    });
  
        

  Copiar

          
  // Cria um objeto de preferência
  PreferenceClient client = new PreferenceClient();
   
  // Cria um item na preferência
  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()
    // o .purpose('wallet_purchase') permite apenas pagamentos logados
    // para permitir pagamentos como guest, você pode omitir essa linha
    .purpose('wallet_purchase')
    .items(items).build();
   
  client.create(request);
  
        

  Copiar

          
  # Cria um objeto de preferência
  preference_data = {
    # o purpose: 'wallet_purchase', permite apenas pagamentos logados
    # para permitir pagamentos como guest, você pode omitir essa propriedade
    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 é o preferenceId que você usará no HTML na inicialização no Brick
  @preference_id = preference['id']
  
        

  Copiar

          
  // Cria o objeto de request da preferência
  var request = new PreferenceRequest
  {
    // o Purpose = 'wallet_purchase', permite apenas pagamentos logados
    // para permitir pagamentos como guest, você pode omitir essa propriedade
      Purpose = "wallet_purchase",
      Items = new List<PreferenceItemRequest>
      {
          new PreferenceItemRequest
          {
              Title = "Meu produto",
              Quantity = 1,
              CurrencyId = "BRL",
              UnitPrice = 75.56,
          },
      },
  };
   
  // Cria a preferência usando o client
  var client = new PreferenceClient();
  Preference preference = await client.CreateAsync(request);
  
        

  Copiar

          
  # Cria um item na preferência
  preference_data = {
    # o "purpose": "wallet_purchase", permite apenas pagamentos logados
    # para permitir pagamentos como guest, você pode omitir essa propriedade
      "purpose": "wallet_purchase",
      "items": [
          {
              "title": "Meu Item",
              "quantity": 1,
              "unit_price": 75.76
          }
      ]
  }
   
  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": "Meu produto",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
  }'
  
        

  Copiar