Esquema de abertura - Interface de usuário - Mercado Pago Developers
Qual documentação você quer buscar?

Não sabe como começar a integrar? 

Acesse os primeiros passos

Esquema de abertura

O esquema de abertura permite definir como o checkout será aberto para o usuário. Por padrão, o Checkout Pro é aberto de forma redirect, ou seja, com redirecionamento do usuário dentro da mesma página.

Contudo, é possível personalizar a abertura para que a abertura seja em uma página externa.

Atenção
É de extrema importância que se atente, durante a criação da preferência, para a configuração das back_urls porque elas serão responsáveis por guiar o fluxo de retorno ao seu website quando o checkout for finalizado. Para mais informações, veja a seção de URLs de retorno .

Esquema de redirecionamento para outra página

Este esquema fará com que o checkout seja aberto em uma tela ou aba separada. A alteração no comportamento do redirecionamento é feita pela propriedade redirectMode, a qual pode assumir os valores self ou blank.

ValorDescrição
selfMantém o redirecionamento na mesma página.
blankExternaliza o redirecionamento para uma nova página.

Os blocos de código abaixo implementam o checkout em modo redirect para outra página.

          
mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
       redirectMode: "blank"
   },
});

        
          
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>', redirectMode: 'blank' }} />

        

Esquema de abertura direto

Também é possível realizar a integração através de chamadas via backend diretamente para a API de Preferências. Neste modelo, você obterá o link do Checkout Pro no atributo init_point, na resposta à requisição da API. A partir daí, basta utilizá-lo para redirecionar o comprador ao checkout.

Para definir o modelo de redirect direto, insira o código abaixo em seu projeto informando o init_point, campo o qual é retornado na criação da preferência gerada anteriormente.

html

<!doctype html>
<html>
 <head>
   <title>Pagar</title>
 </head>
 <body>
   <a href="YOUR_INIT_POINT"> // Indique o init_point retornado na criação da preferência
     <button>
       Pagar com Mercado Pago
     </button>
   </a>
 </body>
</html>