Customizações
Esquema redirect
O Checkout Pro permite alterar seu esquema de abertura.
Os esquemas disponíveis atualmente são:
- Redirect: abre o Checkout Pro em uma nova janela.
- Modal: abre o Checkout Pro no seu site.
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.
<!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>
Redireciona ao 'init_point' da preferência
<!doctype html>
<html>
<head>
<title>Pay</title>
</head>
<body>
<a href="{{ init_point }}" target="_blank">Pay with Mercado Pago</a>
</body>
</html>
Cores
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"
Textos
A cor do texto dos botões será determinado automaticamente dependendo do contraste da cor definida. Para uma cor de elemento claro, a cor do texto será preta ou #000. Por exemplo:
html
data-elements-color="#81ecec" <!-- Cor clara -->
Para uma cor de elemento escuro, a cor do texto será branca ou #fff. Por exemplo:
html
data-elements-color="#8e44ad" <!-- Cor escura -->
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:
Customizado:
Redireciona ao 'init_point' da preferência