Interface de usuário - Customização do checkout - Mercado Pago Developers

Interface de usuário

Customize o Checkout Pro de acordo com o modelo do seu negócio para oferecer a melhor experiência de compra possível para os seus compradores.

Abertura do Checkout Pro

Você pode personalizar como abrir o Checkout Pro por meio de funções e atributos a serem adicionados à configuração da sua integração.

Abra o Checkout Pro sem botão de pagamento

Use o método open para abrir o Checkout a partir de qualquer elemento desejado do seu site, sem necessariamente mostrar o botão de pagamento para os seus compradores.

Por exemplo:

          
<!-- Inicializa o checkout -->
<script>
const checkout = mp.checkout({
  preference: {
      id: 'YOUR_PREFERENCE_ID'
  }
});
</script>
<!-- Chame a função ‘open' a partir do elemento de página desejado  -->
<!-- Por exemplo: um radio button -->
<input type="radio" id="checkout-open-radio" onclick="checkout.open()">

        

Abra o Checkout Pro com botão de pagamento

Use o método render para renderizar um botão de pagamento responsável por abrir o Checkout Pro no seu site com os seguintes parâmetros:

ParâmetroTipo de dadoDescrição
containerstringCSS Selector (identificador) do elemento HTML onde se deseja mostrar o botão de pagamento. Permite definir o tipo de botão desejado.
type (opcional)stringDefine o tipo de botão desejado. Atualmente, aceita apenas o valor wallet, que mostra um botão de pagamento com a marca do Mercado Pago.
label (opcional)stringTexto renderizado no botão. Valor padrão: Pagar.

Você pode usar o método render de duas maneiras diferentes:

  • Incluindo a opção render com seus respectivos parâmetros dentro das opções de inicialização do checkout.
  • Usando a função render posteriormente, do lugar que você preferir dentro de seu código, com seus respectivos parâmetros.

Por exemplo:

          
 // Dentro das opções de inicialização
const checkout = mp.checkout({
   preference: {
       id: 'YOUR_PREFERENCE_ID'
   },
   render: {
       container: '.cho-container',
       label: 'Pagar',
    }
});

// Invocando a função posteriormente
checkout.render({
    container: '.cho-container',
    label: 'Pagar'
});
  
        

Botão de pagamento padrão

Default Label Button

Botão de pagamento personalizado

Custom Label Button

Abra o Checkout Pro automaticamente

Adicione o parâmetro autoOpen nas opções de inicialização do Checkout para exibir automaticamente o Checkout Pro, sem precisar que seus compradores interajam com um botão ou qualquer outro elemento para abri-lo:

          
// Inicializa o checkout
const checkout = mp.checkout({
  preference: {
      id: 'YOUR_PREFERENCE_ID'
  },
  autoOpen: true, // Habilita a abertura automática do Checkout Pro
});

        

Esquema de abertura

O Checkout Pro permite que você altere o seu esquema de abertura padrão.

Atualmente, os esquemas disponíveis são:

  • Redirect: abre o Checkout Pro em uma nova janela.
  • Modal: abre o Checkout Pro em seu site.

Checkout-redirect

Para integrar o esquema de redirecionamento à sua integração, substitua o botão de pagamento configurado na implementação básica e adicione o link do Web Checkout ao seu site no local em que deseja exibi-lo, como mostra o exemplo abaixo:

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="<?php echo $preference->init_point; ?>">Pagar com Mercado Pago</a>
  </body>
</html>

        

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Meu site</title>
  </head>
  <body>
    <a href="$init_point$" target="_blank">Pagar</a>
  </body>
</html>

        

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="${preference.initPoint}">Pagar com Mercado Pago</a>
  </body>
</html>

        

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Meu site</title>
  </head>
  <body>
    <a href="<%= @init_point %>" target="_blank">Pagar</a>
  </body>
</html>

        

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="@Html.DisplayFor(model => model.InitPoint)">Pagar com Mercado Pago</a>
  </body>
</html>

        

O Checkout Pro será aberto no init_point definido pela preferência:

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="{{ init_point }}" target="_blank">Pagar com Mercado Pago</a>
  </body>
</html>

        

Estilo de cores

Adicione o atributo theme, de acordo com o exemplo abaixo, nas opções de inicialização do Checkout Pro para customizar a cor do cabeçalho e dos seus elementos:

          
<script>
  mp.checkout({
    preference: {...},
    render: {...},
    theme: {
        elementsColor: ''.
        headerColor: '',
    }
  });
</script>

        
Importante
A customização de cores e elementos é válida somente para o esquema de abertura modal.

Cabeçalho

Mude a cor do cabeçalho adicionando o atributo headerColor no objeto theme. Note que o valor do atributo deve estar no formato hexadecimal.

Por exemplo:

          
theme: {
  headerColor: '#c0392b'
}

        

Elementos

Os elementos do Checkout Pro que podem ser customizados são:

  • Botões;
  • Campos de dados;
  • Elementos de transição, como spinners e barras de progresso;
  • Bordas.

Você pode mudar a cor desses elementos adicionando o atributo elementsColor no objeto theme. Note que o valor do atributo deve estar no formato hexadecimal.

Por exemplo:

javascript

theme: {
  elementsColor: '#c0392b'
}

Custom-Component

Textos

A cor do texto dos botões e do cabeçalho do Checkout Pro será determinada automaticamente dependendo do contraste da cor definida para esses mesmos elementos.

Elementos de cor clara terão a cor de seu texto em preto ou #000. Por exemplo:

javascript

theme: {
    elementsColor: '#81ecec' // Cor clara
}

Light Color Button

Elementos de cor escura terão a cor de seu texto em branco ou #fff. Por exemplo:

javascript

theme: {
    elementsColor: '#8e44ad' // Cor escura
}

Dark Color Button