From 7887fc3f95cd98d65ee904429b34a77465dbf87a Mon Sep 17 00:00:00 2001 From: Heitor Galdino Date: Tue, 21 Jan 2025 11:52:57 -0300 Subject: [PATCH 1/5] 1 --- .../brand-brick/default-rendering.en.md | 2 +- .../brand-brick/default-rendering.es.md | 2 +- .../brand-brick/default-rendering.pt.md | 2 +- .../card-payment-brick/default-rendering.en.md | 2 +- .../card-payment-brick/default-rendering.es.md | 2 +- .../card-payment-brick/default-rendering.pt.md | 2 +- .../checkout-bricks/common-initialization.en.md | 15 +++++++++++++++ .../checkout-bricks/common-initialization.es.md | 15 +++++++++++++++ .../checkout-bricks/common-initialization.pt.md | 15 +++++++++++++++ .../status-screen-brick/default-rendering.en.md | 2 +- .../status-screen-brick/default-rendering.es.md | 2 +- .../status-screen-brick/default-rendering.pt.md | 2 +- .../hide-processing-details.en.md | 14 ++++---------- .../hide-processing-details.es.md | 14 ++++---------- .../hide-processing-details.pt.md | 14 ++++---------- 15 files changed, 66 insertions(+), 39 deletions(-) diff --git a/guides/checkout-bricks/brand-brick/default-rendering.en.md b/guides/checkout-bricks/brand-brick/default-rendering.en.md index e40d6572b6..9120f3198c 100644 --- a/guides/checkout-bricks/brand-brick/default-rendering.en.md +++ b/guides/checkout-bricks/brand-brick/default-rendering.en.md @@ -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 diff --git a/guides/checkout-bricks/brand-brick/default-rendering.es.md b/guides/checkout-bricks/brand-brick/default-rendering.es.md index 0e6d06d219..c32c6b2305 100644 --- a/guides/checkout-bricks/brand-brick/default-rendering.es.md +++ b/guides/checkout-bricks/brand-brick/default-rendering.es.md @@ -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 diff --git a/guides/checkout-bricks/brand-brick/default-rendering.pt.md b/guides/checkout-bricks/brand-brick/default-rendering.pt.md index e891ee8276..f940382519 100644 --- a/guides/checkout-bricks/brand-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/brand-brick/default-rendering.pt.md @@ -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 diff --git a/guides/checkout-bricks/card-payment-brick/default-rendering.en.md b/guides/checkout-bricks/card-payment-brick/default-rendering.en.md index c595272215..014db8c3b8 100644 --- a/guides/checkout-bricks/card-payment-brick/default-rendering.en.md +++ b/guides/checkout-bricks/card-payment-brick/default-rendering.en.md @@ -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 diff --git a/guides/checkout-bricks/card-payment-brick/default-rendering.es.md b/guides/checkout-bricks/card-payment-brick/default-rendering.es.md index c18f8ac65a..28abbd49d1 100644 --- a/guides/checkout-bricks/card-payment-brick/default-rendering.es.md +++ b/guides/checkout-bricks/card-payment-brick/default-rendering.es.md @@ -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 diff --git a/guides/checkout-bricks/card-payment-brick/default-rendering.pt.md b/guides/checkout-bricks/card-payment-brick/default-rendering.pt.md index db6088bd69..f778f97522 100644 --- a/guides/checkout-bricks/card-payment-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/card-payment-brick/default-rendering.pt.md @@ -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 diff --git a/guides/checkout-bricks/common-initialization.en.md b/guides/checkout-bricks/common-initialization.en.md index 0fa359a20a..bc3dd5f849 100644 --- a/guides/checkout-bricks/common-initialization.en.md +++ b/guides/checkout-bricks/common-initialization.en.md @@ -10,6 +10,19 @@ 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. + +``` +```bash +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ +----[mla, mlm, mlb, mpe, mco, mlu]---- [[[ ```html // The JS code can be included in a < script > tag or a separate JS file. @@ -20,6 +33,8 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ + ## Initialize Mercado Pago library Then, initialize the Mercado Pago library to use Checkout Bricks. diff --git a/guides/checkout-bricks/common-initialization.es.md b/guides/checkout-bricks/common-initialization.es.md index 719bfb9b90..5f7e6f8843 100644 --- a/guides/checkout-bricks/common-initialization.es.md +++ b/guides/checkout-bricks/common-initialization.es.md @@ -10,6 +10,19 @@ 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. + +``` +```bash +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ +----[mla, mlm, mlb, mpe, mco, mlu]---- [[[ ```html // El código JS se puede incluir en una etiqueta < script > o en un archivo JS separado. @@ -20,6 +33,8 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ + ## Inicializar biblioteca de Mercado Pago A continuación, inicialice la biblioteca de Mercado Pago para utilizar Checkout Bricks. diff --git a/guides/checkout-bricks/common-initialization.pt.md b/guides/checkout-bricks/common-initialization.pt.md index 8ea9f81764..b909f0b52c 100644 --- a/guides/checkout-bricks/common-initialization.pt.md +++ b/guides/checkout-bricks/common-initialization.pt.md @@ -10,6 +10,19 @@ 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. + +``` +```bash +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ +----[mla, mlm, mlb, mpe, mco, mlu]---- [[[ ```html // O código JS pode ser incluído em uma tag < script > ou um arquivo JS separado. @@ -20,6 +33,8 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ + ## Inicializar biblioteca Mercado Pago Em seguida, inicialize a biblioteca Mercado Pago para utilizar Checkout Bricks. diff --git a/guides/checkout-bricks/status-screen-brick/default-rendering.en.md b/guides/checkout-bricks/status-screen-brick/default-rendering.en.md index b315c35d84..c95072ef97 100644 --- a/guides/checkout-bricks/status-screen-brick/default-rendering.en.md +++ b/guides/checkout-bricks/status-screen-brick/default-rendering.en.md @@ -6,7 +6,7 @@ Before rendering the Status Screen Brick, first execute the [initialization step > > 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/status-screen.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/status-screen.md). ## Configure the Brick diff --git a/guides/checkout-bricks/status-screen-brick/default-rendering.es.md b/guides/checkout-bricks/status-screen-brick/default-rendering.es.md index 66809a0743..145bf0f955 100644 --- a/guides/checkout-bricks/status-screen-brick/default-rendering.es.md +++ b/guides/checkout-bricks/status-screen-brick/default-rendering.es.md @@ -6,7 +6,7 @@ Antes de realizar la renderización del Status Screen 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/status-screen.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/status-screen.md). ## Configurar el Brick diff --git a/guides/checkout-bricks/status-screen-brick/default-rendering.pt.md b/guides/checkout-bricks/status-screen-brick/default-rendering.pt.md index e589ffd919..437632ff97 100644 --- a/guides/checkout-bricks/status-screen-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/status-screen-brick/default-rendering.pt.md @@ -6,7 +6,7 @@ Antes de realizar a renderização do Status Screen Brick, primeiro execute os [ > > 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/status-screen.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/status-screen.md). ## Configurar o Brick diff --git a/guides/checkout-bricks/status-screen-brick/hide-processing-details.en.md b/guides/checkout-bricks/status-screen-brick/hide-processing-details.en.md index 2d74a9f27e..cb291b97d6 100644 --- a/guides/checkout-bricks/status-screen-brick/hide-processing-details.en.md +++ b/guides/checkout-bricks/status-screen-brick/hide-processing-details.en.md @@ -36,17 +36,11 @@ const customization = { ``` ]]] -----[mlb]---- -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mlb-en.jpg) - ------------- -----[mpe]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mpe-en.jpg) +----[mlc]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-en.jpg) ------------ -----[mlm, mla, mco, mlu, mlc]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-en.jpg) +----[mlb, mlm, mla, mpe, mco, mlu]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-en.jpg) ------------ \ No newline at end of file diff --git a/guides/checkout-bricks/status-screen-brick/hide-processing-details.es.md b/guides/checkout-bricks/status-screen-brick/hide-processing-details.es.md index 65c15912fd..03fd31f842 100644 --- a/guides/checkout-bricks/status-screen-brick/hide-processing-details.es.md +++ b/guides/checkout-bricks/status-screen-brick/hide-processing-details.es.md @@ -36,17 +36,11 @@ const customization = { ``` ]]] -----[mlb]---- -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mlb-es.jpg) - ------------- -----[mpe]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mpe-es.jpg) +----[mlc]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-es.jpg) ------------ -----[mlm, mla, mco, mlu, mlc]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-es.jpg) +----[mlb, mlm, mla, mpe, mco, mlu]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-es.jpg) ------------ \ No newline at end of file diff --git a/guides/checkout-bricks/status-screen-brick/hide-processing-details.pt.md b/guides/checkout-bricks/status-screen-brick/hide-processing-details.pt.md index dbc6a20544..d8ce265238 100644 --- a/guides/checkout-bricks/status-screen-brick/hide-processing-details.pt.md +++ b/guides/checkout-bricks/status-screen-brick/hide-processing-details.pt.md @@ -36,17 +36,11 @@ const customization = { ``` ]]] -----[mlb]---- -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mlb-pt.jpg) - ------------- -----[mpe]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-mpe-pt.jpg) +----[mlc]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-pt.jpg) ------------ -----[mlm, mla, mco, mlu, mlc]---- - -![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-all-pt.jpg) +----[mlb, mlm, mla, mpe, mco, mlu]---- +![status-screen-brick-hide-processing-details](checkout-bricks/status-screen-brick-hide-processing-details-pt.jpg) ------------ \ No newline at end of file From a2a9822a12752094a5786b3ca86327abd6f6c4e3 Mon Sep 17 00:00:00 2001 From: Heitor Galdino Date: Tue, 21 Jan 2025 14:53:27 -0300 Subject: [PATCH 2/5] 2 --- .../wallet-brick/default-rendering.en.md | 11 +++++++++++ .../wallet-brick/default-rendering.es.md | 11 +++++++++++ .../wallet-brick/default-rendering.pt.md | 11 +++++++++++ 3 files changed, 33 insertions(+) diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.en.md b/guides/checkout-bricks/wallet-brick/default-rendering.en.md index a0916e6669..2d71de499c 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.en.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.en.md @@ -2,12 +2,23 @@ Before rendering the Wallet Brick, first execute the [initialization steps](/developers/en/docs/checkout-bricks/common-initialization) shared among all Bricks. From there, see below the necessary information to configure and render the Wallet Brick. +----[mlc]---- > NOTE > > 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/docs/bricks/wallet.md). +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +> NOTE +> +> 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/docs/bricks/legacy/wallet.md). + +------------ + ## Configure the Brick Create Brick's startup configuration. diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.es.md b/guides/checkout-bricks/wallet-brick/default-rendering.es.md index 3ad55d5855..8a95ea0bad 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.es.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.es.md @@ -2,12 +2,23 @@ Antes de realizar la renderización del Wallet Brick, primero ejecute los [pasos de inicialización](/developers/es/docs/checkout-bricks/common-initialization) compartidos entre todos los Bricks. A partir de esto, a continuación se presentan las informaciones necesarias para que configures y renderices el Wallet Brick. +----[mlc]---- > NOTE > > 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/docs/bricks/wallet.md). +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +> NOTE +> +> 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/docs/bricks/legacy/wallet.md). + +------------ + ## Configurar el Brick Crea la configuración de inicio de Brick diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.pt.md b/guides/checkout-bricks/wallet-brick/default-rendering.pt.md index ef1ff1987b..5673b3d194 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.pt.md @@ -2,12 +2,23 @@ Antes de realizar a renderização do Wallet Brick, primeiro execute os [passos de inicialização](/developers/pt/docs/checkout-bricks/common-initialization) compartilhados entre todos os Bricks. A partir disso, veja abaixo as informações necessárias para você configurar e renderizar o Wallet Brick. +----[mlc]---- > NOTE > > 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/docs/bricks/wallet.md). +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +> NOTE +> +> 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/docs/bricks/legacy/wallet.md). + +------------ + ## Configurar o Brick Crie a configuração de inicialização do Brick. From 587121a03838b0ca5b1a15cfc6ad8e608050f6eb Mon Sep 17 00:00:00 2001 From: Heitor Galdino Date: Tue, 21 Jan 2025 18:25:00 -0300 Subject: [PATCH 3/5] bricks --- guides/checkout-bricks/modify-variables.en.md | 9 ++ guides/checkout-bricks/modify-variables.es.md | 9 ++ guides/checkout-bricks/modify-variables.pt.md | 9 ++ .../wallet-brick/change-appearance.en.md | 82 +++++++++++++++++- .../wallet-brick/change-appearance.es.md | 84 ++++++++++++++++++- .../wallet-brick/change-appearance.pt.md | 84 ++++++++++++++++++- .../wallet-brick/change-texts.en.md | 52 +++++++++++- .../wallet-brick/change-texts.es.md | 60 +++++++++++-- .../wallet-brick/change-texts.pt.md | 52 +++++++++++- .../wallet-brick/default-rendering.en.md | 52 ++++++++++++ .../wallet-brick/default-rendering.es.md | 60 ++++++++++++- .../wallet-brick/default-rendering.pt.md | 52 ++++++++++++ 12 files changed, 577 insertions(+), 28 deletions(-) diff --git a/guides/checkout-bricks/modify-variables.en.md b/guides/checkout-bricks/modify-variables.en.md index 0bbc17eff9..0457c85590 100644 --- a/guides/checkout-bricks/modify-variables.en.md +++ b/guides/checkout-bricks/modify-variables.en.md @@ -4,6 +4,13 @@ > > 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 | @@ -11,6 +18,8 @@ | 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 = { diff --git a/guides/checkout-bricks/modify-variables.es.md b/guides/checkout-bricks/modify-variables.es.md index a44fa83c42..aae0454504 100644 --- a/guides/checkout-bricks/modify-variables.es.md +++ b/guides/checkout-bricks/modify-variables.es.md @@ -4,6 +4,13 @@ > > 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 | @@ -11,6 +18,8 @@ | 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 = { diff --git a/guides/checkout-bricks/modify-variables.pt.md b/guides/checkout-bricks/modify-variables.pt.md index 1f80aa577a..b2ca48eb23 100644 --- a/guides/checkout-bricks/modify-variables.pt.md +++ b/guides/checkout-bricks/modify-variables.pt.md @@ -4,6 +4,13 @@ > > 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 | @@ -11,6 +18,8 @@ | 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 = { diff --git a/guides/checkout-bricks/wallet-brick/change-appearance.en.md b/guides/checkout-bricks/wallet-brick/change-appearance.en.md index 41473a49a8..456da9ef3f 100644 --- a/guides/checkout-bricks/wallet-brick/change-appearance.en.md +++ b/guides/checkout-bricks/wallet-brick/change-appearance.en.md @@ -4,6 +4,52 @@ > > Change appearance +----[mlc]---- +Wallet Brick allows for some visual customizations listed in the table below, all of which are optional and of the `string` type. + +If the provided property is empty, the screen will display the appearance defined by the default layout. On the other hand, sending an alternative value will replace the default value. + +| Key | Available options | Default | +|--- |--- | --- | --- | +| theme | default ou black | default | +| customStyle.valuePropColor | For the **default** theme, `valuePropColor` can be **blue or white**, while for the **dark** theme, valuePropColor`` can be **dark**. | For the **default** theme, the **default is blu**e, while for the **dark** theme, the **default is black**. | +| customStyle.buttonHeight | Minimum: 48px.
Maximum: free choice. | 48px | +| customStyle.borderRadius | Minimum: livre escolha.
Maximum: free choice. | 6px | +| customStyle.verticalPadding | Minimum: 8px.
Maximum: free choice. | 8px | +| customStyle.horizontalPadding | Minimum: 0px.
Maximum: free choice. | 0px | + +[[[ +```javascript +const settings = { + ..., + customization: { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } + } +} +``` +```react-jsx +const customization = { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- ## Style properties | - | Description | @@ -41,12 +87,40 @@ const customization = { borderRadius: '16px', } }; - ``` ]]] -## Hide value proposition text +------------ +## Hide value proposition (valueProp) text + +----[mlc]---- +It is also possible to hide the value proposition text by passing the value `boolean true` to the property `customStyle.hideValueProp`. The **default value** is `false`. + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + hideValueProp: true, + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + hideValueProp: true, + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- | - | Description | | --- | --- | | Customization moment | When rendering the Brick | @@ -72,4 +146,6 @@ const customization = { } }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/change-appearance.es.md b/guides/checkout-bricks/wallet-brick/change-appearance.es.md index 6573cb4d7e..04261aa31d 100644 --- a/guides/checkout-bricks/wallet-brick/change-appearance.es.md +++ b/guides/checkout-bricks/wallet-brick/change-appearance.es.md @@ -4,6 +4,52 @@ > > Cambiar de aspecto +----[mlc]---- +Wallet Brick permite algunas personalizaciones visuales listadas en la tabla abajo, todas opcionales y del tipo `string`. + +Si la propiedad enviada está vacía, la pantalla mostrará el diseño definido por el *layout* predeterminado. Por otro lado, al enviar un valor alternativo, este reemplazará el valor predeterminado. + +| Clave | Opciones disponibles | Predeterminado | +|--- |--- | --- | --- | +| theme | default ou black | default | +| customStyle.valuePropColor | Para el tema **default**, `valuePropColor` puede ser **blue ou white**, mientras que para el tema **dark**, `valuePropColor` puede ser **black**. | Para el tema **default**, el **predeterminado es blue**, mientras que para el tema **dark**, el **predeterminado es black**. | +| customStyle.buttonHeight | Mínimo: 48px.
Máximo: libre elección. | 48px | +| customStyle.borderRadius | Mínimo: livre escolha.
Máximo: libre elección. | 6px | +| customStyle.verticalPadding | Mínimo: 8px.
Máximo: libre elección. | 8px | +| customStyle.horizontalPadding | Mínimo: 0px.
Máximo: libre elección. | 0px | + +[[[ +```javascript +const settings = { + ..., + customization: { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } + } +} +``` +```react-jsx +const customization = { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- ## Propiedades de estilo | - | Descripción | @@ -11,7 +57,7 @@ | Momento de personalización | Al renderizar el Brick | | Propiedad | customization.visual.{buttonBackground, buttonHeight, borderRadius, valuePropColor, verticalPadding, horizontalPadding} | | Tipo | String | -| Observaciones | Al enviar una propiedad vacía, la pantalla presentará el aspecto definido por el layout predeterminado que se muestra después de la [renderización del Brick](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_o_brick). Por otro lado, al enviar un valor alternativo, reemplazará el valor predeterminado. Para comprobar cuáles son los valores por defecto, consulta la tabla a continuación. | +| Observaciones | Al enviar una propiedad vacía, la pantalla presentará el aspecto definido por el *layout* predeterminado que se muestra después de la [renderización del Brick](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_o_brick). Por otro lado, al enviar un valor alternativo, reemplazará el valor predeterminado. Para comprobar cuáles son los valores por defecto, consulta la tabla a continuación. | | Clave | Opciones disponibles | Predeterminado | Observaciones | |--- |--- | --- | --- | @@ -41,12 +87,40 @@ const customization = { borderRadius: '16px', } }; - ``` ]]] -## Ocultar texto de propuesta de valor +------------ +## Ocultar texto de propuesta de valor (valueProp) + +----[mlc]---- +También es posible ocultar el texto de la propuesta de valor pasando el valor `boolean true` a la propiedad `customStyle.hideValueProp`. El **valor predeterminado** es `false`. + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + hideValueProp: true, + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + hideValueProp: true, + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- | - | Descripción | | --- | --- | | Momento de personalización | Al renderizar el Brick | @@ -73,4 +147,6 @@ const customization = { }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/change-appearance.pt.md b/guides/checkout-bricks/wallet-brick/change-appearance.pt.md index d3508110f3..50f8df76bd 100644 --- a/guides/checkout-bricks/wallet-brick/change-appearance.pt.md +++ b/guides/checkout-bricks/wallet-brick/change-appearance.pt.md @@ -4,6 +4,52 @@ > > Alterar visual +----[mlc]---- +Wallet Brick permite algumas customizações visuais listadas na tabela abaixo, todas opcionais e do tipo `string`. + +Caso a propriedade enviada esteja vazia, a tela apresentará o visual definido pelo *layout* padrão. Por outro lado, ao enviar um valor alternativo, este substituirá o valor padrão. + +| Chave | Opções disponíveis | Padrão | +|--- |--- | --- | --- | +| theme | default ou black | default | +| customStyle.valuePropColor | Para o tema **default**, `valuePropColor` pode ser **blue ou white**, enquanto que para o tema **dark**, `valuePropColor` pode ser **black**. | Para o tema **default**, o **padrão é blue**, enquanto que para o tema **dark**, o **padrão é black**. | +| customStyle.buttonHeight | Mínimo: 48px.
Máximo: livre escolha. | 48px | +| customStyle.borderRadius | Mínimo: livre escolha.
Máximo: livre escolha. | 6px | +| customStyle.verticalPadding | Mínimo: 8px.
Máximo: livre escolha. | 8px | +| customStyle.horizontalPadding | Mínimo: 0px.
Máximo: livre escolha. | 0px | + +[[[ +```javascript +const settings = { + ..., + customization: { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } + } +} +``` +```react-jsx +const customization = { + theme:'dark', + customStyle: { + valueProp: 'practicality', + valuePropColor: 'black', + borderRadius: '10px', + verticalPadding: '10px', + horizontalPadding: '10px', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- ## Propriedades de estilo | - | Descrição | @@ -11,7 +57,7 @@ | Momento de customização | Ao renderizar Brick | | Propriedade | customization.visual.{buttonBackground, buttonHeight, borderRadius, valuePropColor, verticalPadding, horizontalPadding} | | Tipo | String | -| Observações | Ao enviar uma propriedade vazia, a tela apresentará o visual definido pelo layout padrão exibido após a [rendereização do Brick](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_o_brick). Por outro lado, ao se enviar um valor alternativo, este substituirá o valor padrão. Para verificar quais são os valores alternativos, veja a tabela a seguir.| +| Observações | Ao enviar uma propriedade vazia, a tela apresentará o visual definido pelo *layout* padrão exibido após a [rendereização do Brick](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_o_brick). Por outro lado, ao se enviar um valor alternativo, este substituirá o valor padrão. Para verificar quais são os valores alternativos, veja a tabela a seguir.| | Chave | Opções disponíveis | Padrão | Observações | |--- |--- | --- | --- | @@ -41,12 +87,40 @@ const customization = { borderRadius: '16px', } }; - ``` ]]] -## Ocultar texto da proposta de valor +------------ +## Ocultar texto da proposta de valor (valueProp) + +----[mlc]---- +Também é possível ocultar o texto da proposta de valor passando o valor `boolean true` para a propriedade `customStyle.hideValueProp`. O **valor padrão** é `false`. + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + hideValueProp: true, + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + hideValueProp: true, + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- | - | Descrição | |--- |--- | | Momento de customização | Ao renderizar Brick | @@ -73,4 +147,6 @@ const customization = { }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/change-texts.en.md b/guides/checkout-bricks/wallet-brick/change-texts.en.md index 9f711c47fa..f6943de3fc 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.en.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.en.md @@ -4,10 +4,19 @@ > > Change texts -Wallet Brick offers two reading levels: the **call to action (button)** and the **value proposition (Value Prop)**. In both cases, the text can be customized according to the options provided by Mercado Pago. +----[mlc]---- +Wallet Brick is **composed of the button and the value proposition** (`valueProp`), which can be customized according to the options provided by Mercado Pago. + +There are two themes available: the **default** (also used when no configuration is specified) and **dark**. Choosing a theme affects the background color of the button, the value proposition, and the color of the images inside the button. + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +Wallet Brick offers two reading levels: the **call to action (button)** and the **value proposition** (`valueProp`). In both cases, the text can be customized according to the options provided by Mercado Pago. The "call to action" is divided into two parts: the action, determined by the `Action` property, and the complement of the action, determined by the `Action Complement` property. +------------ + > WARNING > > Attention @@ -25,12 +34,23 @@ Check below the available texts for modification, how they are organized in the ![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-en.png) +----[mlb, mlm, mlb]---- | Key | Available options | Default | |--- |--- | --- | | action | pay, buy | pay | | actionComplement |brand, amount | brand | | valueProp | practicality, convenience_all, security_details, security_safety, smart_option, convenience_credits, payment_methods_logos | security_safety | +------------ +----[mpe, mco, mlu, mlc]---- +| Key | Available options | Default | +|--- |--- | --- | +| action | pay, buy | pay | +| actionComplement |brand, amount | brand | +| valueProp | practicality, security_details, security_safety, smart_option, payment_methods_logos | security_safety | + +------------ + See the texts related to each option: ----[mlb, mla, mlm]---- @@ -57,7 +77,6 @@ See the texts related to each option: |actionComplement |brand | with Mercado Pago | |actionComplement |amount | Purchase amount obtained through preference, in the currency format of the payment. | |valueProp |practicality | Use saved cards or your account balance | -|valueProp |convenience_all | Installment with or without card | |valueProp |security_details | Protection for your data | |valueProp |security_safety | Pay securely | |valueProp |smart_option| The text will be chosen automatically by Wallet Brick to increase the chances of sale according to the characteristics of the purchase. | @@ -98,6 +117,31 @@ When testing your integration, make sure that the `action`, `actionComplement`, ------------ +----[mlc]---- +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -123,4 +167,6 @@ const customization = { } }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/change-texts.es.md b/guides/checkout-bricks/wallet-brick/change-texts.es.md index bd7d9852ee..fdc3d557c2 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.es.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.es.md @@ -4,10 +4,19 @@ > > Cambiar textos -Wallet Brick ofrece dos niveles de lectura: el **call to action (botón)** y la **propuesta de valor (Value Prop)**. En ambos casos, el texto se puede personalizar de acuerdo a las opciones brindadas por Mercado Pago. +----[mlc]---- +Wallet Brick está **compuesto por el botón y la propuesta de valor** (`valueProp`), que puede ser personalizada de acuerdo con las opciones disponibles en Mercado Pago. + +Hay dos temas disponibles: el **default** (también utilizado cuando no se especifica ninguna configuración) y el **dark**. La elección del tema impacta el color de fondo del botón, de la propuesta de valor y el color de las imágenes dentro del botón. + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +Wallet Brick ofrece dos niveles de lectura: el **call to action (botón)** y la **propuesta de valor** (`valueProp`). En ambos casos, el texto se puede personalizar de acuerdo a las opciones brindadas por Mercado Pago. El _call to action_ se divide en dos partes: la acción, determinada por la propiedad `Action`, y el complemento de la acción, determinado por la propiedad `Action Complement`. +------------ + > WARNING > > Atención @@ -23,21 +32,32 @@ El _call to action_ se divide en dos partes: la acción, determinada por la prop Consulta a continuación los textos disponibles para cambiar, cómo se organizan en la pantalla y un ejemplo de código. -----[mla]---- -![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es-mla.png) +----[mlc]---- +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es-all.png) ------------ -----[mlb, mlm, mpe, mco, mlu, mlc]---- -![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es-all.png) +----[mlb, mla, mlm, mpe, mco, mlu]---- +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es.png) ------------ +----[mlb, mlm, mlb]---- | Clave | Opciones disponibles | Predeterminado | |--- |--- | --- | | action | pay, buy | pay | | actionComplement |brand, amount | brand | | valueProp | practicality, convenience_all, security_details, security_safety, smart_option, convenience_credits, payment_methods_logos | security_safety | +------------ +----[mpe, mco, mlu, mlc]---- +| Clave | Opciones disponibles | Predeterminado | +|--- |--- | --- | +| action | pay, buy | pay | +| actionComplement |brand, amount | brand | +| valueProp | practicality, security_details, security_safety, smart_option, payment_methods_logos | security_safety | + +------------ + Consulta los textos relacionados con cada opción: ----[mlm]---- @@ -80,7 +100,6 @@ Consulta los textos relacionados con cada opción: |actionComplement |brand | con Mercado Pago | |actionComplement |amount | Monto de la compra obtenido a través de la preferencia, en el formato de la moneda del pago. | |valueProp |practicality | Usá tarjetas guardadas o dinero en cuenta | -|valueProp |convenience_all | Cuotas con o sin tarjeta | |valueProp |security_details | Todos tus datos protegidos | |valueProp |security_safety | Pagá de forma segura | |valueProp |smart_option| El texto será elegido automáticamente por Wallet Brick para aumentar las posibilidades de venta según las características de la compra. | @@ -121,6 +140,31 @@ Al probar tu integración, asegúrate de que la `action`, `actionComplement` y ` ------------ +----[mlc]---- +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -146,4 +190,6 @@ const customization = { } }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/change-texts.pt.md b/guides/checkout-bricks/wallet-brick/change-texts.pt.md index 33c00118fe..bb15fb1f1d 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.pt.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.pt.md @@ -4,10 +4,19 @@ > > Alterar textos -O Wallet Brick oferece dois níveis de leitura: o **call to action (botão)** e a **proposta de valor (Value Prop)**. Em ambos os casos, o texto pode ser customizado de acordo com as opções disponibilizadas pelo Mercado Pago. +----[mlc]---- +O Wallet Brick é **composto pelo botão e a proposta de valor** (`valueProp`), que pode ser customizada de acordo com as opções disponibilizadas pelo Mercado Pago. + +Há dois temas disponíveis: o **default** (também usado quando nenhuma configuração for especificada) e o **dark**. A escolha do tema impacta a cor de fundo do botão, da proposta de valor e a cor das imagens de dentro do botão. + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- +O Wallet Brick oferece dois níveis de leitura: o **call to action (botão)** e a **proposta de valor** (`valueProp`). Em ambos os casos, o texto pode ser customizado de acordo com as opções disponibilizadas pelo Mercado Pago. O _call to action_ é separado em duas partes: a ação, determinada pela propriedade `Action`, e o complemento da ação, determinado pela propriedade `Action Complement`. +------------ + > WARNING > > Atenção @@ -25,12 +34,23 @@ Confira abaixo os textos disponíveis para alteração, como eles se organizam n ![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-pt.png) +----[mlb, mlm, mlb]---- | Chave | Opções disponíveis | Padrão | |--- |--- | --- | | action | pay, buy | pay | | actionComplement |brand, amount | brand | | valueProp | practicality, convenience_all, security_details, security_safety, smart_option, convenience_credits, payment_methods_logos | security_safety | +------------ +----[mpe, mco, mlu, mlc]---- +| Chave | Opções disponíveis | Padrão | +|--- |--- | --- | +| action | pay, buy | pay | +| actionComplement |brand, amount | brand | +| valueProp | practicality, security_details, security_safety, smart_option, payment_methods_logos | security_safety | + +------------ + Veja quais são os textos relacionados a cada opção: ----[mlb, mla, mlm]---- @@ -57,7 +77,6 @@ Veja quais são os textos relacionados a cada opção: |actionComplement |brand | com Mercado Pago | |actionComplement |amount | Valor da compra obtido através da preferência, no formato da moeda do pagamento. | |valueProp |practicality | Use cartões salvos ou seu saldo em conta | -|valueProp |convenience_all | Parcelamento com ou sem cartão | |valueProp |security_details | Proteção para seus dados | |valueProp |security_safety | Pague com segurança | |valueProp |smart_option| O texto será escolhido automaticamente pelo Wallet Brick para aumentar as chances de venda de acordo com as características da compra. | @@ -98,6 +117,31 @@ Ao testar sua integração verifique se a `action`, o `actionComplement` e a `va ------------ +----[mlc]---- +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -123,4 +167,6 @@ const customization = { } }; ``` -]]] \ No newline at end of file +]]] + +------------ \ No newline at end of file diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.en.md b/guides/checkout-bricks/wallet-brick/default-rendering.en.md index 2d71de499c..bcc028a722 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.en.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.en.md @@ -23,6 +23,56 @@ Before rendering the Wallet Brick, first execute the [initialization steps](/dev Create Brick's startup configuration. +----[mlc]---- +[[[ +```Javascript +const renderWalletBrick = async (bricksBuilder) => { + await bricksBuilder.create("wallet", "walletBrick_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: "default", + customStyle: { + valueProp: "practicality", + valuePropColor: "white", + }, + }, + }); +}; + +renderWalletBrick(bricksBuilder); +``` +```react-jsx +const initialization = { + preferenceId: '', +} + +const customization = { + texts: { + valueProp: 'smart_option', + }, +} + +const onSubmit = async (formData) => { + // callback called when clicking on Wallet Brick + // this is possible because Brick is a button +}; + +const onError = async (error) => { + // callback called for all Brick error cases + console.log(error); +}; + +const onReady = async () => { + // Callback called when Brick is ready. + // Here, you can hide loadings on your website, for example. +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```Javascript const renderWalletBrick = async (bricksBuilder) => { @@ -69,6 +119,8 @@ const onReady = async () => { ``` ]]] +------------ + > WARNING > > Attention diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.es.md b/guides/checkout-bricks/wallet-brick/default-rendering.es.md index 8a95ea0bad..e7289f1403 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.es.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.es.md @@ -23,6 +23,56 @@ Antes de realizar la renderización del Wallet Brick, primero ejecute los [pasos Crea la configuración de inicio de Brick +----[mlc]---- +[[[ +```Javascript +const renderWalletBrick = async (bricksBuilder) => { + await bricksBuilder.create("wallet", "walletBrick_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: "default", + customStyle: { + valueProp: "practicality", + valuePropColor: "white", + }, + }, + }); +}; + +renderWalletBrick(bricksBuilder); +``` +```react-jsx +const initialization = { + preferenceId: '', +} + +const customization = { + texts: { + valueProp: 'smart_option', + }, +} + +const onSubmit = async (formData) => { + // callback llamado al hacer clic en Wallet Brick + // esto es posible porque Brick es un botón +}; + +const onError = async (error) => { + // callback llamado para todos los casos de error de Brick + console.log(error); +}; + +const onReady = async () => { + // Callback llamado cuando Brick esté listo. + // Aquí puedes ocultar loadings en tu sitio, por ejemplo. +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```Javascript const renderWalletBrick = async (bricksBuilder) => { @@ -69,6 +119,8 @@ const onReady = async () => { ``` ]]] +------------ + > WARNING > > Atención @@ -107,12 +159,12 @@ import { Wallet } from '@mercadopago/sdk-react'; El resultado de renderizar el Brick debe ser como se muestra en la imagen a continuación, presentando un texto y un aspecto predeterminado. -----[mla]---- -![wallet-brick-render](checkout-bricks/wallet-brick-render-es-mla.png) +----[mlc]---- +![wallet-brick-render](checkout-bricks/wallet-brick-render-es-all.png) ------------ -----[mlb, mlm, mlu, mlc, mco, mpe]---- -![wallet-brick-render](checkout-bricks/wallet-brick-render-es-all.png) +----[mlb, mlm, mla, mlu, mco, mpe]---- +![wallet-brick-render](checkout-bricks/wallet-brick-render-es.png) ------------ diff --git a/guides/checkout-bricks/wallet-brick/default-rendering.pt.md b/guides/checkout-bricks/wallet-brick/default-rendering.pt.md index 5673b3d194..42731f40c0 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.pt.md @@ -23,6 +23,56 @@ Antes de realizar a renderização do Wallet Brick, primeiro execute os [passos Crie a configuração de inicialização do Brick. +----[mlc]---- +[[[ +```Javascript +const renderWalletBrick = async (bricksBuilder) => { + await bricksBuilder.create("wallet", "walletBrick_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: "default", + customStyle: { + valueProp: "practicality", + valuePropColor: "white", + }, + }, + }); +}; + +renderWalletBrick(bricksBuilder); +``` +```react-jsx +const initialization = { + preferenceId: '', +} + +const customization = { + texts: { + valueProp: 'smart_option', + }, +} + +const onSubmit = async (formData) => { + // callback chamado ao clicar no Wallet Brick + // isso é possível porque o Brick é um botão +}; + +const onError = async (error) => { + // callback chamado para todos os casos de erro do Brick + console.log(error); +}; + +const onReady = async () => { + // Callback chamado quando o Brick estiver pronto. + // Aqui você pode ocultar loadings do seu site, por exemplo. +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```Javascript const renderWalletBrick = async (bricksBuilder) => { @@ -69,6 +119,8 @@ const onReady = async () => { ``` ]]] +------------ + > WARNING > > Atenção From 3a61a4c08a980e3bdfea7dc3276ea75335ceff6e Mon Sep 17 00:00:00 2001 From: Heitor Galdino Date: Wed, 22 Jan 2025 16:29:56 -0300 Subject: [PATCH 4/5] 4 --- .../checkout-pro/integrate-chopro-web.en.md | 49 +++++++++++++++++- .../checkout-pro/integrate-chopro-web.es.md | 51 +++++++++++++++++-- .../checkout-pro/integrate-chopro-web.pt.md | 51 +++++++++++++++++-- 3 files changed, 143 insertions(+), 8 deletions(-) diff --git a/guides/checkout-pro/integrate-chopro-web.en.md b/guides/checkout-pro/integrate-chopro-web.en.md index d7ff3be8f1..f6285afa21 100644 --- a/guides/checkout-pro/integrate-chopro-web.en.md +++ b/guides/checkout-pro/integrate-chopro-web.en.md @@ -6,8 +6,15 @@ First, make sure you have **created the [preference in your backend](/developers/en/docs/checkout-pro/integrate-preferences)**. +----[mlc]---- +Then, install the frontend (`Javascript`) SDK from Mercado Pago, which is used to securely access Mercado Pago's features and add the payment button to your project. + +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- Then, you will need to install the Mercado Pago frontend SDK in your project to add the payment button. +------------ + The installation is basically done in **two steps**: 1. [Add the Mercado Pago SDK to the project with your configured credentials](/developers/en/docs/checkout-pro/integrate-checkout-pro/web#bookmark_add_the_mercado_pago_sdk_to_the_project_with_your_configured_credentials) @@ -19,7 +26,8 @@ The installation is basically done in **two steps**: > > Add the Mercado Pago SDK to the project with your configured credentials -To include the Mercado Pago.js SDK, add the code below to the project's HTML or install the library for ReactJs. +----[mlc]---- +To include the Javascript SDK from Mercado Pago, add the following code to your project's HTML or install the library for ReactJS. [[[ ```html @@ -31,6 +39,22 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- +To include the Mercado Pago.js SDK, add the code below to the project's HTML or install the library for ReactJs. + +[[[ +```html +// SDK MercadoPago.js + +``` +```node +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ + Then, initialize the integration by setting your [public key](/developers/en/docs/checkout-pro/additional-content/your-integrations/credentials) using the following JavaScript code. [[[ @@ -66,6 +90,25 @@ For JavaScript/HTML integrations, via CDN, you will still need to create an iden At the end of the previous step, **initialize your checkout using the ID of the previously created preference with the identifier of the element where the button should be displayed**, if you are using the `Javascript/HTML` integration, or by instantiating the component, in the case from the `React` library, as shown in the examples below. +----[mlc]---- +[[[ +```Javascript +mp.bricks().create("wallet", "wallet_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: 'default', + } +}); +``` +```react-jsx +npm install @mercadopago/sdk-react +``` +]]] + +------------ +----[mla, mlb, mlm, mco, mpe, mlu]---- [[[ ```Javascript mp.bricks().create("wallet", "wallet_container", { @@ -80,10 +123,12 @@ customization: { }); ``` ```react-jsx -' }} customization={{ texts:{ valueProp: 'smart_option'}}} /> +npm install @mercadopago/sdk-react @0.0.23 ``` ]]] +------------ + You will then be able to observe the payment button rendered on your page. ![wallet-render](cow/cow-render-wallet-en.png) diff --git a/guides/checkout-pro/integrate-chopro-web.es.md b/guides/checkout-pro/integrate-chopro-web.es.md index 6b116fa171..860248a504 100644 --- a/guides/checkout-pro/integrate-chopro-web.es.md +++ b/guides/checkout-pro/integrate-chopro-web.es.md @@ -6,7 +6,14 @@ Primero, asegúrate de haber **creado la [preferencia en tu backend](/developers/es/docs/checkout-pro/integrate-preferences)**. -Luego, deberás instalar el SDK de frontend de Mercado Pago en tu proyecto para agregar el botón de pago. +----[mlc]---- +A continuación, instala el SDK de **frontend** (`Javascript`) de Mercado Pago, que se utiliza para acceder de forma segura a las funcionalidades de Mercado Pago y añadir el botón de pago a tu proyecto. + +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- +Luego, deberás instalar el SDK de **frontend** de Mercado Pago en tu proyecto para agregar el botón de pago. + +------------ La instalación se realiza, básicamente, en **dos pasos**: @@ -19,7 +26,8 @@ La instalación se realiza, básicamente, en **dos pasos**: > > Agregar el SDK de Mercado Pago al proyecto -Para incluir el SDK de Mercado Pago.js, agrega el siguiente código al HTML del proyecto o instala la biblioteca para ReactJs. +----[mlc]---- +Para incluir el SDK de Javascript de Mercado Pago, agrega el siguiente código al HTML de tu proyecto o instala la biblioteca para ReactJS. [[[ ```html @@ -31,6 +39,22 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- +Para incluir el SDK de Mercado Pago.js, agrega el siguiente código al HTML del proyecto o instala la biblioteca para ReactJs. + +[[[ +```html +// SDK MercadoPago.js + +``` +```node +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ + Luego, inicializa la integración configurando tu [clave pública](/developers/es/docs/checkout-pro/additional-content/your-integrations/credentials) usando el siguiente código JavaScript. [[[ @@ -64,6 +88,25 @@ Para las integraciones de JavaScript/HTML, a través de CDN, deberás crear un c Al finalizar el paso anterior, **inicializa tu checkout usando el ID de la preferencia previamente creada con el identificador del elemento donde se debe mostrar el botón**, si estás usando la integración `Javascript/HTML`, o instanciando el componente, en el caso de la biblioteca `React`, como se muestra en los ejemplos a continuación. +----[mlc]---- +[[[ +```Javascript +mp.bricks().create("wallet", "wallet_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: 'default', + } +}); +``` +```react-jsx +npm install @mercadopago/sdk-react +``` +]]] + +------------ +----[mla, mlb, mlm, mco, mpe, mlu]---- [[[ ```Javascript mp.bricks().create("wallet", "wallet_container", { @@ -78,10 +121,12 @@ customization: { }); ``` ```react-jsx -' }} customization={{ texts:{ valueProp: 'smart_option'}}} /> +npm install @mercadopago/sdk-react @0.0.23 ``` ]]] +------------ + A continuación, encontrarás el botón de pago que se muestra en tu página. ![wallet-render](cow/cow-render-wallet-es.png) diff --git a/guides/checkout-pro/integrate-chopro-web.pt.md b/guides/checkout-pro/integrate-chopro-web.pt.md index 9a33d0fdc8..87e8c24035 100644 --- a/guides/checkout-pro/integrate-chopro-web.pt.md +++ b/guides/checkout-pro/integrate-chopro-web.pt.md @@ -6,7 +6,14 @@ Primeiro, certifique-se de ter **criado a [preferência no seu backend](/developers/pt/docs/checkout-pro/integrate-preferences)**. -Em seguida, instale o SDK de frontend do Mercado Pago no seu projeto para adicionar o botão de pagamento. +----[mlc]---- +Em seguida, instale o SDK de **frontend** (`Javascript`) do Mercado Pago, usado para acessar as funcionalidades do Mercado Pago com segurança e adicionar o botão de pagamento no seu projeto. + +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- +Em seguida, instale o SDK de **frontend** do Mercado Pago no seu projeto para adicionar o botão de pagamento. + +------------ A instalação é feita em **duas etapas**: @@ -19,7 +26,8 @@ A instalação é feita em **duas etapas**: > > Adicionar o SDK do Mercado Pago ao projeto -Para incluir o SDK do Mercado Pago.js, adicione o seguinte código ao HTML do seu projeto ou instale a biblioteca para ReactJs. +----[mlc]---- +Para incluir o SDK Javascript do Mercado Pago, adicione o seguinte código ao HTML do seu projeto ou instale a biblioteca para ReactJS. [[[ ```html @@ -31,6 +39,22 @@ npm install @mercadopago/sdk-react ``` ]]] +------------ +----[mla, mlm, mlb, mco, mpe, mlu]---- +Para incluir o SDK do Mercado Pago.js, adicione o seguinte código ao HTML do seu projeto ou instale a biblioteca para ReactJs. + +[[[ +```html +// SDK MercadoPago.js + +``` +```node +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ + Em seguida, inicie a integração configurando sua [chave pública](/developers/pt/docs/checkout-pro/additional-content/your-integrations/credentials) usando o seguinte código JavaScript. [[[ @@ -64,6 +88,25 @@ Para integrações JavaScript/HTML, via CDN, você vai precisar ainda criar um c Ao finalizar a etapa anterior, **inicialize seu checkout utilizando o ID da preferência previamente criada com o identificador do elemento onde o botão deverá ser exibido**, caso esteja utilizando a integração `Javascript/HTML`, ou instanciando o componente, no caso da biblioteca `React`, conforme os exemplos abaixo. +----[mlc]---- +[[[ +```Javascript +mp.bricks().create("wallet", "wallet_container", { + initialization: { + preferenceId: "", + }, + customization: { + theme: 'default', + } +}); +``` +```react-jsx +npm install @mercadopago/sdk-react +``` +]]] + +------------ +----[mla, mlb, mlm, mco, mpe, mlu]---- [[[ ```Javascript mp.bricks().create("wallet", "wallet_container", { @@ -78,10 +121,12 @@ customization: { }); ``` ```react-jsx -' }} customization={{ texts:{ valueProp: 'smart_option'}}} /> +npm install @mercadopago/sdk-react @0.0.23 ``` ]]] +------------ + Em seguida, observe o botão de pagamento renderizado em sua página. ![wallet-render](cow/cow-render-wallet-pt.png) From 15523ae00e3d40201b801449048ae3c40885cdbc Mon Sep 17 00:00:00 2001 From: Heitor Galdino Date: Thu, 23 Jan 2025 17:45:11 -0300 Subject: [PATCH 5/5] final --- guides/checkout-bricks/introduction.en.md | 2 +- guides/checkout-bricks/introduction.es.md | 2 +- guides/checkout-bricks/introduction.pt.md | 2 +- guides/checkout-pro/integrate-chopro-web.en.md | 2 +- guides/checkout-pro/integrate-chopro-web.es.md | 2 +- guides/checkout-pro/integrate-chopro-web.pt.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/guides/checkout-bricks/introduction.en.md b/guides/checkout-bricks/introduction.en.md index 461c3c10d1..cd02b3e47b 100644 --- a/guides/checkout-bricks/introduction.en.md +++ b/guides/checkout-bricks/introduction.en.md @@ -12,7 +12,7 @@ The Brick has responsive capabilities in terms of the size within the screen. Th ----[mlc]---- -![responsiveness-mlb](checkout-bricks/responsiveness-mlc-en.png) +![responsiveness-mlc](checkout-bricks/responsiveness-all-en.png) ------------ ----[mlb]---- diff --git a/guides/checkout-bricks/introduction.es.md b/guides/checkout-bricks/introduction.es.md index c7959f7e9a..675b605ec6 100644 --- a/guides/checkout-bricks/introduction.es.md +++ b/guides/checkout-bricks/introduction.es.md @@ -12,7 +12,7 @@ El Brick posee capacidades responsivas en términos del tamaño del espacio en l ----[mlc]---- -![responsiveness-mlb](checkout-bricks/responsiveness-mlc-es.png) +![responsiveness-mlc](checkout-bricks/responsiveness-all-es.png) ------------ ----[mlb]---- diff --git a/guides/checkout-bricks/introduction.pt.md b/guides/checkout-bricks/introduction.pt.md index 5b990f6358..2d1f7c14c6 100644 --- a/guides/checkout-bricks/introduction.pt.md +++ b/guides/checkout-bricks/introduction.pt.md @@ -12,7 +12,7 @@ O Brick possui capacidades responsivas no que tange o tamanho do espaço em tela ----[mlc]---- -![responsiveness-mlb](checkout-bricks/responsiveness-mlc-pt.png) +![responsiveness-mlc](checkout-bricks/responsiveness-all-pt.png) ------------ ----[mlb]---- diff --git a/guides/checkout-pro/integrate-chopro-web.en.md b/guides/checkout-pro/integrate-chopro-web.en.md index f6285afa21..eb4c4712ed 100644 --- a/guides/checkout-pro/integrate-chopro-web.en.md +++ b/guides/checkout-pro/integrate-chopro-web.en.md @@ -129,7 +129,7 @@ npm install @mercadopago/sdk-react @0.0.23 ------------ -You will then be able to observe the payment button rendered on your page. +You will then be able to observe the payment button rendered on your page. If you want to make changes to the text or a visual change, please visit the sections on [Change texts](/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts) and [Change appearance](/developers/en/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance). ![wallet-render](cow/cow-render-wallet-en.png) diff --git a/guides/checkout-pro/integrate-chopro-web.es.md b/guides/checkout-pro/integrate-chopro-web.es.md index 860248a504..a1ba5bb78c 100644 --- a/guides/checkout-pro/integrate-chopro-web.es.md +++ b/guides/checkout-pro/integrate-chopro-web.es.md @@ -127,7 +127,7 @@ npm install @mercadopago/sdk-react @0.0.23 ------------ -A continuación, encontrarás el botón de pago que se muestra en tu página. +A continuación, encontrarás el botón de pago que se muestra en tu página. Si desea hacer **cambios en los textos o un cambio visual**, acceda a las secciones de [Cambiar textos](/developers/es/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts) y [Cambiar de aspecto](/developers/es/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance). ![wallet-render](cow/cow-render-wallet-es.png) diff --git a/guides/checkout-pro/integrate-chopro-web.pt.md b/guides/checkout-pro/integrate-chopro-web.pt.md index 87e8c24035..963ef1eec6 100644 --- a/guides/checkout-pro/integrate-chopro-web.pt.md +++ b/guides/checkout-pro/integrate-chopro-web.pt.md @@ -127,7 +127,7 @@ npm install @mercadopago/sdk-react @0.0.23 ------------ -Em seguida, observe o botão de pagamento renderizado em sua página. +Em seguida, observe o botão de pagamento renderizado em sua página. Caso queira fazer **alterações nos textos ou uma alteração visual**, acesse as seções de [Alterar textos](/developers/pt/docs/checkout-bricks/wallet-brick/visual-customizations/change-texts) e [Alterar visual](/developers/pt/docs/checkout-bricks/wallet-brick/visual-customizations/change-appearance). ![wallet-render](cow/cow-render-wallet-pt.png)