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.

Web Tokenize Checkout - Customization

Button

Default state

Mercado Pago payment button

Customization

Text

By default the button contains the text Pay. You can modify the text of the button by adding the data-button-label attribute to the fragment of HTML code. For example:

Html

data-button-label="Pay"

Payment button mercado pago - modified label

Style

To use your own style, include the following CSS code:

Css

button.mercadopago-button {
  /* Tus atributos CSS */
}

For example:

Css

button.mercadopago-button {
  background-color: #fff;
  color: #111;
  border: 1px solid #111;
  border-radius: 0;
}

Payment button Mercado Pago modified CSS

Colors in the interface

Elements

Default state

Standard status elements

Customization

The elements that can be customized are:

  • Buttons
  • Data entry fields: inputs
  • Elements of transitions: spinners and progress bars
  • Edges

You can modify the color of those elements by adding the attribute data-elements-color to the fragment of HTML code.

The value of the attribute must be in hexadecimal format. For example:

Html

data-elements-color="#c0392b"

Customization elements

Header

Default state

Standard status header Mercado Pago

Customization

You can modify the header color by adding the attribute data-header-color to the fragment of HTML code.

The value of the attribute must be in hexadecimal format. For example:

Html

data-header-color="#c0392b"

Header customization Mercado Pago

Text color

The color of the text of the buttons and header, will be automatically determined 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 -->

Font color in light element Mercado Pago

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

Html

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

Font color in dark element Mercado Pago

Purchase detail

Default state

Purchase detail standard status

Customization

The attributes that can be added and modified are the following.

Numerical amounts:

  • Products: data-summary-product
  • Discount: data-summary-discount
  • Shipping: data-summary-shipping
  • Surcharges: data-summary-charges
  • Taxes: data-summary-taxes
  • Outstanding balance: data-summary-arrears

Texts:

  • To modify the title Products: data-summary-product-label
  • To modify the title Discount: data-summary-discount-label

Products

Using the attribute data-summary-product-label, you can specify the text that appears as Products in the detail of the purchase. For example, you can add the detail of what is being paid:

Html

data-summary-product-label="4 products"

Using the attribute data-summary-product, you can specify the amount in the detail of the purchase. For example:

Html

data-summary-product="654"

Discount

Using the attribute data-summary-discount-label, you can specify the text that appears as Discount in the detail of the purchase. For example, you can add the discount percentage:

Html

data-summary-discount-label="10% off"

Using the data-summary-discount attribute, you can specify the discount amount in the detail of the purchase. For example:

Html

data-summary-discount="65.4"

Note

You will see the amount as a negative number.

Shipping

Using the data-summary-shipping attribute, you can specify the shipping amount in the purchase detail. For example:

Html

data-summary-shipping="10"

Note

In case the specified delivery is 0 (zero), the text Free will be automatically displayed.

Surcharges

Using the attribute data-summary-charges, you can specify the amount of surcharges in the detail of the purchase. For example:

Html

data-summary-charges="10"

It will appear in the detail of the purchase under the concept of Surcharges.

Taxes

Using the attribute data-summary-taxes, you can specify the amount of taxes in the detail of the purchase. For example:

Html

data-summary-taxes="10"

It will appear in the detail of the purchase under the concept of Taxes.

Outstanding balance

Using the data-summary-arrears attribute, you can specify the outstanding balance amount in the purchase detail. For example:

Html

data-summary-arrears="10"

It will appear in the detail of the purchase under the concept of Outstanding balance.

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.