{"id":3632,"date":"2021-03-11T16:07:20","date_gmt":"2021-03-11T16:07:20","guid":{"rendered":"https:\/\/documents.openpay.mx\/?p=3632"},"modified":"2024-04-24T00:04:52","modified_gmt":"2024-04-24T00:04:52","slug":"vtex-borrador","status":"publish","type":"post","link":"https:\/\/documents-mx-dev.opdevhm.com\/en\/docs\/vtex-borrador.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 el siguiente flujo:<\/p>\n

<\/p>\n

A continuaci\u00f3n, el detalle de cada punto se\u00f1alado en el diagrama:<\/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>

\"\"
<\/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 DEVICE ID EN GTM (GOOGLE TAG MANAGER)<\/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
        \n
      1. \n
          \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<\/li>\n<\/ol>\n<\/li>\n<\/ol>\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. Aparecer\u00e1 el contenedor en su Tag Manager del lado izquierdo. Haga click en Variables<\/strong><\/p>\n

          <\/p>\n

          14. Ir a Variables definidas por el usuario y cambie los valores como se se\u00f1ala:<\/p>\n

          <\/p>\n

          Si es ambiente Sandbox<\/strong><\/p>\n

            \n
          1. openpay_merchant_id:<\/strong> ID de su comercio en Openpay<\/li>\n
          2. openpay_public_key:<\/strong> Llave p\u00fablica de su comercio en Openpay<\/li>\n
          3. openpay_sandbox_mode:<\/strong> true<\/li>\n<\/ol>\n

            Si es ambiente Production<\/strong><\/p>\n

              \n
            1. \n
                \n
              1. \n
                  \n
                1. openpay_merchant_id:<\/strong> ID de su comercio en Openpay<\/li>\n
                2. openpay_public_key:<\/strong> Llave p\u00fablica de su comercio en Openpay<\/li>\n
                3. op_sandbox_mode:<\/strong> false<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

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

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

                    \n
                  1. \n
                      \n
                    1. Ingresar a Vtex<\/a> e ir a Panel de Administraci\u00f3n > Configuraci\u00f3n de la tienda > Checkout<\/strong> y dar click en el bot\u00f3n con icono de engrane<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

                      18. 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 PAYMENT PROVIDER EN VTEX<\/strong><\/h3>\n
                        \n
                      1. Ir al administrador de Payment Provider de Vtex<\/a><\/li>\n<\/ol>\n

                        2. Acceder a Transacciones > Pagos > Configuraci\u00f3n > Afiliaciones<\/strong><\/p>\n

                        3. Hacer click en la opci\u00f3n OpenpayV2<\/strong><\/p>\n

                        \"\"<\/figure>\n

                        4. Completar la configuraci\u00f3n de la conexi\u00f3n, contemplando los siguientes puntos:<\/p>\n

                          \n
                        1. \n
                            \n
                          1.  Seleccione el modo de operaci\u00f3n: <\/strong>Test (para realizar pruebas) o Producci\u00f3n.<\/li>\n
                          2. Autenticaci\u00f3n con Openpay: <\/strong>Ingresar las credenciales de API obtenidas en el dashboard Openpay.\n
                              \n
                            1. Application Key:<\/strong> ID del Comercio (merchantId)<\/li>\n
                            2. Application Token:<\/strong> Llave privada (obtenida de Openpay)<\/li>\n<\/ol>\n<\/li>\n
                            3. Pa\u00eds: <\/strong>Seleccionar el pa\u00eds donde se encuentra (M\u00e9xico, Colombia)<\/li>\n
                            4. How to process the charge? <\/strong>Define el tipo de cargo que se realizar\u00e1: Directo, 3D Secure o Autenticaci\u00f3n Selectiva.<\/li>\n
                            5. Affiliation Name (opcional): <\/strong>Alias asociado a una afiliaci\u00f3n.<\/li>\n
                            6.  <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
                              \"\"<\/figure>\n

                              5. Hacer click en el bot\u00f3n Salva<\/strong><\/p>\n

                              6. Configurar en Vtex los m\u00e9todos de pago a emplear en el e-commerce (ver detalle<\/a>)<\/p>\n

                              7. Configurar en Openpay los webhook (ver detalle<\/a>)<\/p>\n

                              4.- VALIDACI\u00d3N DE CONFIGURACI\u00d3N CORRECTA<\/strong><\/h3>\n
                                \n
                              1. Realizar procesos de compra con diferentes escenarios (puede ver mas detalle en la secci\u00f3n Testing<\/a>)<\/li>\n<\/ol>\n

                                2. Verificar que el resultado para cada escenario es el esperado. En caso de no obtener el resultado esperado se deber\u00e1 validar nuevamente la configuraci\u00f3n y en caso de tener un resultado exitoso, se deber\u00e1 solicitar a Openpay una cuenta de producci\u00f3n.<\/p>\n

                                Note:<\/strong><\/span> En el caso del m\u00e9todo de Pago en Tiendas, se debe validar que en la pantalla \u201cConfirmaci\u00f3n de pago\u201d se muestre correctamente el bot\u00f3n \u201cReferencia\u201d como se ve en la siguiente imagen <\/em><\/p>\n

                                \"Validaci\u00f3n\"<\/p>\n

                                CONFIGURAR M\u00c9TODOS DE PAGO EN VTEX<\/h2>\n

                                En Openpay contamos con 3 formas de pago:<\/p>\n

                                  \n
                                1. \n
                                    \n
                                  1. TARJETAS<\/strong>
                                    Aqu\u00ed se consideran todos los pagos por Tarjeta de Cr\u00e9dito, D\u00e9bito y Servicio, siempre y cuando est\u00e9n operados por Visa, MasterCard, American Express, Carnet. Tambi\u00e9n se incluye los pagos con Puntos Bancomer, Santander y Scotiabank (POINTS).<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
                                      \n
                                    1. \n
                                        \n
                                      1. TRANSFERENCIAS INTERBANCARIAS<\/strong>
                                        Son las transferencias interbancarias, como pueden ser SPEI o simplemente dar los datos de la cuenta CLABE para mostrar datos de transferencia del comercio.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
                                          \n
                                        1. PAGO EN TIENDAS<\/strong>
                                          Se muestra el n\u00famero de referencia para realizar el pago en cualquiera de los establecimientos de la Red Paynet. Los establecimientos se pueden consultar en paynet.com.mx<\/li>\n<\/ol>\n

                                          Para configurar cualquiera de los m\u00e9todos de pago mencionados debemos de:<\/p>\n

                                            \n
                                          1. Ir al administrador de Payment Provider en Vtex<\/a><\/li>\n<\/ol>\n

                                            2. Acceder al path Transacciones > Pagos > Configuraci\u00f3n > Planes de pago<\/strong> y hacer click en el bot\u00f3n Agregar<\/strong><\/p>\n

                                            <\/p>\n

                                            3. Se mostrar\u00e1 una pantalla con diversas opciones donde hay que buscar y seleccionar el m\u00e9todo de pago a configurar.<\/p>\n

                                            Nota: S\u00f3lo para los m\u00e9todos de pago Pago en tiendas y Transferencias interbancarias seguir las siguientes indicaciones:<\/strong><\/span><\/em><\/span><\/p>\n

                                              \n
                                            1. \n
                                                \n
                                              1. \n
                                                  \n
                                                1. Pago en tiendas:<\/strong> Buscar en secci\u00f3n de Pago personalizado con la leyenda \u201cPago en tienda\u201d.
                                                  <\/li>\n
                                                2. Transferencias interbancarias:<\/strong> Buscar en secci\u00f3n de Otro con la leyenda \u201cSPEI\u201d.
                                                  <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

                                                  4. En la pantalla de configuraci\u00f3n del m\u00e9todo de pago seleccionado, hacer click en la afiliaci\u00f3n de Openpay y marcarlo como activo<\/p>\n

                                                  <\/p>\n

                                                  5. En la barra superior capturar la leyenda que corresponda al m\u00e9todo de pago que se est\u00e1 configurando.Note:<\/strong> S\u00f3lo para los m\u00e9todos de pago Pago en tiendas<\/strong> and Wire transfers<\/strong> seguir las siguientes indicaciones:<\/em><\/p>\n

                                                    \n
                                                  1. Pago en tiendas:<\/strong> Pago en Tienda<\/li>\n
                                                  2. Transferencias Interbancarias:<\/strong> SPEI<\/li>\n<\/ol>\n

                                                    Note:<\/strong><\/span> Debido a configuraciones del conector, la leyenda a colocar en cada m\u00e9todo de pago deber\u00e1 de ser tal cual se indica en este paso<\/strong><\/span><\/em><\/p>\n

                                                    CONFIGURACI\u00d3N DE WEBHOOKS<\/h2>\n
                                                    En las configuraciones, es necesario la creaci\u00f3n de un Webhoook, para notificar cuando se ha realizado un cargo a una tarjeta o cuando un dep\u00f3sito se ha realizado con \u00e9xito. La creaci\u00f3n de un Webhook dentro de Openpay se realiza como se indica a continuaci\u00f3n:<\/section>\n
                                                    \n
                                                     <\/div>\n

                                                    1.- Dentro de su dashboard ya sea Sandbox \u00f3 Producci\u00f3n, en la barra superior hacer click en el icono de engrane y seleccionar \u201cConfiguraciones\u201d.<\/p>\n

                                                    \"\"<\/p>\n

                                                    2.- Hacer click en el bot\u00f3n Agregar<\/strong><\/p>\n

                                                    \"\"<\/p>\n

                                                    3.- Se abrir\u00e1 el formulario como se muestra en la imagen:<\/p>\n

                                                    \"\"<\/p>\n

                                                     – El formulario deber\u00e1 de ser llenado de la siguiente manera.<\/strong><\/p>\n