Customization

Redirect Scheme

The Smart Checkout allows you to change your opening scheme.

The schemes currently available are:

  • Redirect: Opens the Smart Checkout in a new window.
  • Modal: Opens the Smart Checkout 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.