Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/wallet-brick-news #2542

Open
wants to merge 25 commits into
base: development
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/default-rendering.en.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Before rendering the Brand Brick, first execute the [initialization steps](/deve
>
> Note
>
> To consult the types and specifications of the parameters and responses of the Brick functions, refer to the [technical documentation](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/brand.md).
> To consult the types and specifications of the parameters and responses of the Brick functions, refer to the [technical documentation](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/brand.md).

## Configure the Brick

2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/default-rendering.es.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Antes de realizar la renderización del Brand Brick, primero ejecute los [pasos
>
> Nota
>
> Para consultar los tipos y especificaciones de los parámetros y respuestas de las funciones del Brick, consulte la [documentación técnica](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/brand.md).
> Para consultar los tipos y especificaciones de los parámetros y respuestas de las funciones del Brick, consulte la [documentación técnica](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/brand.md).
## Configurar el Brick

2 changes: 1 addition & 1 deletion guides/checkout-bricks/brand-brick/default-rendering.pt.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Antes de realizar a renderização do Brand Brick, primeiro execute os [passos d
>
> Nota
>
> Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a [documentação técnica](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/brand.md).
> Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a [documentação técnica](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/brand.md).

## Configurar o Brick

Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Before rendering the Card Payment Brick, first execute the [initialization steps
>
> Note
>
> To consult the types and specifications of the parameters and responses of the Brick functions, refer to the [technical documentation](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/card-payment.md).
> To consult the types and specifications of the parameters and responses of the Brick functions, refer to the [technical documentation](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/card-payment.md).
## Configure the Brick

Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Antes de realizar la renderización del Card Payment Brick, primero ejecute los
>
> Nota
>
> Para consultar los tipos y especificaciones de los parámetros y respuestas de las funciones del Brick, consulte la [documentación técnica](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/card-payment.md).
> Para consultar los tipos y especificaciones de los parámetros y respuestas de las funciones del Brick, consulte la [documentación técnica](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/card-payment.md).

## Configurar el Brick

Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Antes de realizar a renderização do Card Payment Brick, primeiro execute os [p
>
> Nota
>
> Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a [documentação técnica](https://github.com/mercadopago/sdk-js/blob/main/API/bricks/card-payment.md).
> Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a [documentação técnica](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/card-payment.md).
## Configurar o Brick

15 changes: 15 additions & 0 deletions guides/checkout-bricks/common-initialization.en.md
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ To set up Brick integrations and have a responsive, optimized, and configurable

Use our official libraries to access Mercado Pago's features safely from your frontend.

----[mlc]----
[[[
```html
// The JS code can be included in a < script > tag or a separate JS file.
@@ -20,6 +21,20 @@ npm install @mercadopago/sdk-react
```
]]]

------------
----[mla, mlm, mlb, mpe, mco, mlu]----
[[[
```html
// The JS code can be included in a < script > tag or a separate JS file.
<script src="https://sdk.mercadopago.com/js/v2"></script>
```
```bash
npm install @mercadopago/sdk-react @0.0.23
```
]]]

------------

## Initialize Mercado Pago library

Then, initialize the Mercado Pago library to use Checkout Bricks.
15 changes: 15 additions & 0 deletions guides/checkout-bricks/common-initialization.es.md
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ Para configurar la integración de Bricks y tener un pago receptivo, optimizado

Utiliza nuestras bibliotecas oficiales para acceder a las funcionalidades de Mercado Pago de forma segura desde tu frontend.

----[mlc]----
[[[
```html
// El código JS se puede incluir en una etiqueta < script > o en un archivo JS separado.
@@ -20,6 +21,20 @@ npm install @mercadopago/sdk-react
```
]]]

------------
----[mla, mlm, mlb, mpe, mco, mlu]----
[[[
```html
// El código JS se puede incluir en una etiqueta < script > o en un archivo JS separado.
<script src="https://sdk.mercadopago.com/js/v2"></script>
```
```bash
npm install @mercadopago/sdk-react @0.0.23
```
]]]

------------

## Inicializar biblioteca de Mercado Pago

A continuación, inicialice la biblioteca de Mercado Pago para utilizar Checkout Bricks.
17 changes: 16 additions & 1 deletion guides/checkout-bricks/common-initialization.pt.md
Original file line number Diff line number Diff line change
@@ -10,16 +10,31 @@ Para configurar a integração dos Bricks e ter um checkout responsivo, otimizad

Utilize as nossas bibliotecas oficiais para acessar as funcionalidades do Mercado Pago com segurança desde seu frontend.

----[mlc]----
[[[
```html
// O código JS pode ser incluído em uma tag < script > ou um arquivo JS separado.
<script src="https://sdk.mercadopago.com/js/v2"></script>
```
```bash
npm install @mercadopago/sdk-react
npm install @mercadopago/sdk-react
```
]]]

------------
----[mla, mlm, mlb, mpe, mco, mlu]----
[[[
```html
// O código JS pode ser incluído em uma tag < script > ou um arquivo JS separado.
<script src="https://sdk.mercadopago.com/js/v2"></script>
```
```bash
npm install @mercadopago/sdk-react @0.0.23
```
]]]

------------

## Inicializar biblioteca Mercado Pago

Em seguida, inicialize a biblioteca Mercado Pago para utilizar Checkout Bricks.
3 changes: 3 additions & 0 deletions guides/checkout-bricks/github-project.en.md
Original file line number Diff line number Diff line change
@@ -5,20 +5,23 @@ Click on the links below to access the projects available in the **GitHub** repo
----[mlm]----
* [Functional project - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Functional project - Payment Brick with confirmation step](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Functional project - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Functional project - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Technical documentation - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mla]----
* [Functional project - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Functional project - Payment Brick with confirmation step](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Functional project - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Functional project - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Functional project - Brand Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Technical documentation - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mlb, mpe, mco, mlu, mlc]----
* [Functional project - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Functional project - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Functional project - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Technical documentation - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

3 changes: 3 additions & 0 deletions guides/checkout-bricks/github-project.es.md
Original file line number Diff line number Diff line change
@@ -5,20 +5,23 @@ Haz clic en los links a continuación para acceder a los proyectos disponibles e
----[mlm]----
* [Proyecto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Proyecto funcional - Payment Brick con etapa de confirmación](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Proyecto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Proyecto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Documentación técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mla]----
* [Proyecto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Proyecto funcional - Payment Brick con etapa de confirmación](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Proyecto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Proyecto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Proyecto funcional - Brand Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Documentación técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mlb, mpe, mco, mlu, mlc]----
* [Proyecto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Proyecto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Proyecto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Documentación técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

3 changes: 3 additions & 0 deletions guides/checkout-bricks/github-project.pt.md
Original file line number Diff line number Diff line change
@@ -5,20 +5,23 @@ Clique nos links abaixo para acessar os projetos disponíveis no repositório do
----[mlm]----
* [Projeto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Projeto funcional - Payment Brick com etapa de confirmação](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Projeto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Projeto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Documentação técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mla]----
* [Projeto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Projeto funcional - Payment Brick com etapa de confirmação](https://github.com/mercadopago/payment-bricks-review-sample-node)
* [Projeto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Projeto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Projeto funcional - Brand Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Documentação técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

------------
----[mlb, mpe, mco, mlu, mlc]----
* [Projeto funcional - Payment Brick](https://github.com/mercadopago/payment-bricks-sample-node)
* [Projeto funcional - Wallet Brick](https://github.com/mercadopago/wallet-brand-bricks-sample)
* [Projeto funcional - Card Payment Brick](https://github.com/mercadopago/card-payment-bricks-sample)
* [Documentação técnica - SDK MercadoPago.js V2](https://github.com/mercadopago/sdk-js)

9 changes: 9 additions & 0 deletions guides/checkout-bricks/modify-variables.en.md
Original file line number Diff line number Diff line change
@@ -4,13 +4,22 @@
>
> Modify CSS variables

----[mlc]----
| Key | Available options |
| --- | --- |
| Property | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, successSecondaryColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraExtraSmall, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |

------------
----[mlb, mla, mlm, mpe, mco, mlu]----
| - | Brick |
| --- | --- |
| Customization moment | When rendering Brick |
| Property | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |
| Type | string |
| Comments | Size values ​​such as fontSize and padding accept values ​​in px, rem, em, and %. These settings change the CSS variables that control the theme. |

------------

[[[
```Javascript
const settings = {
9 changes: 9 additions & 0 deletions guides/checkout-bricks/modify-variables.es.md
Original file line number Diff line number Diff line change
@@ -4,13 +4,22 @@
>
> Cambiar variables CSS

----[mlc]----
| Clave | Opciones disponibles |
| --- | --- |
| Propiedad | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, successSecondaryColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraExtraSmall, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |

------------
----[mlb, mla, mlm, mpe, mco, mlu]----
| - | Brick |
| --- | --- |
| Momento de personalización | Al renderizar Brick |
| Propiedad | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |
| Tipo | string |
| Observaciones | Los valores de tamaño como fontSize y padding aceptan valores en px, rem, em y %. Estos ajustes cambian las variables CSS que controlan el tema. |

------------

[[[
```Javascript
const settings = {
9 changes: 9 additions & 0 deletions guides/checkout-bricks/modify-variables.pt.md
Original file line number Diff line number Diff line change
@@ -4,13 +4,22 @@
>
> Alterar variáveis CSS

----[mlc]----
| Chave | Opções disponíveis |
| --- | --- |
| Propriedade | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, successSecondaryColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraExtraSmall, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |

------------
----[mlb, mla, mlm, mpe, mco, mlu]----
| - | Brick |
| --- | --- |
| Momento da customização | Ao renderizar Brick |
| Propriedade | customization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding} |
| Tipo | string |
| Observações | Os valores de tamanho, como fontSize e padding, aceitam valores em px, rem, em e %. Essas configurações alteram as variáveis CSS que controlam o tema. |

------------

[[[
```Javascript
const settings = {
13 changes: 4 additions & 9 deletions guides/checkout-bricks/payment-brick/customers-cards.en.md
Original file line number Diff line number Diff line change
@@ -41,19 +41,14 @@ Just passing these two properties, Brick will automatically give the user the op
> Only no expired cards will be shown to the buyer, expired cards will not be made available.

----[mlc]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-en.mlc.png)

------------
----[mlb]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-en.mlb.gif)
![payment-brick-c](checkout-bricks/payment-brick-cc-en-all.png)

------------
----[mlm]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-en.mlm.gif)

------------
----[mla, mpe, mco, mlu]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-en.all.gif)
----[mlb, mla, mlm, mpe, mlu, mco]----

![payment-brick-saved-cards](checkout-bricks/payment-brick-saved-cards-en.gif)

------------

14 changes: 4 additions & 10 deletions guides/checkout-bricks/payment-brick/customers-cards.es.md
Original file line number Diff line number Diff line change
@@ -41,27 +41,21 @@ Con solo pasar estas dos propiedades, Brick le dará automáticamente al usuario
> Solo se mostrarán al comprador las tarjetas no caducadas, las tarjetas caducadas no estarán disponibles.

----[mlc]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-es-mlc.png)

------------
----[mlb]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-es-mlb.gif)
![payment-brick-c](checkout-bricks/payment-brick-cc-es-all.png)

------------
----[mlm]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-es-mlm.gif)

------------
----[mla, mpe, mco, mlu, mlc]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-es-all.gif)
----[mlb, mla, mlm, mpe, mlu, mco]----

![payment-brick-saved-cards](checkout-bricks/payment-brick-saved-cards-es.gif)

------------

----[mlb]----
Para obtener información sobre cómo crear, modificar y obtener `customerId` y `cardsIds`, consulte la sección [Gestión de tarjetas y clientes](/developers/es/docs/checkout-api/customer-management) de la documentación de Checkout Transparente.

------------

----[mla, mlm, mpe, mco, mlu, mlc]----
Para obtener información sobre cómo crear, modificar y obtener `customerId` y `cardsIds`, consulte la sección [Gestión de tarjetas y clientes](/developers/es/docs/checkout-api/customer-management) de la documentación de Checkout API.

15 changes: 5 additions & 10 deletions guides/checkout-bricks/payment-brick/customers-cards.pt.md
Original file line number Diff line number Diff line change
@@ -41,26 +41,21 @@ Apenas passando essas duas propriedades, o Brick automaticamente dará ao usuár
> Somente os cartões dentro do prazo de validade serão mostrados para o comprador, cartões vencidos não serão disponibilizados.

----[mlc]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-pt-mlc.png)

------------
----[mlb]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-pt-mlb.gif)
![payment-brick-c](checkout-bricks/payment-brick-cc-pt-all.png)

------------
----[mlm]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-pt-mlm.gif)

------------
----[mla, mpe, mco, mlu]----
![payment-Brick-cc](checkout-bricks/payment-brick-cc-pt-all.gif)
----[mlb, mla, mlm, mpe, mlu, mco]----

![payment-brick-saved-cards](checkout-bricks/payment-brick-saved-cards-pt.gif)

------------

----[mlb]----
Para saber como criar, modificar e obter o `customerId` e os `cardsIds`, consulte a seção [Gestão de cartões e clientes](/developers/pt/docs/checkout-api/customer-management) da documentação do Checkout Transparente.

------------

----[mla, mlm, mpe, mco, mlu, mlc]----
Para saber como criar, modificar e obter o `customerId` e os `cardsIds`, consulte a seção [Gestão de cartões e clientes](/developers/pt/docs/checkout-api/customer-management) da documentação do Checkout API.

Loading