Skip to content

Commit

Permalink
Merge pull request #2294 from mercadopago/fix/brand-brick
Browse files Browse the repository at this point in the history 
Docs/activities-0902
  • Loading branch information
@hgaldino
hgaldino authored Feb 9, 2024
2 parents ce97415 + 93bc9d2 commit 9592d0a
Show file tree
Hide file tree
Showing 24 changed files with 105 additions and 83 deletions.
20 changes: 17 additions & 3 deletions guides/checkout-api-v2/how-to-integrate-3ds.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,23 @@ When the Challenge is initiated, the user has about 5 minutes to complete it. If
```
]]]

4. To **display the Challenge**, you need to generate an iframe (min height: 500px, min width: 600px) containing a form with `method post`, `action` containing the URL obtained in the field `external_resource_url`, and a hidden input with the value returned in `creq`. Then, you must post the form below to start the Challenge.
4. For a better view of the 3DS Challenge in a responsive way, you should add the CSS below.

```css
#myframe{
width: 500px;
height: 600px;
border: none;
}
@media only screen and (width <= 980px) {
#myframe{
width: 100%;
height: 440px;
}
}
```

5. To **display the Challenge**, you need to generate an iframe containing a form with `method post`, `action` containing the URL obtained in the field `external_resource_url`, and a hidden input with the value returned in `creq`. Then, you must post the form below to start the Challenge.

[[[
```javascript
Expand All @@ -230,8 +246,6 @@ function doChallenge(payment) {
var iframe = document.createElement("iframe");
iframe.name = "myframe";
iframe.id = "myframe";
iframe.height = "500px";
iframe.width = "600px";
document.body.appendChild(iframe);

var idocument = iframe.contentWindow.document;
Expand Down
20 changes: 17 additions & 3 deletions guides/checkout-api-v2/how-to-integrate-3ds.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,23 @@ Cuando se inicia el Challenge, el usuario tiene aproximadamente 5 minutos para c
```
]]]

4. Para **mostrar el _Challenge_**, es necesario que generes un _iframe_ (altura mínima: 500px, ancho mínimo: 600px) que contenga un formulario con `method post`, `action` que contenga la URL obtenida en el campo `external_resource_url`, y un input oculto con el valor obtenido en `creq`. Después, debes hacer el post del form a continuación para empezar el _challenge_.
4. Para una mejor visualización del _Challenge_ del 3DS de forma responsiva, debes agregar el CSS que se muestra a continuación.

```css
#myframe{
width: 500px;
height: 600px;
border: none;
}
@media only screen and (width <= 980px) {
#myframe{
width: 100%;
height: 440px;
}
}
```

5. Para **mostrar el _Challenge_**, es necesario que generes un _iframe_ que contenga un formulario con `method post`, `action` que contenga la URL obtenida en el campo `external_resource_url`, y un input oculto con el valor obtenido en `creq`. Después, debes hacer el post del form a continuación para empezar el _challenge_.

[[[
```javascript
Expand All @@ -230,8 +246,6 @@ function doChallenge(payment) {
var iframe = document.createElement("iframe");
iframe.name = "myframe";
iframe.id = "myframe";
iframe.height = "500px";
iframe.width = "600px";
document.body.appendChild(iframe);

var idocument = iframe.contentWindow.document;
Expand Down
20 changes: 17 additions & 3 deletions guides/checkout-api-v2/how-to-integrate-3ds.pt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,23 @@ Quando o _Challenge_ é iniciado, o usuário tem cerca de 5 minutos para complet
```
]]]

4. Para **exibir o _Challenge_**, é necessário gerar um _iframe_ (altura mínima: 500px, largura mínima: 600px) que contenha um formulário com `method post`, `action` contendo a URL obtida no campo `external_resource_url`, e um input oculto com o valor obtido em `creq`. Em seguida, faça o post do formulário abaixo para iniciar o _Challenge_.
4. Para uma melhor visualização do _Challenge_ do 3DS de forma responsiva, você deve adicionar o CSS abaixo.

```css
#myframe{
width: 500px;
height: 600px;
border: none;
}
@media only screen and (width <= 980px) {
#myframe{
width: 100%;
height: 440px;
}
}
```

5. Para **exibir o _Challenge_**, é necessário gerar um _iframe_ que contenha um formulário com `method post`, `action` contendo a URL obtida no campo `external_resource_url`, e um input oculto com o valor obtido em `creq`. Em seguida, faça o post do formulário abaixo para iniciar o _Challenge_.

[[[
```javascript
Expand All @@ -230,8 +246,6 @@ function doChallenge(payment) {
var iframe = document.createElement("iframe");
iframe.name = "myframe";
iframe.id = "myframe";
iframe.height = "500px";
iframe.width = "600px";
document.body.appendChild(iframe);

var idocument = iframe.contentWindow.document;
Expand Down
2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/introduction.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ The Brick is formed by highly customizable **banners** that can be applied to an

The banner is the initial element that communicates the value message to the user, with its basic structure consisting of an image, text, and a link that opens a **pop-up** with more information about the purchasing conditions (when applicable).

Various [visual customizations](/developers/en/docs/checkout-bricks/brand-brick/visual-customizations) are allowed to adapt to your store's style, and all displayed content is defined by choosing one of the four available value propositions described in the [settings](/developers/en/docs/checkout-bricks/brand-brick/settings/default-rendering).
Various [visual customizations](/developers/en/docs/checkout-bricks/brand-brick/visual-customizations) are allowed to adapt to your store's style, and all displayed content is defined by choosing one of the five available value propositions described in the [settings](/developers/en/docs/checkout-bricks/brand-brick/settings/default-rendering).

> NOTE
>
Expand Down
2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/introduction.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ El Brick de Brand comunica al usuario ventajas, facilidades e información, como
El Brick está formado por **_banners_** con estilos altamente personalizables que se pueden aplicar en cualquier página de una tienda en línea.
El banner es el elemento inicial que comunica el mensaje de valor al usuario, siendo su estructura básica compuesta por una imagen, un texto y un enlace que abre un **_pop-up_** con más información sobre las condiciones de compra (cuando sea aplicable).

Se permiten diversas [personalizaciones visuales](/developers/es/docs/checkout-bricks/brand-brick/visual-customizations) para que se adapte al estilo de su tienda, y todo el contenido mostrado se define a partir de la elección de una de las cuatro _value props_ disponibles y descritas en la [configuración](/developers/es/docs/checkout-bricks/brand-brick/settings/default-rendering).
Se permiten diversas [personalizaciones visuales](/developers/es/docs/checkout-bricks/brand-brick/visual-customizations) para que se adapte al estilo de su tienda, y todo el contenido mostrado se define a partir de la elección de una de las cinco _value props_ disponibles y descritas en la [configuración](/developers/es/docs/checkout-bricks/brand-brick/settings/default-rendering).

> NOTE
>
Expand Down
2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/introduction.pt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ O Brick é formado por **_banners_** com estilos altamente customizáveis que po

O banner é o elemento inicial que comunica a mensagem de valor ao usuário, sendo sua estrutura básica composta por uma imagem, um texto e um link que abre um **_pop-up_** com mais informações sobre as condições de compra (quando aplicável).

Nele são permitidas diversas [customizações visuais](/developers/pt/docs/checkout-bricks/brand-brick/visual-customizations), para que se adapte ao estilo de sua loja, e todo o conteúdo exibido é definido a partir da escolha de uma das quatro _value props_ disponíveis e descritas em [configurações](/developers/pt/docs/checkout-bricks/brand-brick/settings/default-rendering).
Nele são permitidas diversas [customizações visuais](/developers/pt/docs/checkout-bricks/brand-brick/visual-customizations), para que se adapte ao estilo de sua loja, e todo o conteúdo exibido é definido a partir da escolha de uma das cinco _value props_ disponíveis e descritas em [configurações](/developers/pt/docs/checkout-bricks/brand-brick/settings/default-rendering).

> NOTE
>
Expand Down
6 changes: 3 additions & 3 deletions guides/checkout-bricks/brand-brick/value-prop.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The textual content displayed within the banner and pop-up depends on the choice of a **value prop**.

There are four available value propositions for use, and each one enables specific customizations. The table below shows how each value proposition impacts the messages displayed in the banner:
There are five available value propositions for use, and each one enables specific customizations. The table below shows how each value proposition impacts the messages displayed in the banner:

| Value prop | Message on the banner|
|---|---|
Expand All @@ -19,15 +19,15 @@ Customizations are passed to Brick through the object below, which must be sent
const settings = {
customization: {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
},
};
```
```react-jsx
const customization = {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
};
```
Expand Down
6 changes: 3 additions & 3 deletions guides/checkout-bricks/brand-brick/value-prop.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

El contenido textual mostrado dentro del banner y del pop-up depende de la elección de una **_value prop_** (propuesta de valor).

Hay cuatro propuestas de valor disponibles para su uso, y cada una permite ciertas personalizaciones. La tabla a continuación muestra cómo cada propuesta de valor impacta en los mensajes mostrados en el banner:
Hay cinco propuestas de valor disponibles para su uso, y cada una permite ciertas personalizaciones. La tabla a continuación muestra cómo cada propuesta de valor impacta en los mensajes mostrados en el banner:

| Value prop | Mensaje en el banner |
|---|---|
Expand All @@ -19,15 +19,15 @@ Las personalizaciones se pasan a Brick a través del objeto siguiente, que debe
const settings = {
customization: {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
},
};
```
```react-jsx
const customization = {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
};
```
Expand Down
6 changes: 3 additions & 3 deletions guides/checkout-bricks/brand-brick/value-prop.pt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

O conteúdo textual exibido dentro do banner e do pop-up depende da escolha de uma **_value prop_** (proposta de valor).

Há quatro value props disponíveis para uso e cada uma possibilita determinadas customizações. A tabela abaixo exibe como cada value prop impacta nas mensagens exibidas no banner:
Há cinco value props disponíveis para uso e cada uma possibilita determinadas customizações. A tabela abaixo exibe como cada value prop impacta nas mensagens exibidas no banner:

| Value prop | Mensagem no banner |
|---|---|
Expand All @@ -19,15 +19,15 @@ As customizações são passadas para o Brick através do objeto abaixo, que dev
const settings = {
customization: {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
},
};
```
```react-jsx
const customization = {
text: {
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos"
valueProp: "payment_methods", // optional "installments" | "payment_methods" | "security" | "payment_methods_logos" | "credits"
},
};
```
Expand Down
12 changes: 6 additions & 6 deletions guides/checkout-bricks/brand-brick/visual-customizations.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ To adapt to the store's style, the banner allows the following customizations:
| `horizontalPadding` | Defines the horizontal padding of the banner.|
| `useCustomFont` | Controls whether the banner will use a custom font or the default Mercado Pago font.|
| `align` | Defines the alignment of textual content in the banner.|
| `textSize` | Defines the font size of the text in the banner.|
| `size` | Defines the font size of the text in the banner.|
| `fontWeight` | Defines the font weight in the banner.|

The possible values and defaults for each customization are defined in the snippet below, which should be sent as the third parameter in the `create()` method.
Expand All @@ -38,7 +38,7 @@ const renderBrandBrick = async (bricksBuilder) => {
visual: {
hideMercadoPagoLogo: false, // optional boolean.
contentAlign: "center", // optional "left" | "center" | "right".
backgroundColor: "white", // optional "white" | "MPPrimary" | "MPSecondary" | "black" | "transparent"
backgroundColor: "white", // optional "white" | "mercado_pago_primary" | "mercado_pago_secondary" | "black" | "transparent"
border: false, // optional boolean
borderColor: "dark", // optional "dark" | "light"
borderWidth: "1px", // optional "1px" | "2px"
Expand All @@ -49,9 +49,9 @@ const renderBrandBrick = async (bricksBuilder) => {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra_small" | "small" | "medium" | "large".
size: "medium", // optional "extra_small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" |"inverted".
color: "secondary", // optional "primary" | "secondary" |"inverted".
},
},
};
Expand All @@ -74,9 +74,9 @@ const customization = {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra-small" | "small" | "medium" | "large".
size: "medium", // optional "extra-small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" | "inverted".
color: "secondary", // optional "primary" | "secondary" | "inverted".
},
},
};
Expand Down
12 changes: 6 additions & 6 deletions guides/checkout-bricks/brand-brick/visual-customizations.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Para adaptarse al estilo de la tienda, el banner permite las siguientes personal
| `horizontalPadding` | Define el relleno horizontal del banner.|
| `useCustomFont` | Controla si el banner usará una fuente personalizada o la fuente predeterminada de Mercado Pago.|
| `align` | Define el alineamiento del contenido textual en el banner.|
| `textSize` | Define el tamaño del texto en el banner.|
| `size` | Define el tamaño del texto en el banner.|
| `fontWeight` | Define el peso de la fuente en el banner.|

Los valores posibles y los predeterminados para cada personalización están definidos en el fragmento a continuación, que debe enviarse como tercer parámetro en el método `create()`.
Expand All @@ -38,7 +38,7 @@ const renderBrandBrick = async (bricksBuilder) => {
visual: {
hideMercadoPagoLogo: false, // optional boolean.
contentAlign: "center", // optional "left" | "center" | "right".
backgroundColor: "white", // optional "white" | "MPPrimary" | "MPSecondary" | "black" | "transparent"
backgroundColor: "white", // optional "white" | "mercado_pago_primary" | "mercado_pago_secondary" | "black" | "transparent"
border: false, // optional boolean
borderColor: "dark", // optional "dark" | "light"
borderWidth: "1px", // optional "1px" | "2px"
Expand All @@ -49,9 +49,9 @@ const renderBrandBrick = async (bricksBuilder) => {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra_small" | "small" | "medium" | "large".
size: "medium", // optional "extra_small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" |"inverted".
color: "secondary", // optional "primary" | "secondary" |"inverted".
},
},
};
Expand All @@ -74,9 +74,9 @@ const customization = {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra-small" | "small" | "medium" | "large".
size: "medium", // optional "extra-small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" | "inverted".
color: "secondary", // optional "primary" | "secondary" | "inverted".
},
},
};
Expand Down
12 changes: 6 additions & 6 deletions guides/checkout-bricks/brand-brick/visual-customizations.pt.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Para que se adapte ao estilo da loja, o banner permite as seguintes customizaç
|`horizontalPadding` | Define o preenchimento horizontal do banner.|
|`useCustomFont` |Controla se o banner usará uma fonte customizada ou a fonte padrão do Mercado Pago. |
|`align` | Define o alinhamento do conteúdo textual no banner.|
|`textSize` | Define o tamanho do texto no banner.|
|`size` | Define o tamanho do texto no banner.|
|`fontWeight` | Define o peso da fonte no banner.|

Os valores possíveis e os padrões de cada customização estão definidos no snippet abaixo, que devem ser enviados como terceiro parâmetro no método `create()`.
Expand All @@ -38,7 +38,7 @@ const renderBrandBrick = async (bricksBuilder) => {
visual: {
hideMercadoPagoLogo: false, // optional boolean.
contentAlign: "center", // optional "left" | "center" | "right".
backgroundColor: "white", // optional "white" | "MPPrimary" | "MPSecondary" | "black" | "transparent"
backgroundColor: "white", // optional "white" | "mercado_pago_primary" | "mercado_pago_secondary" | "black" | "transparent"
border: false, // optional boolean
borderColor: "dark", // optional "dark" | "light"
borderWidth: "1px", // optional "1px" | "2px"
Expand All @@ -49,9 +49,9 @@ const renderBrandBrick = async (bricksBuilder) => {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra_small" | "small" | "medium" | "large".
size: "medium", // optional "extra_small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" |"inverted".
color: "secondary", // optional "primary" | "secondary" |"inverted".
},
},
};
Expand All @@ -74,9 +74,9 @@ const customization = {
text: {
align: "left", // optional "left" | "center" | "right",
useCustomFont: false, // optional boolean. OBS: If is true the Brick inheriths the font from the parent
textSize: "medium", // optional "extra-small" | "small" | "medium" | "large".
size: "medium", // optional "extra-small" | "small" | "medium" | "large".
fontWeight: "semibold", // optional "regular" | "semibold".
textColor: "primary", // optional "primary" | "secondary" | "inverted".
color: "secondary", // optional "primary" | "secondary" | "inverted".
},
},
};
Expand Down
7 changes: 0 additions & 7 deletions guides/checkout-bricks/payment-brick/add-confirmation-step.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@ This additional step provides the buyer with a more transparent and secure exper

![review-confirm-mlm](checkout-bricks/review-confirm-mlm-es.gif)

</center>
------------
----[mla]----
<center>

![review-confirm-mla](checkout-bricks/review-confirm-intro-mla-en.gif)

</center>
------------

Expand Down
7 changes: 0 additions & 7 deletions guides/checkout-bricks/payment-brick/add-confirmation-step.es.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@ Esta etapa adicional brinda al comprador una experiencia más transparente y seg

![review-confirm-mlm](checkout-bricks/review-confirm-mlm-es.gif)

</center>
------------
----[mla]----
<center>

![review-confirm-mla](checkout-bricks/review-confirm-intro-mla-es.gif)

</center>
------------

Expand Down
Loading

0 comments on commit 9592d0a

Please sign in to comment.