{"id":7586,"date":"2024-06-14T17:59:10","date_gmt":"2024-06-14T17:59:10","guid":{"rendered":"https:\/\/documents.openpay.mx\/?p=7586"},"modified":"2024-12-10T22:58:07","modified_gmt":"2024-12-10T22:58:07","slug":"vtex-dev-2","status":"publish","type":"post","link":"https:\/\/documents-mx-dev.opdevhm.com\/en\/docs\/vtex-dev-2.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>

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

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

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

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>

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

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

\"\"<\/p>

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

\"\"<\/p>

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>

2.- CONFIGURAR DEVICE ID EN GTM (GOOGLE TAG MANAGER)
<\/strong><\/h3>

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>

  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><\/ol>

    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>

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

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

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

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

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

          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>

          \"\"<\/p>

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

          \"\"<\/p>

          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>

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

          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>

          \"\"<\/p>

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

          13. 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>

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

          14. 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>

          <\/p>

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

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

          \"\"<\/p>

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

          \"\"<\/p>

          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>

          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>

          \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 = 'm2f1fmdpdnsmjd29zoekz';\npk = 'pk_d1574d522e004f34ac0fd20e3a60f7e0';\n<\/code><\/pre>
          \"\"<\/p>
          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>