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.
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
.
Valor | Descrição |
self | Mantém o redirecionamento na mesma página. |
blank | Externaliza 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>