Web Tokenize Checkout - Customization
Button
Default state
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"
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;
}
Colors in the interface
Elements
Default state
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"
Header
Default state
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"
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 -->
For a dark element color, the text color will be white or # fff
. For example:
Html
data-elements-color="#8e44ad" <!-- Dark color -->
Purchase detail
Default state
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 textFreewill 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
.