Web Tokenize Checkout - Personalização

Botão

Status padrão

Mercado Pago payment button

Personalização

Texto

Por padrão o botão contém o texto Pagar. Você pode modificar o texto do botão adicionando o atributo "data-button-label" ao fragmento de código javascript. Por exemplo:

Html

data-button-label="Comprar"

Payment button mercado pago - modified label

Estilo

Para utilizar seu próprio estilo inclua o seguinte código CSS:

Css

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

Por exemplo:

Css

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

Payment button Mercado Pago modified CSS

Cores na interface

Elementos

Status padrão

Standard status elements

Personalização

Os elementos que podem ser personalizados incluem:

  • Botões
  • Campos de ingresso de dados: inputs
  • Elementos de transições: spinners
  • Bordas

É possível modificar a cor adicionando o atributo data-elements-color ao fragmento de código HTML.

O valor do atributo deverá ser em formato hexadecimal. Por exemplo:

Html

data-elements-color="#c0392b"

Customization elements

Cabeçalho

Status padrão

Standard status header Mercado Pago

Personalização

É possível modificar a cor do cabeçalho adicionando o atributo data-header-color ao fragmento de código HTML.

O valor do atributo deverá ser em formato hexadecimal. Por exemplo:

Html

data-header-color="#c0392b"

Header customization Mercado Pago

Color de texto

El color del texto de los botones y encabezado, será determinado automáticamente dependiendo del contraste del color definido.

Para un color de elemento claro, el color del texto será negro o #000. Por ejemplo:

Html

data-elements-color="#81ecec" <!-- Color claro -->

Font color in light element Mercado Pago

Para un color de elementos oscuro, el color del texto será blanco o #fff. Por ejemplo:

Html

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

Font color in dark element Mercado Pago

Detalhe da compra

Status padrão

Purchase detail standard status

Personalização

Os atributos que podem ser adicionados e modificados são os seguintes.

Montantes numéricos:

  • Produtos: data-summary-product
  • Desconto: data-summary-discount
  • Envio: data-summary-shipping
  • Recarga: data-summary-charges
  • Impostos: data-summary-taxes
  • Saldo pendente: data-summary-arrears

Textos:

  • Para modificar o título Produtos: data-summary-product-label
  • Para modificar o título Desconto: data-summary-discount-label

Produtos

Usando o atributo data-summary-product-label, você pode especificar o texto que aparece como Produtos no detalhe da compra. Por exemplo, você pode adicionar o detalhe do que se está pagando:

Html

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

Mediante o atributo data-summary-product, você pode especificar o montante no detalhe da compra. Por exemplo:

Html

data-summary-product="654"

Desconto

Usando o atributo data-summary-discount-label, você pode especificar o texto que aparece como Desconto no detalhe da compra. Por exemplo, você pode adicionar a porcentagem do desconto:

Html

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

Mediante o atributo data-summary-discount, você pode especificar o montante de desconto no detalhe da compra. Por exemplo:

Html

data-summary-discount="65.4"

Nota

Verá o montante como um número negativo.

Envio

Usando o atributo data-summary-shipping, você pode especificar o montante do envio no detalhe da compra. Por exemplo:

Html

data-summary-shipping="10"

Nota

No caso em que o envio especificado seja 0 (zero), mostrará automaticamente o texto Grátis.

Recarga

Usando o atributo data-summary-charges, você pode especificar o montante da recarga no detalhe da compra. Por exemplo:

Html

data-summary-charges="10"

Aparecerá no detalhe da compra abaixo o conceito de Recarga.

Impostos

Usando o atributo data-summary-taxes, você pode especificar o montante de impostos no detalhe da compra. Por exemplo:

Html

data-summary-taxes="10"

Aparecerá no detalhe da compra abaixo o conceito de Impostos.

Saldo pendente

Usando o atributo data-summary-arrears, você pode especificar o montante de saldo pendente no detalhe da compra. Por exemplo:

Html

data-summary-arrears="10"

Aparecerá no detalhe da compra abaixo o conceito de Saldo pendente.

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.