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..b9aa88e806 100644 --- a/guides/checkout-bricks/common-initialization.en.md +++ b/guides/checkout-bricks/common-initialization.en.md @@ -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. + +``` +```bash +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ + ## 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..938757f925 100644 --- a/guides/checkout-bricks/common-initialization.es.md +++ b/guides/checkout-bricks/common-initialization.es.md @@ -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. + +``` +```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. diff --git a/guides/checkout-bricks/common-initialization.pt.md b/guides/checkout-bricks/common-initialization.pt.md index 8ea9f81764..27d8780ee0 100644 --- a/guides/checkout-bricks/common-initialization.pt.md +++ b/guides/checkout-bricks/common-initialization.pt.md @@ -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. ``` ```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. + +``` +```bash +npm install @mercadopago/sdk-react @0.0.23 +``` +]]] + +------------ + ## Inicializar biblioteca Mercado Pago Em seguida, inicialize a biblioteca Mercado Pago para utilizar Checkout Bricks. diff --git a/guides/checkout-bricks/github-project.en.md b/guides/checkout-bricks/github-project.en.md index fe98eb9169..b461ab1614 100644 --- a/guides/checkout-bricks/github-project.en.md +++ b/guides/checkout-bricks/github-project.en.md @@ -5,6 +5,7 @@ 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) @@ -12,6 +13,7 @@ Click on the links below to access the projects available in the **GitHub** repo ----[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) @@ -19,6 +21,7 @@ Click on the links below to access the projects available in the **GitHub** repo ------------ ----[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) diff --git a/guides/checkout-bricks/github-project.es.md b/guides/checkout-bricks/github-project.es.md index 66e59f5a91..fa29a65254 100644 --- a/guides/checkout-bricks/github-project.es.md +++ b/guides/checkout-bricks/github-project.es.md @@ -5,6 +5,7 @@ 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) @@ -12,6 +13,7 @@ Haz clic en los links a continuación para acceder a los proyectos disponibles e ----[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) @@ -19,6 +21,7 @@ Haz clic en los links a continuación para acceder a los proyectos disponibles e ------------ ----[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) diff --git a/guides/checkout-bricks/github-project.pt.md b/guides/checkout-bricks/github-project.pt.md index b03b79dee0..d46c3f21b9 100644 --- a/guides/checkout-bricks/github-project.pt.md +++ b/guides/checkout-bricks/github-project.pt.md @@ -5,6 +5,7 @@ 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) @@ -12,6 +13,7 @@ Clique nos links abaixo para acessar os projetos disponíveis no repositório do ----[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) @@ -19,6 +21,7 @@ Clique nos links abaixo para acessar os projetos disponíveis no repositório do ------------ ----[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) 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/payment-brick/customers-cards.en.md b/guides/checkout-bricks/payment-brick/customers-cards.en.md index cb1d53fd42..a0789538ea 100644 --- a/guides/checkout-bricks/payment-brick/customers-cards.en.md +++ b/guides/checkout-bricks/payment-brick/customers-cards.en.md @@ -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) ------------ diff --git a/guides/checkout-bricks/payment-brick/customers-cards.es.md b/guides/checkout-bricks/payment-brick/customers-cards.es.md index c3d28ce5d0..baf0b1d01b 100644 --- a/guides/checkout-bricks/payment-brick/customers-cards.es.md +++ b/guides/checkout-bricks/payment-brick/customers-cards.es.md @@ -41,19 +41,14 @@ 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) ------------ @@ -61,7 +56,6 @@ Con solo pasar estas dos propiedades, Brick le dará automáticamente al usuario 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. diff --git a/guides/checkout-bricks/payment-brick/customers-cards.pt.md b/guides/checkout-bricks/payment-brick/customers-cards.pt.md index 81f39bbbab..6241348617 100644 --- a/guides/checkout-bricks/payment-brick/customers-cards.pt.md +++ b/guides/checkout-bricks/payment-brick/customers-cards.pt.md @@ -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. 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 diff --git a/guides/checkout-bricks/wallet-brick/change-appearance.en.md b/guides/checkout-bricks/wallet-brick/change-appearance.en.md index 41473a49a8..5351d8d725 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](/developers/en/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_render_the_brick). 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..59618bddc0 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](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_el_brick). 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..5625e86f92 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](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering#bookmark_renderizar_o_brick). 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..bc4b763d9a 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.en.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.en.md @@ -4,7 +4,54 @@ > > 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. + +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-en.png) + +If the value proposition has not been specified, it will default to `security_safety`. Next, review all the possible texts for the content of the value proposition: + +| Option | Text | +|--- | --- | +|practicality | Use saved cards or your account balance | +|security_details | Protection for your data | +|security_safety (default) | Pay securely | +|smart_option| The text will be chosen automatically by Wallet Brick to increase the chances of sale according to the characteristics of the purchase. | +|payment_methods_logos* | The logos of the available payment methods will be displayed. To configure the payment methods, use the preference. | + +> NOTE +> +> Important +> +> *It is recommended to [initialize with a preference](/developers/en/docs/checkout-bricks/wallet-brick/default-rendering) using the Value Prop `payment_methods_logos`. If the preference has only one valid payment method, it will stop displaying images and will show the text: "**With account money**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[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. @@ -25,15 +72,26 @@ 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 | -See the texts related to each option: +------------ +----[mpe, mco, mlu]---- +| 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 | +------------ ----[mlb, mla, mlm]---- +See the texts related to each option: + | Key | Option | Text | |--- |--- | --- | |action |pay | Pay | @@ -48,8 +106,12 @@ See the texts related to each option: |valueProp |convenience_credits* | Up to 12 Installments without Card | |valueProp |payment_methods_logos** | The logos of the available payment methods will be displayed. To configure the payment methods, use the preference. | +When testing your integration, make sure that the `action`, `actionComplement`, and `valueProp` make sense within their context. + ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- +See the texts related to each option: + | Key | Option | Text | |--- |--- | --- | |action |pay | Pay | @@ -57,16 +119,14 @@ 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. | |valueProp |payment_methods_logos* | The logos of the available payment methods will be displayed. To configure the payment methods, use the preference. | ------------- - When testing your integration, make sure that the `action`, `actionComplement`, and `valueProp` make sense within their context. +------------ ----[mlm]---- > NOTE > @@ -89,7 +149,7 @@ When testing your integration, make sure that the `action`, `actionComplement`, > **It is recommended to [initialize with a preference](/developers/en/docs/checkout-bricks/wallet-brick/default-rendering) using the Value Prop `payment_methods_logos`. If the preference has only one valid payment method, it will stop displaying images and will show the text: "**Account money or installments with no card**". ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- > NOTE > > Important @@ -97,7 +157,7 @@ When testing your integration, make sure that the `action`, `actionComplement`, > *It is recommended to [initialize with a preference](/developers/en/docs/checkout-bricks/wallet-brick/default-rendering) using the Value Prop `payment_methods_logos`. If the preference has only one valid payment method, it will stop displaying images and will show the text: "**With account money**". ------------ - +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -123,4 +183,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..e1c58a670e 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.es.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.es.md @@ -4,7 +4,56 @@ > > 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. + +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es-all.png) + +Caso a proposta de valor não tenha sido especificada, por padrão será security_safety. A seguir, confira todos os textos possíveis para o conteúdo da proposta de valor: + +En caso de que no se haya especificado la propuesta de valor, por defecto será `security_safety`. A continuación, revisa todos los textos posibles para el contenido de la propuesta de valor: + +| Opción | Texto | +|--- | --- | +|practicality | Usa tarjetas guardadas o dinero en cuenta | +|security_details | Todos tus datos protegidos | +|security_safety (por defecto) | Paga de forma segura | +|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. | +|payment_methods_logos* | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_. | + +> NOTE +> +> Importante +> +> *Se recomienda la [inicialización con una preferencia](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering) en el uso de la _Value Prop_ `payment_methods_logos`. En caso de que la preferencia tenga solo un método de pago válido, dejará de mostrar imágenes y mostrará el texto: "**Con dinero disponible**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[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`. @@ -16,31 +65,35 @@ El _call to action_ se divide en dos partes: la acción, determinada por la prop | - | Descripción | | --- | --- | -| Momento de personalización | Al renderizar el Brick | +| Momento de personalización | Al renderizar el Brick. | | Propiedad | customization.texts.{action, actionComplement, valueProp} | | Tipo | String | | Observaciones | Al enviar un texto vacío, la pantalla presentará el texto 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 texto alternativos, reemplazará el texto predeterminado. Para comprobar cuáles son los textos por defecto, consulta la tabla a continuación. | 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) +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es.png) ------------ -----[mlb, mlm, mpe, mco, mlu, mlc]---- -![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-es-all.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]---- | 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 | +| valueProp | practicality, security_details, security_safety, smart_option, payment_methods_logos | security_safety | +------------ +----[mlm]---- Consulta los textos relacionados con cada opción: -----[mlm]---- | Clave | Opción | Texto | |--- |--- | --- | |action |pay | Pagar| @@ -53,10 +106,14 @@ Consulta los textos relacionados con cada opción: |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. | |valueProp |convenience_credits* | Hasta 12 Meses sin Tarjeta | -|valueProp |payment_methods_logos** | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_.. | +|valueProp |payment_methods_logos** | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_. | + +Al probar tu integración, asegúrate de que la `action`, `actionComplement` y `valueProp` tengan sentido en tu contexto. ------------ ----[mlb, mla]---- +Consulta los textos relacionados con cada opción: + | Clave | Opción | Texto | |--- |--- | --- | |action |pay | Pagar| @@ -71,8 +128,12 @@ Consulta los textos relacionados con cada opción: |valueProp |convenience_credits* | Hasta 12 Cuotas sin Tarjeta | |valueProp |payment_methods_logos** | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_. | +Al probar tu integración, asegúrate de que la `action`, `actionComplement` y `valueProp` tengan sentido en tu contexto. + ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- +Consulta los textos relacionados con cada opción: + | Clave | Opción | Texto | |--- |--- | --- | |action |pay | Pagar| @@ -80,16 +141,14 @@ 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. | |valueProp |payment_methods_logos* | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_. | ------------- - Al probar tu integración, asegúrate de que la `action`, `actionComplement` y `valueProp` tengan sentido en tu contexto. +------------ ----[mlm]---- > NOTE > @@ -112,7 +171,7 @@ Al probar tu integración, asegúrate de que la `action`, `actionComplement` y ` > **Se recomienda la [inicialización con una preferencia](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering) en el uso de la _Value Prop_ `payment_methods_logos`. En caso de que la preferencia tenga solo un método de pago válido, dejará de mostrar imágenes y mostrará el texto: "**Con dinero disponible o en cuotas sin tarjeta**". ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- > NOTE > > Importante @@ -120,7 +179,7 @@ Al probar tu integración, asegúrate de que la `action`, `actionComplement` y ` > *Se recomienda la [inicialización con una preferencia](/developers/es/docs/checkout-bricks/wallet-brick/default-rendering) en el uso de la _Value Prop_ `payment_methods_logos`. En caso de que la preferencia tenga solo un método de pago válido, dejará de mostrar imágenes y mostrará el texto: "**Con dinero disponible**". ------------ - +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -146,4 +205,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..5185465fa0 100644 --- a/guides/checkout-bricks/wallet-brick/change-texts.pt.md +++ b/guides/checkout-bricks/wallet-brick/change-texts.pt.md @@ -4,7 +4,54 @@ > > 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. + +![wallet-brick-actioncomplement](checkout-bricks/wallet-brick-actioncomplement-pt.png) + +Caso a proposta de valor não tenha sido especificada, por padrão será security_safety. A seguir, confira todos os textos possíveis para o conteúdo da proposta de valor: + +| Opção | Texto | +|--- | --- | +|practicality | Use cartões salvos ou seu saldo em conta | +|security_details | Proteção para seus dados | +|security_safety (padrão) | Pague com segurança | +|smart_option| O texto será escolhido automaticamente pelo Wallet Brick para aumentar as chances de venda de acordo com as características da compra. | +|payment_methods_logos* | Serão exibidos os logos dos meios de pagamento disponíveis. Para configurar os meios de pagamento, utilize a _preference_. | + +> NOTE +> +> Importante +> +> *É recomendada a [inicialização com uma preferência](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering) no uso da _Value Prop_ `payment_methods_logos`. Caso a preference tenha apenas um meio de pagamento válido, ela deixará de exibir imagens e exibirá o texto: "**Com saldo em conta**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[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`. @@ -25,15 +72,26 @@ 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 | -Veja quais são os textos relacionados a cada opção: +------------ +----[mpe, mco, mlu]---- +| 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 | +------------ ----[mlb, mla, mlm]---- +Veja quais são os textos relacionados a cada opção: + | Chave | Opção | Texto | |--- |--- | --- | |action |pay | Pagar| @@ -48,8 +106,12 @@ Veja quais são os textos relacionados a cada opção: |valueProp |convenience_credits* | Até 12x com Linha de Crédito Mercado Pago | |valueProp |payment_methods_logos** | Serão exibidos os logos dos meios de pagamento disponíveis. Para configurar os meios de pagamento, utilize a _preference_. | +Ao testar sua integração verifique se a `action`, o `actionComplement` e a `valueProp` fazem sentido dentro de seu contexto. + ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- +Veja quais são os textos relacionados a cada opção: + | Chave | Opção | Texto | |--- |--- | --- | |action |pay | Pagar| @@ -57,16 +119,14 @@ 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. | |valueProp |payment_methods_logos* | Serão exibidos os logos dos meios de pagamento disponíveis. Para configurar os meios de pagamento, utilize a _preference_. | ------------- - Ao testar sua integração verifique se a `action`, o `actionComplement` e a `valueProp` fazem sentido dentro de seu contexto. +------------ ----[mlm]---- > NOTE > @@ -89,7 +149,7 @@ Ao testar sua integração verifique se a `action`, o `actionComplement` e a `va > **É recomendada a [inicialização com uma preferência](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering) no uso da _Value Prop_ `payment_methods_logos`. Caso a preference tenha apenas um meio de pagamento válido, ela deixará de exibir imagens e exibirá o texto: "**Com saldo em conta ou parcelado sem cartão**". ------------ -----[mpe, mco, mlu, mlc]---- +----[mpe, mco, mlu]---- > NOTE > > Importante @@ -97,7 +157,7 @@ Ao testar sua integração verifique se a `action`, o `actionComplement` e a `va > *É recomendada a [inicialização com uma preferência](/developers/pt/docs/checkout-bricks/wallet-brick/default-rendering) no uso da _Value Prop_ `payment_methods_logos`. Caso a preference tenha apenas um meio de pagamento válido, ela deixará de exibir imagens e exibirá o texto: "**Com saldo em conta**". ------------ - +----[mlb, mla, mlm, mpe, mco, mlu]---- [[[ ```javascript const settings = { @@ -123,4 +183,7 @@ 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 a0916e6669..bcc028a722 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.en.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.en.md @@ -2,16 +2,77 @@ 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. +----[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) => { @@ -58,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 3ad55d5855..e7289f1403 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.es.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.es.md @@ -2,16 +2,77 @@ 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 +----[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) => { @@ -58,6 +119,8 @@ const onReady = async () => { ``` ]]] +------------ + > WARNING > > Atención @@ -96,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 ef1ff1987b..42731f40c0 100644 --- a/guides/checkout-bricks/wallet-brick/default-rendering.pt.md +++ b/guides/checkout-bricks/wallet-brick/default-rendering.pt.md @@ -2,16 +2,77 @@ 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. +----[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) => { @@ -58,6 +119,8 @@ const onReady = async () => { ``` ]]] +------------ + > WARNING > > Atenção diff --git a/guides/checkout-pro/ads-conversion.en.md b/guides/checkout-pro/ads-conversion.en.md index 2595054fbd..0b292876d4 100644 --- a/guides/checkout-pro/ads-conversion.en.md +++ b/guides/checkout-pro/ads-conversion.en.md @@ -18,8 +18,6 @@ The ads conversion analysis makes it possible to evaluate the relevance and retu > > Only payments approved instantly with credit and debit cards, cash in Mercado Pago or Linha de Crédito will be associated. ------------ - - ----[mlm, mlc, mco, mpe, mlu]---- > NOTE > @@ -28,7 +26,6 @@ The ads conversion analysis makes it possible to evaluate the relevance and retu > Only payments approved instantly with credit and debit cards, or with cash on Mercado Pago will be associated. ------------ - ## Facebook Ads When creating a preference, you can associate it with a pixel (identifier) for tracking Facebook Ads conversions. Checkout Pro's integration. diff --git a/guides/checkout-pro/ads-conversion.es.md b/guides/checkout-pro/ads-conversion.es.md index 4cc5f9e16b..4df601bd93 100644 --- a/guides/checkout-pro/ads-conversion.es.md +++ b/guides/checkout-pro/ads-conversion.es.md @@ -18,8 +18,6 @@ El análisis de conversión de anuncios permite evaluar la relevancia y el retor > > Solo se asociarán pagos aprobados al instante con tarjetas de crédito y débito, efectivo en Mercado Pago o Linha de Crédito. ------------ - - ----[mlm, mlc, mco, mpe, mlu]---- > NOTE > @@ -28,7 +26,6 @@ El análisis de conversión de anuncios permite evaluar la relevancia y el retor > Solo se asociarán pagos aprobados al instante con tarjetas de crédito y débito, o con efectivo en Mercado Pago. ------------ - ## Facebook Ads Al crear una preferencia, puedes asociarla con un pixel (identificador) para rastrear las conversiones de anuncios de Facebook. diff --git a/guides/checkout-pro/ads-conversion.pt.md b/guides/checkout-pro/ads-conversion.pt.md index 3566fa1ca5..39edfd7eed 100644 --- a/guides/checkout-pro/ads-conversion.pt.md +++ b/guides/checkout-pro/ads-conversion.pt.md @@ -27,7 +27,6 @@ A análise da conversão de anúncios possibilita avaliar a relevância e retorn > Só serão associados os pagamentos aprovados instantaneamente com cartões de crédito e débito, ou com dinheiro no Mercado Pago. ------------ - ## Facebook Ads Ao criar uma preferência, você pode associá-la a um pixel (identificator) para acompanhamento das conversões dos seus anúncios através do Facebook Ads. diff --git a/guides/checkout-pro/change-button-appearance.en.md b/guides/checkout-pro/change-button-appearance.en.md index 3c8c709136..8f23690fb7 100644 --- a/guides/checkout-pro/change-button-appearance.en.md +++ b/guides/checkout-pro/change-button-appearance.en.md @@ -4,6 +4,78 @@ > > Change button 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](/developers/en/docs/checkout-pro/integrate-checkout-pro/web). 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', + } +}; +``` +]]] + +## Hide value proposition (valueProp) text + +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]---- It is possible to customize the look of the payment button by defining visual properties with alternative values to the default ones. By default, the payment button renders as in the following image. ![cow-visual-wallet-default](cow/cow-visual-wallet-default.en.png) @@ -51,4 +123,6 @@ const customization = { Such customization examples will generate the following result: -![cow-visual-wallet](cow/cow-visual-wallet.en.png) \ No newline at end of file +![cow-visual-wallet](cow/cow-visual-wallet.en.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/change-button-appearance.es.md b/guides/checkout-pro/change-button-appearance.es.md index d92f5ebb6c..3fc1d360b6 100644 --- a/guides/checkout-pro/change-button-appearance.es.md +++ b/guides/checkout-pro/change-button-appearance.es.md @@ -4,6 +4,78 @@ > > Cambiar la apariencia del botón +----[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](/developers/es/docs/checkout-pro/integrate-checkout-pro/web). 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', + } +}; +``` +]]] + +## Ocultar texto de propuesta de valor (valueProp) + +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]---- Es posible personalizar el aspecto del botón de pago definiendo propiedades visuales con valores alternativos a los predeterminados. De forma predeterminada, el botón de pago se muestra como en la siguiente imagen. ![cow-visual-wallet-default](cow/cow-visual-wallet-default.es.png) @@ -51,4 +123,6 @@ const customization = { Estos ejemplos de personalización generarán el resultado siguiente: -![cow-visual-wallet](cow/cow-visual-wallet.es.png) \ No newline at end of file +![cow-visual-wallet](cow/cow-visual-wallet.es.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/change-button-appearance.pt.md b/guides/checkout-pro/change-button-appearance.pt.md index 2fbe5b9f64..780c0da35d 100644 --- a/guides/checkout-pro/change-button-appearance.pt.md +++ b/guides/checkout-pro/change-button-appearance.pt.md @@ -4,6 +4,78 @@ > > Alterar visual do botão +----[mlc]---- +O **botão de pagamento** 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](/developers/pt/docs/checkout-pro/integrate-checkout-pro/web). 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', + } +}; +``` +]]] + +## Ocultar texto da proposta de valor (valueProp) + +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]---- É possível customizar o visual do botão de pagamento através da definição de propriedades visuais com valores alternativos aos padrões. Por padrão, o botão de pagamento é renderizado como na imagem a seguir. ![cow-visual-wallet-default](cow/cow-visual-wallet-default.pt.png) @@ -51,4 +123,6 @@ const customization = { Tais exemplos de customização irão gerar o seguinte resultado: -![cow-visual-wallet](cow/cow-visual-wallet.pt.png) \ No newline at end of file +![cow-visual-wallet](cow/cow-visual-wallet.pt.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/change-button-texts.en.md b/guides/checkout-pro/change-button-texts.en.md index ba88646c57..3482119729 100644 --- a/guides/checkout-pro/change-button-texts.en.md +++ b/guides/checkout-pro/change-button-texts.en.md @@ -4,6 +4,53 @@ > > Change button texts +----[mlc]---- +The payment button 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. + +![wallet-actioncomplement](cow/wallet-actioncomplement-en.png) + +If the value proposition has not been specified, it will default to `security_safety`. Next, review all the possible texts for the content of the value proposition: + +| Option | Text | +|--- | --- | +|practicality | Use saved cards or your account balance | +|security_details | Protection for your data | +|security_safety (default) | Pay securely | +|smart_option| The text will be chosen automatically by Wallet Brick to increase the chances of sale according to the characteristics of the purchase. | +|payment_methods_logos* | The logos of the available payment methods will be displayed. To configure the payment methods, use the preference. | + +> NOTE +> +> Important +> +> *It is recommended to [initialize with a preference](/developers/en/docs/checkout-pro/integrate-preferences#bookmark_create_preference) using the Value Prop `payment_methods_logos`. If the preference has only one valid payment method, it will stop displaying images and will show the text: "**With account money**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- The payment button offers two reading levels: the **call to action (button)** and the **value proposition**. In both cases, the text can be customized according to the options provided by Mercado Pago. By default, the payment button renders as in the following image. ![cow-text-wallet-default](cow/cow-text-wallet-default.en.png) @@ -27,12 +74,12 @@ Check out the texts related to each option: | Key | Option | Text | | --- |--- | --- | -| action | pay | Pay with Mercado Pago. | -| action | buy | Buy with Mercado Pago. | -| valueProp | practicality| Use saved cards or your account balance. | -| valueProp | convenience | Installment with or without card. | -| valueProp | security_details | Protection for your data. | -| valueProp | security_safety| Pay securely. | +| action | pay | Pay with Mercado Pago | +| action | buy | Buy with Mercado Pago | +| valueProp | practicality| Use saved cards or your account balance | +| valueProp | convenience | Installment with or without card | +| valueProp | security_details | Protection for your data | +| valueProp | security_safety| Pay securely | | valueProp | none | - | Example of customizing button texts: @@ -61,4 +108,6 @@ const customization = { Such customization examples will generate the following result: -![cow-text-wallet](cow/cow-text-wallet.en.png) \ No newline at end of file +![cow-text-wallet](cow/cow-text-wallet.en.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/change-button-texts.es.md b/guides/checkout-pro/change-button-texts.es.md index dfc6080b81..316a4923b8 100644 --- a/guides/checkout-pro/change-button-texts.es.md +++ b/guides/checkout-pro/change-button-texts.es.md @@ -4,6 +4,53 @@ > > Cambiar textos de los botones +----[mlc]---- +El botón de pago 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. + +![wallet-actioncomplement](cow/wallet-actioncomplement-es-all.png) + +En caso de que no se haya especificado la propuesta de valor, por defecto será `security_safety`. A continuación, revisa todos los textos posibles para el contenido de la propuesta de valor: + +| Opción | Texto | +|--- | --- | +|practicality | Usa tarjetas guardadas o dinero en cuenta | +|security_details | Todos tus datos protegidos | +|security_safety (por defecto) | Paga de forma segura | +|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. | +|payment_methods_logos* | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la _preference_. | + +> NOTE +> +> Importante +> +> *Se recomienda la [inicialización con una preferencia](/developers/es/docs/checkout-pro/integrate-preferences#bookmark_create_preference) en el uso de la _Value Prop_ `payment_methods_logos`. En caso de que la preferencia tenga solo un método de pago válido, dejará de mostrar imágenes y mostrará el texto: "**Con dinero disponible**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- El botón de pago ofrece dos niveles de lectura: la **call to action (botón)** y la **propuesta de valor**. En ambos casos, el texto se puede personalizar de acuerdo a las opciones brindadas por Mercado Pago. De forma predeterminada, el botón de pago se muestra como en la siguiente imagen. ![cow-text-wallet-default](cow/cow-text-wallet-default.es.png) @@ -25,33 +72,32 @@ Consulte a continuación los textos disponibles para modificar y un código de e Consulte los textos relacionados con cada opción: -----[mla, mlb, mpe, mco, mlu, mlc]---- - +------------ +----[mla, mlb, mpe, mco, mlu]---- | Clave | Opción | Texto | | --- |--- | --- | -| action | pay | Paga con Mercado Pago. | -| action | buy | Compra con Mercado Pago. | -| valueProp | practicality| Utilice las tarjetas guardadas o el saldo de su cuenta. | -| valueProp | convenience | Cuota con o sin tarjeta.| -| valueProp | security_details | Protección para sus datos. | -| valueProp | security_safety| Pague de forma segura.| +| action | pay | Paga con Mercado Pago | +| action | buy | Compra con Mercado Pago | +| valueProp | practicality| Utilice las tarjetas guardadas o el saldo de su cuenta | +| valueProp | convenience | Cuota con o sin tarjeta| +| valueProp | security_details | Protección para sus datos | +| valueProp | security_safety| Pague de forma segura| | valueProp | none | - | ------------ ----[mlm]---- - | Clave | Opción | Texto | | --- |--- | --- | -| action | pay | Paga con Mercado Pago. | -| action | buy | Compra con Mercado Pago. | -| valueProp | practicality| Utilice las tarjetas guardadas o el saldo de su cuenta. | -| valueProp | convenience | Meses con o sin tarjeta de crédito.| -| valueProp | security_details | Protección para sus datos. | -| valueProp | security_safety| Pague de forma segura.| +| action | pay | Paga con Mercado Pago | +| action | buy | Compra con Mercado Pago | +| valueProp | practicality| Utilice las tarjetas guardadas o el saldo de su cuenta | +| valueProp | convenience | Meses con o sin tarjeta de crédito| +| valueProp | security_details | Protección para sus datos | +| valueProp | security_safety| Pague de forma segura| | valueProp | none | - | ------------ - +----[mlb, mla, mlm, mpe, mco, mlu]---- Ejemplo de personalización de textos de botones: [[[ @@ -78,4 +124,6 @@ const customization = { Estos ejemplos de personalización generarán el resultado siguiente: -![cow-text-wallet](cow/cow-text-wallet.es.png) \ No newline at end of file +![cow-text-wallet](cow/cow-text-wallet.es.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/change-button-texts.pt.md b/guides/checkout-pro/change-button-texts.pt.md index 978559cc87..5bd5a02f1b 100644 --- a/guides/checkout-pro/change-button-texts.pt.md +++ b/guides/checkout-pro/change-button-texts.pt.md @@ -4,6 +4,53 @@ > > Alterar textos do botão +----[mlc]---- +O botão de pagamento é **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. + +![wallet-actioncomplement](cow/wallet-actioncomplement-pt.png) + +Caso a proposta de valor não tenha sido especificada, por padrão será security_safety. A seguir, confira todos os textos possíveis para o conteúdo da proposta de valor: + +| Opção | Texto | +|--- | --- | +|practicality | Use cartões salvos ou seu saldo em conta | +|security_details | Proteção para seus dados | +|security_safety (padrão) | Pague com segurança | +|smart_option| O texto será escolhido automaticamente pelo Wallet Brick para aumentar as chances de venda de acordo com as características da compra. | +|payment_methods_logos* | Serão exibidos os logos dos meios de pagamento disponíveis. Para configurar os meios de pagamento, utilize a _preference_. | + +> NOTE +> +> Importante +> +> *É recomendada a [inicialização com uma preferência](/developers/es/docs/checkout-pro/integrate-preferences#bookmark_crear_preferencia) no uso da _Value Prop_ `payment_methods_logos`. Caso a preference tenha apenas um meio de pagamento válido, ela deixará de exibir imagens e exibirá o texto: "**Com saldo em conta**". + +[[[ +```javascript +const settings = { + ..., + customization: { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } + } +} +``` +```react-jsx +const customization = { + theme: 'default', + customStyle: { + valueProp: 'practicality', + } +}; +``` +]]] + +------------ +----[mlb, mla, mlm, mpe, mco, mlu]---- O botão de pagamento oferece dois níveis de leitura: o **call to action (botão)** e a **proposta de valor**. Em ambos os casos, o texto pode ser customizado de acordo com as opções disponibilizadas pelo Mercado Pago. Por padrão, o botão de pagamento é renderizado como na imagem a seguir. ![cow-text-wallet-default](cow/cow-text-wallet-default.pt.png) @@ -27,12 +74,12 @@ Veja quais são os textos relacionados a cada opção: | Chave | Opção | Texto | | --- |--- | --- | -| action | pay | Pagar com Mercado Pago. | -| action | buy | Comprar com Mercado Pago. | -| valueProp | practicality| Use cartões salvos ou seu saldo em conta. | -| valueProp | convenience | Parcelamento com ou sem cartão. | -| valueProp | security_details | Proteção para seus dados. | -| valueProp | security_safety| Pague com segurança. | +| action | pay | Pagar com Mercado Pago | +| action | buy | Comprar com Mercado Pago | +| valueProp | practicality| Use cartões salvos ou seu saldo em conta | +| valueProp | convenience | Parcelamento com ou sem cartão | +| valueProp | security_details | Proteção para seus dados | +| valueProp | security_safety| Pague com segurança | | valueProp | none | - | Exemplo de customização dos textos do botão: @@ -61,4 +108,6 @@ const customization = { Tais exemplos de customização irão gerar o seguinte resultado: -![cow-text-wallet](cow/cow-text-wallet.pt.png) \ No newline at end of file +![cow-text-wallet](cow/cow-text-wallet.pt.png) + +------------ \ No newline at end of file diff --git a/guides/checkout-pro/integrate-chopro-web.en.md b/guides/checkout-pro/integrate-chopro-web.en.md index d7ff3be8f1..24fb78d25d 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,13 +123,15 @@ 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. +------------ + +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 button texts](/developers/en/docs/checkout-pro/checkout-customization/user-interface/change-button-texts) and [Change button appearance](/developers/en/docs/checkout-pro/checkout-customization/user-interface/change-button-appearance). -![wallet-render](cow/cow-render-wallet-en.png) +![wallet-render](cow/wallet-render-en.png) In the example above, a payment button will be rendered and will be responsible for opening Checkout Pro. If you want the experience with Checkout Pro to be done in an **external tab**, check the section [Opening Schema](/developers/en/docs/checkout-pro/checkout-customization/user-interface/opening-schema) diff --git a/guides/checkout-pro/integrate-chopro-web.es.md b/guides/checkout-pro/integrate-chopro-web.es.md index 6b116fa171..cc83dc68ed 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,13 +121,15 @@ 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. +------------ + +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 de los botones](/developers/es/docs/checkout-pro/checkout-customization/user-interface/change-button-texts) y [Cambiar la apariencia del botón](/developers/es/docs/checkout-pro/checkout-customization/user-interface/change-button-appearance). -![wallet-render](cow/cow-render-wallet-es.png) +![wallet-render](cow/wallet-render-es.png) En el ejemplo anterior, se renderizará un botón de pago que será responsable por abrir el Checkout Pro. Si deseas que la experiencia con Checkout Pro se realice en una **pestaña externa**, consulta la sección [Esquema de apertura](/developers/es/docs/checkout-pro/checkout-customization/user-interface/opening-schema) diff --git a/guides/checkout-pro/integrate-chopro-web.pt.md b/guides/checkout-pro/integrate-chopro-web.pt.md index 9a33d0fdc8..6fb5006209 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,13 +121,15 @@ 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. +------------ + +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 do botão](/developers/pt/docs/checkout-pro/checkout-customization/user-interface/change-button-texts) e [Alterar visual do botão](/developers/pt/docs/checkout-pro/checkout-customization/user-interface/change-button-appearance). -![wallet-render](cow/cow-render-wallet-pt.png) +![wallet-render](cow/wallet-render-pt.png) No exemplo acima, um botão de pagamento será renderizado e ficará responsável por abrir o Checkout Pro. Caso queira que a experiência com Checkout Pro seja feita em uma **aba externa**, veja a seção [Esquema de abertura](/developers/pt/docs/checkout-pro/checkout-customization/user-interface/opening-schema) diff --git a/images/checkout-bricks/payment-brick-cc.en.gif b/images/checkout-bricks/payment-brick-saved-cards-en.gif similarity index 100% rename from images/checkout-bricks/payment-brick-cc.en.gif rename to images/checkout-bricks/payment-brick-saved-cards-en.gif diff --git a/images/checkout-bricks/payment-brick-cc.es.gif b/images/checkout-bricks/payment-brick-saved-cards-es.gif similarity index 100% rename from images/checkout-bricks/payment-brick-cc.es.gif rename to images/checkout-bricks/payment-brick-saved-cards-es.gif diff --git a/images/checkout-bricks/payment-brick-cc.pt.gif b/images/checkout-bricks/payment-brick-saved-cards-pt.gif similarity index 100% rename from images/checkout-bricks/payment-brick-cc.pt.gif rename to images/checkout-bricks/payment-brick-saved-cards-pt.gif diff --git a/images/cow/cow-render-wallet-en-rebranding.png b/images/cow/cow-render-wallet-en-rebranding.png deleted file mode 100644 index 884754b386..0000000000 Binary files a/images/cow/cow-render-wallet-en-rebranding.png and /dev/null differ diff --git a/images/cow/cow-render-wallet-es-rebranding.png b/images/cow/cow-render-wallet-es-rebranding.png deleted file mode 100644 index b3da7cb8cd..0000000000 Binary files a/images/cow/cow-render-wallet-es-rebranding.png and /dev/null differ diff --git a/images/cow/cow-render-wallet-pt-rebranding.png b/images/cow/cow-render-wallet-pt-rebranding.png deleted file mode 100644 index 6b9bcf3da6..0000000000 Binary files a/images/cow/cow-render-wallet-pt-rebranding.png and /dev/null differ diff --git a/images/cow/wallet-actioncomplement-en-rebranding.png b/images/cow/wallet-actioncomplement-en-rebranding.png new file mode 100644 index 0000000000..3420152562 Binary files /dev/null and b/images/cow/wallet-actioncomplement-en-rebranding.png differ diff --git a/images/cow/wallet-actioncomplement-en.png b/images/cow/wallet-actioncomplement-en.png new file mode 100644 index 0000000000..164b8c0fb9 Binary files /dev/null and b/images/cow/wallet-actioncomplement-en.png differ diff --git a/images/cow/wallet-actioncomplement-es-all-rebranding.png b/images/cow/wallet-actioncomplement-es-all-rebranding.png new file mode 100644 index 0000000000..665f587d3e Binary files /dev/null and b/images/cow/wallet-actioncomplement-es-all-rebranding.png differ diff --git a/images/cow/wallet-actioncomplement-es-all.png b/images/cow/wallet-actioncomplement-es-all.png new file mode 100644 index 0000000000..82cf71b80d Binary files /dev/null and b/images/cow/wallet-actioncomplement-es-all.png differ diff --git a/images/cow/wallet-actioncomplement-es-mla-rebranding.png b/images/cow/wallet-actioncomplement-es-mla-rebranding.png new file mode 100644 index 0000000000..6b1b9af795 Binary files /dev/null and b/images/cow/wallet-actioncomplement-es-mla-rebranding.png differ diff --git a/images/cow/wallet-actioncomplement-es-mla.png b/images/cow/wallet-actioncomplement-es-mla.png new file mode 100644 index 0000000000..82cf71b80d Binary files /dev/null and b/images/cow/wallet-actioncomplement-es-mla.png differ diff --git a/images/cow/wallet-actioncomplement-pt-rebranding.png b/images/cow/wallet-actioncomplement-pt-rebranding.png new file mode 100644 index 0000000000..4742a95a67 Binary files /dev/null and b/images/cow/wallet-actioncomplement-pt-rebranding.png differ diff --git a/images/cow/wallet-actioncomplement-pt.png b/images/cow/wallet-actioncomplement-pt.png new file mode 100644 index 0000000000..17311d93e2 Binary files /dev/null and b/images/cow/wallet-actioncomplement-pt.png differ diff --git a/images/cow/wallet-render-en-rebranding.png b/images/cow/wallet-render-en-rebranding.png new file mode 100644 index 0000000000..ad992eedbc Binary files /dev/null and b/images/cow/wallet-render-en-rebranding.png differ diff --git a/images/cow/cow-render-wallet-en.png b/images/cow/wallet-render-en.png similarity index 100% rename from images/cow/cow-render-wallet-en.png rename to images/cow/wallet-render-en.png diff --git a/images/cow/wallet-render-es-mla-rebranding.png b/images/cow/wallet-render-es-mla-rebranding.png new file mode 100644 index 0000000000..f280a83cc7 Binary files /dev/null and b/images/cow/wallet-render-es-mla-rebranding.png differ diff --git a/images/cow/cow-render-wallet-es.png b/images/cow/wallet-render-es-mla.png similarity index 100% rename from images/cow/cow-render-wallet-es.png rename to images/cow/wallet-render-es-mla.png diff --git a/images/cow/wallet-render-es-rebranding.png b/images/cow/wallet-render-es-rebranding.png new file mode 100644 index 0000000000..28417f2f02 Binary files /dev/null and b/images/cow/wallet-render-es-rebranding.png differ diff --git a/images/cow/wallet-render-es.png b/images/cow/wallet-render-es.png new file mode 100644 index 0000000000..df8a04191b Binary files /dev/null and b/images/cow/wallet-render-es.png differ diff --git a/images/cow/wallet-render-pt-rebranding.png b/images/cow/wallet-render-pt-rebranding.png new file mode 100644 index 0000000000..71ef08ebbc Binary files /dev/null and b/images/cow/wallet-render-pt-rebranding.png differ diff --git a/images/cow/cow-render-wallet-pt.png b/images/cow/wallet-render-pt.png similarity index 100% rename from images/cow/cow-render-wallet-pt.png rename to images/cow/wallet-render-pt.png