{"id":7409,"date":"2024-04-22T22:10:55","date_gmt":"2024-04-22T22:10:55","guid":{"rendered":"https:\/\/documents.openpay.mx\/?p=7409"},"modified":"2024-11-19T22:47:00","modified_gmt":"2024-11-19T22:47:00","slug":"vtex","status":"publish","type":"post","link":"https:\/\/documents-mx-dev.opdevhm.com\/en\/docs\/vtex.html","title":{"rendered":"Vtex"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

CONFIGURACI\u00d3N DE PLUGIN OPENPAY EN SITIO WEB CON VTEX<\/h2>\n

Para poder configurar el plugin de Openpay en Vtex se debe seguir los siguientes pasos:<\/p>\n

1.- CREAR CUENTA EN OPENPAY<\/strong><\/h3>\n

1. Ir al sitio web de Openpay<\/a> y crear cuenta.<\/p>\n

Note:<\/strong><\/span> Para hacer pruebas, crear la cuenta en ambiente Sandbox<\/a>. Para operaci\u00f3n real, pide tu pase a Producci\u00f3n <\/em><\/span><\/p>\n

2. Entrar al Dashboard con los datos de acceso creados<\/p>\n

3. En barra superior, ir al icono de engrane y hacer click en la opci\u00f3n API Credentials<\/strong><\/p>\n

\"\"<\/p>\n

4. Obtener ID (identificador del comercio), Llave privada y Llave p\u00fablica (esta informaci\u00f3n se usar\u00e1 m\u00e1s adelante).<\/p>\n

\"\"<\/p>\n

Note: <\/strong><\/span>Las Credenciales de API son diferentes en cada ambiente. Debe guardar estos datos por separado y no confundirlos para que los ambientes de Sandbox y Producci\u00f3n funcionen correctamente.<\/span> <\/em><\/p>\n

2.- Configurar Google Tag Manager (GTM)
<\/strong><\/h3>\n

Para que su tienda VTEX funcione correctamente con Openpay, se requieren datos adicionales que se obtienen a trav\u00e9s de Google Tag Manager (recomendamos que se cree una cuenta exclusiva para la integraci\u00f3n de VTEX con Openpay para evitar posibles conflictos con otros contenedores)<\/p>\n

    \n
  1. Descargue desde GitHub la \u00faltima versi\u00f3n del Contenedor GTM VTEX (archivo JSON) y gu\u00e1rdelo en su ordenador (descargue aqu\u00ed<\/a>)<\/li>\n<\/ol>\n

    2. Ir a la URL http:\/\/www.google.com\/tagmanager\/<\/a> . Si no tiene una cuenta, hacer click en Crear cuenta<\/strong>, si ya tiene una cuenta, ir al paso 5<\/p>\n

    3. Capture los datos solicitados y haga click en el bot\u00f3n Guardar<\/strong> al finalizar<\/p>\n

      \n
    1. \n<\/li>
        \n
      1. \n<\/li>
          \n
        1. Nombre de cuenta:<\/strong> por ejemplo “Openpay”<\/li>\n
        2. Pa\u00eds:<\/strong> M\u00e9xico<\/li>\n
        3. Configuraci\u00f3n del contenedor: <\/strong>URL del sitio (es s\u00f3lo informativo)<\/li>\n
        4. Plataforma objetivo:<\/strong> Sitio web<\/li>\n<\/ol>\n\n<\/ol>\n\n<\/ol>

          <\/div>\n

          4. Aceptar T\u00e9rminos de uso para continuar<\/p>\n

          5. Hacer login en http:\/\/www.google.com\/tagmanager\/<\/a> para la tienda que vamos a configurar<\/p>\n

          6. Se mostrar\u00e1 el dashboard principal. Ir al men\u00fa y hacer click en Administrador<\/strong><\/p>\n

          7. En las opciones de contenedor, del lado derecho de la pantalla aparecer\u00e1 su identificador de GTM que tiene un formato como \u00e9ste: GTM-A1B2CDE<\/em>. Debe guardar el ID ya que se utilizar\u00e1 m\u00e1s adelante.<\/p>\n

          \"\"<\/p>\n

          8. Hacer click en Importar contenedor<\/strong><\/p>\n

          \"\"<\/p>\n

          9. Haga click en Elija el archivo del contenedor<\/strong>, seleccione el archivo contenedor que descarg\u00f3 en el paso 1 y presione Abrir o Aceptar<\/p>\n

          10. En la opci\u00f3n Elegir espacio de trabajo presione el bot\u00f3n Nuevo<\/strong><\/p>\n

          11. Elija un nombre para su Espacio de trabajo (Si no est\u00e1 seleccionada, elija la opci\u00f3n Combinar \/ Cambiar el nombre de etiquetas, activadores y variables en conflicto)<\/p>\n

          \"\"<\/p>\n

          12. Presione el bot\u00f3n Confirmar<\/strong><\/p>\n

          13. Guarde los cambios y haga click en el bot\u00f3n superior derecho Enviar<\/strong>. Esto inicia el proceso de publicaci\u00f3n de su contenedor con los cambios que realiz\u00f3 en las variables.<\/p>\n

          \"\"<\/p>\n

          14. En la pantalla \u201cConfiguraci\u00f3n de env\u00edo\u201d validar que se muestre seleccionada la opci\u00f3n \u201cPublicar y crear versi\u00f3n\u201d y que en la parte inferior se muestre \u201cEntorno de publicaci\u00f3n Live\u201d. Hacer click en el bot\u00f3n Publicar<\/strong>.<\/p>\n

          \"\"<\/p>\n

          Si se public\u00f3 correctamente, su GTM est\u00e1 listo para ser consumido por el sistema VTEX, al cual le agregaremos el ID que obtuvimos en el paso 7<\/p>\n

          15. Ingresar a VTEX y en el panel de la izquierda ir a Store Settings<\/strong> (Configuraci\u00f3n de tienda) -> storefront<\/strong> -> Checkout<\/strong> y dar click en el bot\u00f3n con icono de engranaje.<\/p>\n

          \"\" \"\" \"\"<\/p>\n

          16. Hacer click en la opci\u00f3n Checkout<\/strong>, introduzca su GTM ID y presione Guardar<\/strong>. Con esto VTEX insertar\u00e1 el c\u00f3digo de GTM en su tienda en l\u00ednea.<\/p>\n

          <\/p>\n

          3.- CONFIGURAR SCRIPT PARA DEVICE SESSION ID
          <\/strong><\/h3>\n

          En el panel de la izquierda ir a Store Settings (Configuraci\u00f3n de tienda) -> Storefront -> Checkout.<\/p>\n

          \"\"<\/p>\n

          En el encabezado de color azul de la pagina seleccionar la opci\u00f3n Code.<\/p>\n

          \"\"<\/p>\n

          En el archivo con el nombre checkout5-custom.js<\/strong> colocar el siguiente c\u00f3digo, a trav\u00e9s del cual se realizar\u00e1 la ejecuci\u00f3n del c\u00f3digo que generar\u00e1 el device session id requerido para realizar transacciones con tarjeta de cr\u00e9dito o d\u00e9bito.<\/p>\n

          Nota: El n\u00famero en el nombre de este archivo podr\u00eda cambiar dependiendo de la
          configuraci\u00f3n de la plataforma, aseg\u00farese de seleccionar el correcto. El nombre del archivo debe coincidir, a excepci\u00f3n del n\u00famero que como se mencion\u00f3 anteriormente puede ser distinto al especificado en funci\u00f3n de la configuraci\u00f3n de su comercio.<\/p>\n

          \ns = document.createElement('script');\ns.src = \"https:\/\/js.openpay.mx\/openpay-vtex.min.js\";\ns.type = 'text\/javascript';\ns.defer = true;\ndocument.getElementsByTagName('head').item(0).appendChild(s);\ncountry ='MX';\nsandboxMode = true;\nid = 'mxxxxxxxxxxxxxxxxxxx';\npk = 'pk_xxxxxxxxxxxxxxxxx';\n<\/code><\/pre>\n
          \"\"<\/p>\n
          Dentro del c\u00f3digo mencionado anteriormente existen 4 variables relativas al funcionamiento del script. las cuales est\u00e1n asociadas al correcto funcionamiento del mismo, en las \u00faltimas cuatro l\u00edneas del c\u00f3digo reducido, estas variables son las siguientes:<\/p>\n