Integración de PixelPay a WooCommerce

WooCommerce es una de las plataformas más populares para desarrollar sitios de comercio electrónico. Con PixelPay como Payment Gateway se pueden aceptar pagos con tarjeta de crédito y débito fácilmente en una tienda WooCommerce. 

Nota: Nuestro Plugin no es compatible con el  checkout basado en bloques de WooCommerce. Actualmente, esta funcionalidad se encuentra en desarrollo activo, lo que nos impide realizar mejoras mientras esté en esta fase. Por lo tanto, le recomendamos que continúe utilizando el checkout basado en shortcodes. Una vez que WooCommerce finalice el desarrollo de la funcionalidad de checkout basado en bloques, evaluaremos la posibilidad de revisar nuestro Plugin para incorporar esta mejora.

 

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 Id en Opciones de API. https://www.pixelpay.app/admin/settings/app

NOTA:

El valor del Secret Key se debe convertir a un MD5 hash, se recomienda la siguiente aplicación para realizar esta conversión: MD5 Hash Generator.

ℹ️ En los siguientes enlaces encontrarás más información sobre: 
- Extraer Key ID en Opciones de API:
https://www.pixelpay.app/admin/settings/app
- MD5 hash:
https://www.md5hashgenerator.com/

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

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

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

Imagen 8: Gestionar plugin.

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

Comprueba el funcionamiento del plugin realizando todo el proceso de pago en la tienda web.

Al momento de finalizar la compra, se podrá ver habilitado PixelPay como método de pago.

Imagen 10: Método de pago PixelPay.

Una vez seleccionado el método de pago PixelPay y realizar el pedido, aparecerá la ventana de pago de PixelPay.

Imagen 11: Confirmación de pago.

 

Usando Inline Payments

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

Desde la configuración del plugin, habilita 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 12: Activar tokenización.

Vista desde el checkout - Usuario con inicio de sesión

Este método de pago también permite a los clientes poder almacenar sus tarjetas de forma segura siguiendo los estándares PCI DSS.

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

Vista desde el checkout - Usuario sin inicio de sesión

Si el cliente no han iniciado sesión, no podrá almacenar sus tarjetas, pero siempre podrá realizar sus transacciones.

Se mostrará una alerta informándole al cliente que si comienza sesión, podrá guardar su tarjeta.

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

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 15: Guardar tarjeta.

Cuando el cliente intente hacer otra compra, la tarjeta almacenada aparecerá de la siguiente forma:

Imagen 16: Pago con tarjeta guardada.