El Smart Checkout ha sido actualizado.

Ahora los formularios de tarjeta de crédito, débito y private

label se encuentran insertados en un iframe, lo que aumenta la seguridad. Además, ya no es
necesario recurrir al Google Tag Manager para utilizar personalizaciones de JavaScript.
El cambio para el nuevo ambiente es manual. La explicación de como hacerlo está al final de este
artículo.

¿Qué ha cambiado?
Iframe para pagos con tarjeta
Las formas de pago con tarjeta de crédito, débito y private label (tarjetas emitidas por su marca y
aceptadas sólo dentro de su red de tiendas) ahora están aislados en un iframe. Esto hace que la
personalización de JavaScript sea imposible, lo que aumenta la seguridad de su tienda.
Por otra parte, su HTML ha cambiado. Esto significa que si su tienda ha personalizado estos tipos
de pago con CSS, este debe ser revisado.

Nueva opción de cálculo de flete por geocoordenada

A través de esta función, se puede establecer regiones de entrega utilizando como base un punto
geográfico (latitud y longitud) en lugar de un código postal.
Para conocer el detalle de cómo utilizar esta función, lea el artículo de Geolocalización en el
checkout.
Atención: Una vez que la API key sea informada en las configuraciones del checkout, la
geolocalización ya estará visible en el checkout de su tienda, independiente de la activación de la
nueva versión del SmartCheckout.

Título de la página
Ahora se puede cambiar el título de la página de Smart Checkout, que aparece en la barra o en la
pestaña del navegador. Para ello, en el módulo Portal, acceda a las configuraciones del website
deseado, y luego a la pestaña Checkout. En Configuraciones, cambie el campo Título del Sitio.
Un cuadro de preview, a la derecha del campo, muestra cómo quedará el nuevo título.
Activando la nueva versión del Smart Checkout
JavaScript personalizado
Ahora se puede utilizar los archivos checkout5-custom.js y orderplaced2-
custom.js para insertar sus personalizaciones de JavaScript en el Checkout y en la pantalla de
pedido terminado, respectivamente.
Para ello, acceda al módulo Portal, después a las configuraciones del website deseado y, a
continuación, a la pestaña Código. El archivo estará en la lista a la derecha. Sólo hay que hacer clic
en él para ver el código actual y realizar cambios.
Personalizar archivos de JavaScript puede ser dañino para su Checkout. VTEX no recomienda
personalizaciones y no es responsable de los daños causados por este código.
Atención: no utilize estos archivos para insertar tags de marketing e integraciones. Si las necesita,
utilize Google Tag Manager.

PayPal Plus
La nueva versión del Smart Checkout soporta el método de pago PayPal Plus, que permite que el
pago se realize directamente en su website, sin redirigir sus clientes, es decir, permite el checkout
transparente.

Google Enhanced Ecommerce

Ahora Smart Checkout suma al data layer informaciones para utilización de Google Enhanced
Ecommerce. Para aprender a crear estas tags, acceda a la documentación de Google:
https://developers.google.com/tag-manager/enhanced-ecommerce.

Cómo actualizar para la nueva versión del Smart Checkout

Para migrar a la nueva versión del Smart Checkout, acceda al módulo Portal, haga clic en las
configuraciones del website deseado y luego en la pestaña Checkout. Usted verá la pantalla
Actualización del Smart Checkout:
Activando la nueva versión del Checkout en beta
Antes de llevar la nueva versión para producción, usted puede hacer pruebas en el ambiente beta.
Simplemente haga clic en el botón Ambiente de Pruebas y después en Guardar. Quedese
tranquilo: esto no afecta en nada la tienda en producción.

Archivos creados: “checkout5-custom.css”, “checkout5-custom.js” y “orderplaced2-custom.js”.

Después de hacer clic en Guardar, haga clic en la pestaña Código. Usted verá que tres archivos
han sido creados: checkout5-custom.css, checkout5-custom.js y orderplaced2-
custom.js. Por conveniencia, el primer archivo (CSS) se crea con exactamente el mismo
contenido del archivo checkout-custom.css (el CSS del antiguo Checkout).

Esto significa que usted puede cambiar el checkout5-custom.css sin miedo. Este archivo
sólo se utilizará en la nueva versión del Smart Checkout.
Los archivos checkout5-custom.js y orderplaced2-custom.js son creados vacíos.
VTEX recomienda que los deje así, ya que la inserción de código JavaScript en el Checkout es
causa muy frecuente de errores.

Pruebas en el ambiente beta

El ambiente beta está hecho para el desarrollo de nuevas features de VTEX. Por eso, no
garantizamos su estabilidad.
Ahora, debemos comprobar en el ambiente beta si el layout de su Checkout está correcto.
 Abra su tienda en ambiente beta: http://{AccountName}.vtexcommercebeta.com.br/;
 Añada un artículo al carrito;
 Abra el carrito;
 Compruebe si la URL sigue en ambiente beta (http://
{AccountName}.vtexcommercebeta.com.br/checkout/);
 Siga con el proceso de compra hasta la etapa de pago;
 Compruebe si el formulario de tarjeta de crédito tiene el layout correcto.

El layout de formulario de tarjeta de crédito está correcto en esa tienda.

Si el layout del formulario de tarjeta de crédito no está cierto, haga las correcciones de CSS
apropiadas en el archivo checkout5-custom.css.

Si usted ha añadido scripts a través de Google Tag Manager para cambiar el comportamiento de la
etapa de pago, es probable que estes scripts ya no funcionen.

El cambio de la versión en producción

Activando la nueva versión del Checkout en producción.

Ahora que tiene todo arreglado, vamos a activar la nueva versión en producción. Regrese al Portal,
haga clic en Ambiente de Producción y, a continuación, haga clic en Guardar. Listo! Su tienda ha
migrado a la nueva versión del Checkout con todas las nuevas features disponibles.

¿Quién debe prestar atención a estos cambios?

Si su tienda no tiene los medios de pago por tarjeta de crédito, tarjeta de débito o private label, o si
usted no ha cambiado el aspecto del formulario de tarjeta de crédito, no necesita nada más que hacer
clic en el botón de actualización del Smart Checkout.