Mercado Pago
DEVELOPERS
Entrar
Recursos para IA

Renderização padrão

Antes de realizar a renderização do Payment Brick, primeiro execute os passos de inicialização compartilhados entre todos os Bricks. A partir disso, veja abaixo as informações necessárias para você configurar e renderizar o Payment Brick.

Nota
Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a documentação técnica.

Configurar o Brick

Crie a configuração de inicialização do Brick.

const renderPaymentBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     /*
      "amount" é o valor total a ser pago por todos os meios de pagamento
    com exceção da Conta Mercado Pago e Parcelamento sem cartão de crédito, que tem seu valor de processamento determinado no backend através do "preferenceId"
     */
     amount: 100,
     preferenceId: "<PREFERENCE_ID>",
   },
   customization: {
     paymentMethods: {
       atm: "all",
       ticket: "all",
       creditCard: "all",
       prepaidCard: "all",
       debitCard: "all",
       mercadoPago: "all",
     },
   },
   callbacks: {
     onReady: () => {
       /*
        Callback chamado quando o Brick estiver pronto.
        Aqui você pode ocultar loadings do seu site, por exemplo.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback chamado ao clicar no botão de submissão dos dados
       return new Promise((resolve, reject) => {
         fetch("/process_payment", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify(formData),
         })
           .then((response) => response.json())
           .then((response) => {
             // receber o resultado do pagamento
             resolve();
           })
           .catch((error) => {
             // lidar com a resposta de erro ao tentar criar o pagamento
             reject();
           });
       });
     },
     onError: (error) => {
       // callback chamado para todos os casos de erro do Brick
       console.error(error);
     },
   },
 };
 window.paymentBrickController = await bricksBuilder.create(
   "payment",
   "paymentBrick_container",
   settings
 );
};
renderPaymentBrick(bricksBuilder);
Atenção
Sempre que o usuário sair da tela onde algum Brick é exibido, é necessário destruir a instância atual com o comando window.paymentBrickController.unmount(). Ao entrar novamente, uma nova instância deve ser gerada.

Para utilizar o método de pagamento (paymentMethods) do tipo "mercadoPago" é preciso enviar uma preferência durante a inicialização do Brick, substituindo o valor <PREFERENCE_ID> pelo ID da preferência criada. As instruções para criação da preferência estão na seção Habilitar pagamento com Mercado Pago.

Renderizar o Brick

Uma vez criadas as configurações, insira o código abaixo para renderizar o Brick.

Importante
O id paymentBrick_container da div html abaixo, deve corresponder ao valor enviado dentro do método create() da etapa anterior.
<div id="paymentBrick_container"></div>

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

payment-Brick-layout-mlm

Habilitar pagamento com Mercado Pago

Para utilizar o método de pagamento (paymentMethods) do tipo "mercadoPago" é preciso enviar uma preferência durante a inicialização do Brick, substituindo o valor <PREFERENCE_ID> pelo ID da preferência criada.

Para criar uma preferência em seu backend, 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');
?>

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
// 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->create();
?>
Quando um usuário opta por realizar um pagamento pela Carteira do Mercado Pago, é redirecionado para a página do Mercado Pago para concluir o pagamento. As back_urls permitem que seja devolvido ao site após a conclusão do pagamento. Não utilize domínios locais para este valor (como 'localhost/' ou '127.0.0.1' com ou sem porta especificada). Recomendamos usar um servidor com um domínio nomeado (DNS) ou IPs de desenvolvimento para poder retornar ao site após o pagamento.

Para saber mais detalhes de como configurá-la, acesse a seção Preferências.

AnteriorIntroduçãoSaiba mais informações sobre o Payment Brick e suas principais características.
PróximoIntroduçãoApós configurar a integração do Payment Brick, veja como enviar o pagamento ao Mercado Pago.