Customizações

Nesta página

Esquema redirect

Cores

Botões

Esquema redirect

O Smart Checkout permite alterar seu esquema de abertura.

Os esquemas disponíveis atualmente são:

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

Checkout-redirect

Para integrar o esquema de redirecionamento, substitua o botão de pagamento que você fez na integração básica por este novo e adicione o link do Web Checkout ao seu site no local em que deseja que ele apareça.

Redireciona ao 'init_point' da 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>

Redireciona ao 'init_point' da preferência

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

Redireciona ao 'init_point' da preferência

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

Redireciona ao 'init_point' da preferência

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

Redireciona ao 'init_point' da 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>

Cores

Nota

válido somente para o esquema modal.

Elementos

Os elementos que podem ser customizados são:

  • Botões
  • Campos para inserir dados
  • Elementos de transição: spinners e barras de progresso
  • Bordas

Você pode mudar a cor desses elementos adicionando o atributo data-elements-color no código HTML. O valor do atributo deve estar em formato hexadecimal. Por exemplo:

Html

data-header-color="#c0392b"

Custom-Component


Textos

A cor do texto dos botões será determinado automaticamente dependendo do contraste da cor definida. Para uma cor de elemento claro, a color do texto será preta ou #000. Por exemplo:

Html

data-elements-color="#81ecec" <!-- Cor clara -->

Light Color Button


Para uma cor de elemento escuro, a cor do texto será branca ou #fff. Por exemplo:

Html

data-elements-color="#8e44ad" <!-- Cor escura -->

Dark Color Button

Botões

Texto

Por padrão, o botão mostra o texto “Pagar”. Você pode alterar o texto do botão adicionando o atributo data-button-label no código HTML. Por exemplo:

Html

data-button-label="Comprar"

Por padrão:

Default Label Button

Customizado:

Custom Label Button


Próximos passos

La búsqueda no arrojó ningún resultado.

Verifica la la ortografía de los términos de búsqueda o prueba con otras palabras clave.