Customization
Redirect Scheme
The Checkout Pro allows you to change your opening scheme.
The schemes currently available are:
- Redirect: Opens the Checkout Pro in a new window.
- Modal: Opens the Checkout Pro on your website.
To integrate the redirect scheme, replace the payment button you made in the basic integration with the following snippet:
<!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
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"
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 -->
For a dark element color, the text color will be white or #fff. For example:
html
data-elements-color="#8e44ad" <!-- Dark color -->
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:
Customized:
Redirect to the 'init_point' of the preference.