Web Tokenize Checkout - Customization

Button

Default state

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 - 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 - Modified CSS

Colors in the interface

Elements

Default state

Standard 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"

Custom elements

Header

Default state

Standard header

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"

Custom header

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

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

Purchase detail

Default state

Summary Default

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.