Suggest edit
Help us improve the documentation
Did you see wrong information and would you like us to explain something else or improve our manuals? Please leave your suggestions on GitHub.

Customization

Redirect Scheme

The Checkout Mercado Pago allows you to change your opening scheme.

The schemes currently available are:

  • Redirect: Opens the Checkout Mercado Pago in a new window.
  • Modal: Opens the Checkout Mercado Pago on your website.

Checkout-redirect

To integrate the redirect scheme, replace the payment button you made in the basic integration with the following snippet:

Redirect to the 'init_point' of the preference.

<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="<?php echo $preference->init_point; ?>">Pay with Mercado Pago</a>
  </body>
</html>

Redirect to the 'init_point' of the preference.

<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="$$init_point$$" target="_blank">Pay with Mercado Pago</a>
  </body>
</html>

Redirect to the 'init_point' of the preference.

<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="${preference.initPoint}">Pay with Mercado Pago</a>
  </body>
</html>

Redirect to the 'init_point' of the preference.

<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="<%= @init_point %>" target="_blank">Pay with Mercado Pago</a>
  </body>
</html>

Redirect to the 'init_point' of the preference.

<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="@Html.DisplayFor(model => model.InitPoint)">Pay with Mercado Pago</a>
  </body>
</html>

Colors

Note

Valid only for modal scheme.

Elements

The elements that can be customized are:

  • Buttons
  • Data Entry Fields
  • Transition Elements: spinners and progress bars
  • Borders

You can modify the color of those elements by adding the `data-elements-color attribute in the HTML code. The attribute value must be in hexadecimal format. For example:

Html

data-header-color="#c0392b"

Custom-Component


Texts

The color of the button text will be determined automatically depending on the contrast of the defined color. For a light element color, the text color will be black or #000. For example:

Html

data-elements-color="#81ecec" <!-- Light color -->

Light Color Button


For a dark element color, the text color will be white or #fff. For example:

Html

data-elements-color="#8e44ad" <!-- Dark color -->

Dark Color Button

Buttons

Text

By default, the button shows the text “Pay”. You can modify the text of the button by adding the data-button-label attribute in the HTML code. For example:

Html

data-button-label="Buy"

By default:

Default Label Button

Customized:

Custom Label Button


Next steps

La búsqueda no arrojó ningún resultado.

Verifica la la ortografía de los términos de búsqueda o prueba con otras palabras clave.