Customizations - Checkout Pro - Mercado Pago Developers
Developers
API Reference
Support
Sign in

    Home

    Getting started

    Online Payments

    Checkout Pro

    Checkout API

    Payment Link

    Marketplace

    Mobile Checkout

    Web Tokenize Checkout

    In person payments

    QR Code

    Plugins and platforms

    WooCommerce

    Prestashop

    Magento 2

    Shopify

    Tiendanube

    VTEX

    SDKs

    Notifications

    Webhooks

    IPN

    Account Management

    Reports

    Get payments

    Improves approval

    Chargeback Management

    Cashback and Cancellations

    Requirements for production environment

    Resources

    Localization

    Changelog

    Status

IN THIS PAGE

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 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.

Checkout-redirect

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

  • php
  • node
  • java
  • ruby
  • csharp

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

RECOMMENDED

Other functionalities

Set up your payment and adapt Checkout Pro to your business.

RECOMMENDED

Advanced Integration

Optimize your integration and improve the management of your sales.

Was this information helpful?

© 2021 MercadoLibre S.R.L.

Terms and conditionsHow we take care of your privacy
Partners Mercado Pago

Al navegar en este sitio aceptas las cookies que utilizamos para mejorar tu experiencia. Más información.