Integración de PixelPay a WooCommerce

Utilizando el Pluging de PixelPay se pueden aceptar pagos con tarjeta de crédito y débito fácilmente en una tienda WooCommerce. 

Nota: El Plugin es compatible con el checkout basado en 
bloques de WooCommerce. Sin embargo, aún se sigue ofreciendo 
compatibilidad con el checkout clásico. Puede elegir la opción
que mejor se adapte a sus necesidades.

Plug-in:  PixelPay WooComerce Payment Gateway

Imagen 1: Plugin PixelPay WooComerce.

Paso 1

Ingresa al panel administrativo del sitio web y haz clic en "Plugins".

Escribe "PixelPay" en el buscador e instala el plugin de PixelPay para WooCommerce.

Imagen 2: Instalar plugin.

Al finalizar la instalación debes activar el plugin, dando clic en el botón "Activar".

Imagen 3: Activar plugin.

NOTA:

En caso de no tener instalado el plugin de WooCommerce, es necesario agregarlo y activarlo.

Imagen 4: Instalar y activar plugin de WooCommerce.

Paso 2

Ingresa a tu cuenta en la plataforma de PixelPay de acuerdo a tu servicio y dirígete a la sección de 'Preferencias', seguido de 'Opciones del Api'.

En la sección encontrarás el Key ID y el Secret Key, los cuales debes tomar nota porque se ingresarán en un formulario detallado en el Paso 6.

Con estas llaves el comercio podrá aceptar pagos en el sitio web WordPress.

Imagen 5: Key ID y Secret Key en Opciones de API. 

Paso 3

Para continuar, es necesario saber a cuál dominio se redireccionarán las transacciones. 

Al ingresar a su cuenta de PixelPay, en la barra de dirección encontrará el dominio.

Ejemplo: https://{dominio}/admin/dashboard

Como se muestra en la siguiente imagen, el dominio en este caso es: pixelpay.app

Imagen 6: Encontrar dominio.

NOTA: El dominio no incluye el prefijo http o https.

Paso 4

En la barra lateral, hacer clic en la sección de "Ajustes", debajo de "WooCommerce". Luego, es necesario hacer clic en la pestaña de "Pagos".

Imagen 7: Ajuste de pago.

Paso 5

Buscar en la lista de "Métodos de Pago", la opción de "PixelPay".

Presionar en el botón "Gestionar" para poder acceder a la configuración del Plugin.

Imagen 8: Gestionar plugin.

Nota: Para evitar inconvenientes con la carga de tarjetas en
la tokenización, recomendamos configurar PixelPay como el 
primer método de pago, dándole mayor prioridad.

 

Paso 6

Ingresa las llaves extraídas del Paso 2 y el dominio extraído en el Paso 3 en los campos correspondientes. Luego, guarda los cambios. 

Imagen 9: Ingresar Key, Secret Key y Endpoint.

NOTA: El dominio no incluye el prefijo http o https.
Incluir el prefijo en la casilla PixelPay Endpoint Domain
generará un error.

Paso 7 : Tipos de modo checkout

7.1 Habilitar el modo de checkout basado en bloques

Si desea utilizar el modo de checkout basado en bloques tras actualizar el plugin, seguir los siguientes pasos:

• Activar la interfaz de pago moderna en la configuración de WooCommerce.

Imagen 10: Activar Interfaz de pago moderna.

• Ir a la sección de páginas de WooCommerce.
• Seleccionar la página de "Finalizar compra" o a la página donde el comercio tenga la finalización de la compra y editarla para aplicar los cambios del checkout basado en bloques.

Imagen 11: Configurar página.

• Acceder a editar la página de finalizar compra
• Presionar la opción de Transformar en bloques y Guardar

Imagen 12: Activar checkout en bloques

7.2 Habilitar el modo clásico de checkout

• Desactivar la interfaz de pago moderna en la configuración de WooCommerce.

Imagen 13: Desactivar Interfaz de pago moderna

• Ir a la sección de páginas de WooCommerce.
• Seleccionar la página de "Finalizar compra" o a la página donde el comercio tenga la finalización de la compra y editarla, asegurándose de que está configurada correctamente con el checkout clásico.

Imagen 14: Configurar página

• Verificar la compatibilidad de los métodos de pago: en caso de tener previamente activado el Modo en Bloques, al seleccionar las Opciones de pago, PixelPay debería aparecer como incompatible con este modo.

Imagen 15: Seleccionar opciones de pago

Imagen 16: Activar modo clásico

• Seleccionar botón de Cambiado al pago Clásico y guardar

Una vez seleccionado el Tipo de modo del checkout y realizar el pedido, aparecerá la ventana de pago de PixelPay.

Imagen 17: Confirmación de pago.

 

Paso 8: Inline Payments

Nota: Consulta la disponibilidad de este servicio con el 
agente de cuentas de tu banco

Desde la configuración del plugin, habilitar la opción de "Activate tokenization". Este método de pago permitirá a los clientes realizar sus pagos sin ningún redireccionamiento, ya que el proceso de checkout se realizara desde la página web.

Imagen 18: Activar tokenización.

Importante: En el checkout de bloques el campo de teléfono por
defecto es opcional, hacer ajuste correspondiente para que
sea obligatorio.
->Seleccionar campos de dirección
->En barra derecha seleccionar obligatorio el campo teléfono

Imagen 19: Campos de dirección

Imagen 20: Teléfono Obligatorio

Inline Payments también permite a los clientes poder almacenar sus tarjetas de forma segura siguiendo los estándares PCI DSS.

8.1 Vista desde el checkout - Usuario con inicio de sesión en la página web

Si el cliente ha iniciado sesión, podrá almacenar sus tarjetas al momento de realizar sus transacciones.

Imagen 21: Formulario de pago para usuario sesión iniciada.

8.2 Vista desde el checkout - Usuario sin inicio de sesión en la página web

Si el cliente no ha iniciado sesión, no podrá almacenar sus tarjetas, pero podrá realizar transacciones sin ningún inconveniente.

Se mostrará un texto informativo al cliente que invitará a iniciar sesión para poder almacenar sus tarjetas.

Imagen 22: Formulario de pago para usuario sin sesión iniciada.

8.3 Almacenamiento de tarjetas

Para que el cliente pueda almacenar su tarjeta deberá seleccionar la opción Guardar Tarjeta, una vez inició su sesión, y al realizar el pago se almacenará automáticamente.

Imagen 23: Guardar tarjeta.

Al momento en el que el cliente desee realizar otra compra, la tarjeta almacenada aparecerá de la siguiente forma:

Imagen 24: Pago con tarjeta guardada.