Integra Flow como sistema de pago

Si tienes una página ecommerce desarrollada con OpenCart, puedes integrar Flow mediante los plugins y comenzar a operar con pagos online.

¿No eres parte de Flow?

Antes de continuar debes registrarte en Flow y seleccionar la opción Deseo utilizar Flow para recibir pagos. Si aún no estas registrado puedes hacerlo aquí:

Regístrate

Modelo de Integración

Toda la comunicación entre el comercio y Flow viaja firmada electrónicamente con certificados digitales. Las firmas digitales son verificadas en cada punto de comunicación, asegurando la confiabilidad entre el emisor y el receptor.

A continuación te explicamos los dos modelos de integración con Flow el indirecto y directo.

Modo indirecto

Con este modo de integración, antes de enviar la transacción a Webpay, Servipag o Multicaja, se presenta una página de Flow con los datos de la transacción. Además, en dicha página se muestran los medios de pago habilitados por el vendedor, permitiendo al pagador elegir el deseado.

Modo indirecto
Método de integración indirecto

Descripción de acciones

Descripción
1 El comercio, utilizando el Kit, envía a Flow una Orden de Pago firmada electrónicamente.
2 Flow recibe la Orden y verifica que provenga de un comercio registrado. En este paso presenta una página para que el pagador confirme la orden y seleccione el medio de pago deseado: Webpay, Servipag o Multicaja.
3 Flow deriva al pagador a la página del medio de pago (Webpay, Servipag o Multicaja) seleccionado.
4 El medio de pago envía a Flow el resultado de la transacción y solicita confirmarla.
5 Flow envía el resultado del pago a la página de confirmación del comercio.
6 El comercio recibe la confirmación del pago. La página del comercio tiene 15 segundos para responder la recepción de la confirmación. Si su página de confirmación no responde en ese tiempo y la transacción había sido aprobada por el medio de pago, la transacción se dará por aprobada.
7 Flow envía al medio de pago la confirmación de la transacción.
8 Si el pago es exitoso, Flow deriva el control a la página de éxito del comercio. Además, se envía un email notificado del pago al vendedor y al pagador.
9 Si el pago es rechazado, Flow despliega su página de fracaso.
10 Desde la página de fracaso de Flow, si el cliente hace click en el botón (Volver al comercio) se invoca la página de fracaso del comercio.

Modo directo

Con este modo de integración Flow envía la transacción directo a Webpay, Servipag o Multicaja según corresponda, sin presentar una página de Flow con los datos de la transacción.

Modo directo
Método de integración directo

Descripción de acciones

Descripción
1 El comercio utilizando el Kit, envía a Flow una Orden de Pago firmada electrónicamente.
2 Flow deriva al pagador a la página del medio de pago (Webpay, Servipag o Multicaja) informado desde el Kit.
3 El medio de pago envía a Flow el resultado de la transacción y solicita confirmarla.
4 Flow envía el resultado del pago a la página de confirmación del comercio.
5 El comercio recibe la confirmación del pago. La página del comercio tiene 15 segundos para responder la recepción de la confirmación. Si su página de confirmación no responde en ese tiempo y la transacción había sido aprobada por el medio de pago, la transacción se dará por aprobada.
6 Flow envía al medio de pago la confirmación de la transacción.
7 Si el pago es exitoso Flow deriva el control a la página de éxito del comercio. Además, se envía un email notificado del pago al vendedor y al pagador.
8 Si el pago es rechazado Flow despliega su página de fracaso.
9 Desde la página de fracaso de Flow si el cliente hace clic en el botón (Volver al comercio) se invoca la página de fracaso del comercio.

Requisitos

Para integrar a Flow tu sitio de E-commerce basado en OpenCart necesitas:

Agregar y configurar pesos chilenos como moneda

Para asegurarse que los pagos sean correctamente informados por Flow a su sitio de E-commerce basado en OpenCart, es importante que se utilice el peso chileno como moneda.

Para agregar el peso chileno como moneda realiza lo siguiente:

  1. Entrar a la administración del portal.
  2. Ir a Sistema > Localización > Monedas.
  3. Hacer clic en + para insertar una nueva moneda.
Agregar moneda
Agregar moneda

Configurar los campos de la siguiente manera:

  1. Agregar Peso Chileno como título.
  2. Agregar CLP como código.
  3. Agregar $ como símbolo a la izquierda.
  4. Dejar símbolo a derecha en blanco.
  5. Agregar 0 como decimales.
  6. Agregar 1.0000 como valor.
  7. Seleccionar el estado como activo.
  8. Guardar.
Campos de moneda
Campos de moneda

Para configurar el peso chileno como moneda realiza lo siguiente:

  1. Entrar a la administración de OpenCart
  2. Ir a Sistema > Configuración
  3. Seleccionar la tienda que deseas configurar y hacer clic en Editar
Configurar moneda
Configurar moneda

Configurar los campos de la siguiente manera:

  1. Hacer clic en el tab Local
  2. Seleccionar Chile como país
  3. Seleccionar la región donde funcionas
  4. En Moneda seleccionar Pesos como predeterminada
  5. Seleccionar Si en Auto Actualización de moneda (divisas)
  6. Clic en Grabar
Campos de configuración
Campos de configuración

Descargar e instalar

Plugin Flow Webpay, Flow Servipag y Flow Multicaja Opencart 2.2 o inferior

Descargar

Plugin Flow Webpay, Flow Servipag y Flow Multicaja Opencart 2.3

Descargar

Descomprime el archivo zip y sube los archivos vía FTP al sitio donde tiene su OpenCart. Debes agregar el contenido de las carpetas admin y catalog en las mismas carpetas de OpenCart.

Actualizar plugin de Flow

Si ya posees una versión del plugin de Flow instalada en tu OpenCart y deseas actualizarla, debes reemplazar los archivos antiguos por los archivos actualizados.
Para ello basta arrastrar las carpetas admin y catalog, obtenidas al descomprimir la nueva versión del plugin, en las mismas carpetas de OpenCart. Es importante que todos los archivos sean reemplazados.

Luego, debes configurar el plugin tal como se muestra en el paso Configurar el Plugin de Flow.

Habilitación del Plugins OpenCart de Flow

Para habilitar cada plugin sigue las siguientes instrucciones

  1. En el menú de administración de OpenCart seleccionar Extensiones > Pagos
  2. Podrás encontrar las extensiones Flow Webpay, Flow Servipag y Flow Multicaja
  3. Instala las extensiones que desees utilizar, haciendo clic en instalar
Instalar módulo Flow
Instalar módulo Flow

Configuración del medio de pago Flow

Para cada extensión de Flow instalada, debes hacer click en editar y configurar los siguientes datos

Configurar forma de pago
Configurar forma de pago
Dato Descripción
Nombre medio de pago Ingresa el nombre que se mostrará a las personas cuando paguen en tu tienda virtual. Algunos ejemplos:
  • Flow Webpay: Pagar con tarjetas de crédito o débito bancarias
  • Flow Servipag: Pagar con tarjetas CMR, Ripley o Cencosud
  • Flow Multicaja: Pagar en efectivo en locales adheridos a Multicaja
  • Flow: Pagar mediante plataforma de pagos Flow con Webpay, Servipag y Multicaja
Plataforma de Flow Selecciona si usarás la Plataforma de pruebas o la Plataforma oficial de Flow.
La plataforma de producción es la plataforma oficial donde se realizarán las transacciones.
Si antes deseas hacer pruebas selecciona la Plataforma de Pruebas. Para usar la Plataforma de Pruebas deberás registrarte en el sitio de pruebas http://flow.tuxpan.com y obtener el certificado digital desde ahí. Una vez concluyas de hacer pruebas, tendrás que configurar nuevamente el plugin con el certificado digital descargado del sitio oficial.
ID Comercio Flow Ingresa el email con el que estás registrado en Flow
Url de retorno Sólo aplica al plugin de Multicaja. Corresponde a la página donde volverá el cliente una vez que generó el cupón de pago. Recomendamos que dicha url sea la página principal de tu tienda virtual.
Llave Privada Flow Sube el archivo del Certificado Digital descargado desde Flow.
Modo de acceso Aquí debes seleccionar el tipo de integración deseado.
  • Ingresar directamente: Corresponde al modo directo de integración. Una vez que el cliente confirme el pago en el sitio web del comercio, se abrirá inmediatamente la pantalla de pagos de Webpay, Servipag o Multicaja, según corresponda.
  • Mostrar pasarela Flow: Corresponde al modo indirecto de integración. Previo al pago en Webpay, Servipag o Multicaja, se mostrará una ventana de Flow donde se indican los datos de la transacción (comercio, concepto, monto, email del pagador, etc). También se mostrarán al pagador los medios de pago que tenga habilitados el vendedor (Webpay, Servipag y/o Multicaja), pudiendo elegir el que desee.
Estado de pago exitoso Selecciona Processed.
Estado de pago Fallido Selecciona Failed.
Zona geográfica Selecciona Todas las zonas.
Estado Selecciona Habilitado.
Orden Corresponde al orden en que se mostrarán los medios de pago. Puedes usar el valor que quieras.
Clic en Guardar Para guardar tu configuración

Validar configuración seleccionada

Antes de comenzar a operar mediante Flow, te recomendamos validar la siguiente configuración:

Si estás utilizando el sitio de pruebas (http://flow.tuxpan.com), puedes simular un pago mediante Webpay con las siguientes tarjetas:

Pago Exitoso

Dato Valor
N° Tarjeta de Crédito 4051885600446623
Año de Expiración Cualquiera
Mes de Expiración Cualquiera
CVV 123
En la simulación del banco usar:
Rut 11.111.111-1
Clave 123

Pago Rechazado

Dato Valor
N° Tarjeta de Crédito 5186059559590568
Año de Expiración Cualquiera
Mes de Expiración Cualquiera
CVV 123
En la simulación del banco usar:
Rut 11.111.111-1
Clave 123

Opciones avanzadas

A continuación se muestran opciones adicionales para personalizar la configuración del plugin. Estas opciones requieren cierto nivel de conocimiento sobre HTML y programación.

Agregar imagen al medio de pago: Debes seguir las siguientes instrucciones para mostrar una determinada imagen cuando el cliente elija el medio por el cual pagará.

  1. Abrir los archivos:
    • catalog/model/payment/flow.php para Flow Webpay.
    • catalog/model/payment/flow_servipag.php para Flow Servipag.
    • catalog/model/payment/flow_multicaja.php para Flow Multicaja.
  2. Añadir el link de la imagen deseada en la línea 36
    • 'title'=> '<img src="http://flow.cl/img/logo_webpay.png" style="vertical-align:middle; width: 100px;" /> '.$this->config->get('flow_title'),
    • 'title'=> '<img src="http://flow.cl/img/BP_Servipag_peq.png" style="vertical-align:middle; width: 100px;" /> '.$this->config->get('flow_servipag_title'),
    • 'title'=> '<img src="http://flow.cl/img/logo_multicaja_150_55.png" style="vertical-align:middle; width: 100px;" /> '.$this->config->get('flow_multicaja_title'),
  3. El valor de src permite insertar la URL de la imagen deseada, mientras que el valor de width permite ajustar el ancho de la imagen.
  4. Finalmente se deben guardar los cambios y revisar que la imagen se muestre correctamente
Vista opciones Avanzadas
Vista opciones avanzadas