Esquema de apertura - Interfaz de usuario - Mercado Pago Developers
¿Qué documentación quieres buscar?

¿No sabes cómo empezar la integración? 

Accede a los primeros pasos

Esquema de apertura

El esquema de apertura le permite definir cómo se abrirá la caja para el usuario. Por defecto, Checkout Pro se abre en forma de redirect, es decir, con redirección de usuarios dentro de la misma página.

Sin embargo, es posible personalizar la apertura para que se abra en una página externa, por ejemplo, o definir el modelo modal, en el que Checkout Pro se abre en una ventana dentro del propio sitio, sin redirección.

Atención
Es sumamente importante prestar atención, al crear la preferencia, a la configuración de las back_urls porque serán las encargadas de guiar el flujo de regreso a su sitio web cuando se complete el pago. Para obtener más información, consulte la sección URL de retorno .

Esquema de redirección a otra página

El cambio del comportamiento de redirección se realiza mediante la propiedad redirectMode, que puede asumir los valores self o blank.

ValorDescripción
selfMantiene la redirección en la misma página.
blankExternaliza la redirección a una página nueva.

Los bloques de código a continuación implementan el pago en modo redirect a otra página.

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

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

        

Esquema de apertura directa

También es posible realizar la integración a través de llamadas de backend directamente a la API de preferencias. En este modelo, obtendrá el enlace de Checkout Pro en el atributo init_point en la respuesta a la solicitud de la API. A partir de ahí, solo utilícelo para redirigir al comprador al pago.

Para definir el modelo de redirección directa, inserte el código a continuación en su proyecto informando el init_point, campo que se devuelve al crear la preferencia generada anteriormente.

html

<!doctype html>
<html>
 <head>
   <title>Pagar</title>
 </head>
 <body>
   <a href="YOUR_INIT_POINT"> // Indique el init_point devuelto al crear la preferencia
     <button>
       Paga con MercadoPago
     </button>
   </a>
 </body>
</html>