Inicio
DocumentaĆ§Ć£o
Recursos
CertificaƧƵes
Comunidade
RenderizaĆ§Ć£o padrĆ£o - Payment - Mercado Pago Developers

Busca inteligente powered by OpenAIĀ 

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: {
       ticket: "all",
       creditCard: "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);

        
          
const initialization = {
 amount: 100,
 preferenceId: "<PREFERENCE_ID>",
};
const customization = {
 paymentMethods: {
   ticket: "all",
   creditCard: "all",
   debitCard: "all",
   mercadoPago: "all",
 },
};
const onSubmit = async (
 { 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();
     });
 });
};
const onError = async (error) => {
 // callback chamado para todos os casos de erro do Brick
 console.log(error);
};
const onReady = async () => {
 /*
   Callback chamado quando o Brick estiver pronto.
   Aqui vocĆŖ pode ocultar loadings do seu site, por exemplo.
 */
};

        
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>

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

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

        

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

payment-brick-layout-all

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');
?>

        
          
// 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, onde o usuĆ”rio deverĆ” fazer login quando for redirecionado para 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();
?> 

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

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

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

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

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

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

        
Importante
Para saber mais detalhes de como configurĆ”-la, acesse a seĆ§Ć£o PreferĆŖncias.

Considere que quando um usuĆ”rio opta por fazer o pagamento utilizando a Conta Mercado Pago, este serĆ” redirecionado para a pĆ”gina do Mercado Pago para concluir o pagamento. Por isso, Ć© necessĆ”rio configurar as back_urls se vocĆŖ quiser retornar ao seu site ao final do pagamento. Para mais informaƧƵes, visite a seĆ§Ć£o Redirecione o comprador para o seu site.