Customizações - Checkout Pro - Mercado Pago Developers
Developers
Referência API
Suporte
Entrar

    Inicio

    Começando

    Pagamentos online

    Checkout Pro

    Checkout API

    Link de pagamento

    Marketplace

    Mobile Checkout

    Web Tokenize Checkout

    Pagamentos presenciais

    Código QR

    Plugins e plataformas

    WooCommerce

    Prestashop

    Magento 2

    Shopify

    Tiendanube

    VTEX

    SDKs

    Notificações

    Webhooks

    IPN

    Gerenciamento de conta

    Relatórios

    Obter pagamentos

    Melhora a aprovação

    Gestão de estornos

    Devoluções e cancelamentos

    Requisitos para ir à produção

    Recursos

    Localização

    Changelog

    Status

NESTA PÁGINA

Sugerir alterações
Ajude-nos a melhorar a documentação
Você viu informações equivocadas, gostaria que explicássemos algo a mais ou que melhorássemos nossos manuais? Deixe suas sugestões no GitHub.

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.

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.

  • php
  • node
  • java
  • ruby
  • csharp

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 cor 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

RECOMENDADO

Outras funcionalidades

Configure seus pagamentos e adapte o Checkout Pro ao seu negócio.

RECOMENDADO

Integração avançada

Otimize sua integração e melhore o gerenciamento de suas vendas.

Essas informações foram úteis?

© 2021 MercadoLibre S.R.L.

Termos e condiçõesComo cuidamos da sua privacidade
Partners Mercado Pago

Al navegar en este sitio aceptas las cookies que utilizamos para mejorar tu experiencia. Más información.