Opencart One Page Checkout – User Manual

1.0 Introducción

La mayoría de los visitantes abandonan la compra del producto deseado simplemente porque el proceso les resulta complejo y largo. Esto, en última instancia, genera un número cada vez mayor de carritos abandonados. Para controlar las tasas de salida y abandono de carritos, Knowband ofrece… Pago en una página de OpenCart Pro Plugin para tiendas OpenCart. Además, al implementar One Page Checkout en tu sitio de comercio electrónico, puedes mejorar las tasas de conversión, ya que reemplaza la página de pago de varios pasos con una página única.

Vista móvil:

Características destacadas de la extensión OpenCart One Page Checkout:

1. La extensión ofrece la funcionalidad de pago como invitado mediante la cual los usuarios pueden completar fácil y rápidamente sus pedidos como clientes invitados sin crear una nueva cuenta en la tienda en línea.
2. La extensión OpenCart Fast Checkout permite a los clientes iniciar sesión rápidamente en el sitio web utilizando sus cuentas de Google, Facebook y Paypal.
3. El administrador puede personalizar fácilmente los campos de la página de pago desde el backend de la extensión OpenCart One Page Checkout Pro. Puede mostrar u ocultar cualquiera de los campos de la página de pago, o configurarlos como opcionales u obligatorios. También puede reorganizar los campos de posición con la función de arrastrar y soltar.
4. El propietario de la tienda puede personalizar fácilmente la apariencia de la página de pago, incluido el cambio del color de los botones, el color de fondo de los botones, el color del texto, etc.
5. OpenCart One Page Supercheckout ofrece compatibilidad con múltiples tiendas y varios idiomas.
6. La extensión OpenCart One Step Checkout admite casi todos los principales métodos de envío y pago, lo que aumenta la confianza de los clientes para elegir el método deseado desde la página de pago.
7. El comercio electrónico puede aplicar cualquiera de los tres diseños de caja diferentes: de 1, 2 o 3 columnas. Los campos se pueden reorganizar fácilmente arrastrando y soltando.
8. El módulo OpenCart Quick Checkout ofrece integración con MailChimp, Klaviyo y SendinBlue que le permite sincronizar la base de datos de sus usuarios automáticamente con sus cuentas sin ningún esfuerzo manual.
9. El comerciante electrónico también puede personalizar la apariencia de la extensión a través de CSS y JS personalizados.
10. El módulo OpenCart Responsive One Step Checkout ofrece la función de modo de prueba mediante la cual el propietario de la tienda puede verificar y ver las personalizaciones realizadas antes de publicarlas en el sitio web.
11. El módulo de Pago Simplificado de OpenCart ofrece la función Ship2Pay, que permite al propietario de la tienda asociar métodos de pago específicos con los métodos de entrega seleccionados. Esta función oculta todos los demás métodos de pago al seleccionar un método de entrega específico y muestra al usuario solo los métodos de pago asociados al método de entrega seleccionado.

2.0 Guía de instalación de Extensión OpenCart One Page Checkout

Antes de comenzar el proceso de instalación, debes comprar el Extensión OpenCart One Page Checkout Desde la tienda Knowband. Una vez realizada la compra, recibirás los siguientes archivos en tu correo electrónico registrado.

• Código fuente de la extensión OpenCart One Page Checkout en formato de archivo comprimido.
• Manual de usuario de la extensión OpenCart One Page Checkout.

Para instalar OpenCart Single Page Checkout en su tienda online, siga estos pasos: 1. Descomprima el archivo zip. Verá las carpetas como se muestra en la imagen a continuación.

2. Copie todas las carpetas del archivo zip en el directorio raíz de la configuración de OpenCart a través del administrador FTP.

• Después de descomprimir la carpeta, encontrará un archivo supercheckout_pro.ocmod.xml como se muestra a continuación:

• Ahora, en el panel de administración, haz clic en Extensiones en el menú lateral izquierdo. Luego, haz clic en Instalador de extensiones ( Inicio->extensión).

• Ahora, cargue el archivo supercheckout_pro.ocmod.xml. Se mostrará un mensaje de confirmación una vez cargado.

• Después de cargar el archivo, vaya a  Inicio->Modificación

• Encontrará un archivo llamado Supercheckout Pro v2.8 (esto significa que su ocmod se ha instalado correctamente). Haga clic en el icono “+” correspondiente para activarlo. El icono verde se vuelve rojo, como se muestra a continuación.

• Por último, haga clic en el botón actualizar (esto es obligatorio).

¿Entonces  Pago en una página de OpenCart Pro Ya está instalado y listo para usar en tu tienda. Ve al menú de administración y haz clic en Extensiones y luego en Módulos. Haz clic en el botón de configuración junto a Supercheckout de Knowband.

3.0 Interfaz de administración de Módulo de pago responsivo de un solo paso de OpenCart

Tras instalar correctamente One Page Checkout para OpenCart, podrá configurar los campos del formulario de pago según sus necesidades. Debe navegar por la configuración en el orden indicado: Panel de administrador > Prórrogas de tiempo para presentar declaraciones de impuestos > Módulos > Supercheckout de Knowband

La interfaz de administración fácil de entender de Pago en una página de OpenCart Pro se divide en diez secciones, a saber: 1. Configuración general 2. Personalizador 3. Configuración de inicio de sesión 4. Dirección de pago 5. Dirección de envío 6. Método de envío 7. Ship2Pay 8. Método de pago 9. Carrito 10. Diseño 11. Boletín informativo Cada una de estas secciones se ha discutido a continuación:

Configuración general de 3.1

• Activar/Desactivar: Usando esta opción, puede habilitar o deshabilitar la funcionalidad completa de la Pago en una página de OpenCart Pro Plugin de OFF a ON.
• Habilitar la opción de boletín informativo: Puede habilitar o deshabilitar la opción de boletín informativo en la página de Supercheckout. Una vez habilitado este botón, se aplicarán las siguientes condiciones: a.) La opción de boletín informativo solo será visible para los clientes que realicen la compra como invitados si ha habilitado la opción “Registrar automáticamente como invitado”. b.) La opción de boletín informativo siempre será visible para los clientes que creen una cuenta nueva. c.) La opción de boletín informativo nunca será visible para los clientes que hayan iniciado sesión.
• Registrar invitado automáticamente: Puede habilitar esta opción para registrar automáticamente a los clientes invitados en su tienda. Al habilitarla, podrá registrar a sus clientes en la tienda y enviarles una contraseña generada a su correo electrónico.
• Registrar Cuenta: Al habilitar este campo, puede mostrar un campo de contraseña en la página de supercheckout para que los nuevos usuarios puedan establecer fácilmente la contraseña deseada para su cuenta.
• Seleccione la opción predeterminada al finalizar la compra: Con esta opción, puede establecer una opción predeterminada en la sección de inicio de sesión de su OpenCart Supercheckout de una página página de las opciones como Invitado, Iniciar sesión y Registrarse.
• Deshabilitar invitado: Puede habilitar o deshabilitar la funcionalidad de invitado para los usuarios en la sección de inicio de sesión de One Page Checkout.
• Agregar estilo personalizado: Con esta opción, puede agregar o incluir un estilo personalizado a la página de Supercheckout. Para aplicar CSS personalizado, escriba el CSS en el cuadro de texto a la derecha de la etiqueta “Agregar estilo personalizado”. Por ejemplo, puede cambiar el color de los botones de la página de Supercheckout.
• Agregar monto mínimo para mostrar el banner de envío gratuito: Desde esta pestaña, el administrador puede agregar una cantidad mínima requerida después de la cual los clientes serán elegibles para obtener el envío gratuito de su pedido.
  
• Habilitar detección automática de país: Después de habilitar esta función, la extensión detectará y completará automáticamente el país del usuario en la sección de país.
  
• Validación en línea: Con esta función, la extensión muestra un error cada vez que el usuario no completa un campo obligatorio en la página de pago.
  
• Habilitar la dirección automática de Google para completar: Tan pronto como el usuario comienza a escribir su dirección, la extensión sugiere su dirección si esta función está habilitada.
  
• Habilitar o deshabilitar nueva plantilla: Con la extensión OpenCart One Page Checkout, el propietario de la tienda puede aplicar la plantilla de pago nueva o antigua según su deseo desde la configuración general.
• Modo de prueba: Esta opción le ayuda a habilitar o deshabilitar la funcionalidad del modo de prueba de este Extensión de pago de una página de OpenCart.
• URL de prueba: Una vez que habilite el modo de prueba, puede configurar una URL de supercheckout donde puede probar la funcionalidad del pago en una página.

Personalizador

Desde la pestaña Personalizador, puede personalizar el color de fondo del botón, el color del borde del botón, la vista previa del botón, el color del texto del botón, el color inferior del borde del botón, el color de fondo del botón Mi cuenta, el color de fondo del botón Iniciar sesión, el color de fondo del botón Iniciar sesión, el color de fondo del botón Cerrar sesión, el color de fondo del botón Código de cupón, el color de fondo del botón Código de cupón, etc.

• Color de fondo de la barra de envío gratuito: Esta sección le permite cambiar el color de fondo de la barra de envío gratuito en la página de pago.
• CSS y JS personalizados: Esta sección le permite personalizar la apariencia de la página de pago con CSS y JS personalizados.

3.2 Login

En esta pestaña, encontrará opciones para configurar las opciones de inicio de sesión de Facebook, Google y Paypal como se muestra a continuación.

• Habilitar el inicio de sesión de Facebook: Con esta opción, puede habilitar o deshabilitar la opción de inicio de sesión de Facebook en One Page Checkout.
• ID de la aplicación de Facebook: Esta opción le permite configurar el ID de la aplicación de Facebook, que se puede generar usando la cuenta de desarrollador de Facebook.
• Secreto de la aplicación de Facebook: Con esta opción, configure la clave secreta generada mediante la cuenta de desarrollador de Facebook.
• Habilitar el inicio de sesión de Google: Con esta opción, puede habilitar o deshabilitar la opción de inicio de sesión de Google en One Page Checkout.
• ID de la aplicación de Google: Esta opción le permite configurar el ID de GoogleApp.
• El ID de cliente de Google: Este campo le permite configurar el ID de cliente de Google creado desde la consola de Google.
• Secreto de la aplicación de Google: Con esta opción, puedes configurar la clave secreta de la aplicación generada mediante la consola de Google.
• Habilitar el inicio de sesión de PayPal: Con esta opción, puede permitir que sus clientes inicien sesión a través de sus cuentas de Paypal.
• ID de cliente de PayPal: Esta opción le permite agregar su ID de cliente de PayPal.
• Secreto del cliente de PayPal: Esta opción le permite agregar su ID secreto de cliente de PayPal.

Para obtener instrucciones detalladas sobre cómo generar el ID de la aplicación, la clave secreta de la aplicación y el ID del cliente, pase a la siguiente sección.

3.2.1 ¿Cómo configurar el inicio de sesión de Facebook?

La aplicación de Facebook se puede crear siguiendo los pasos que se mencionan a continuación:

1: Vaya a la URL indicada: https://developers.facebook.com/apps/

2: Haga clic en el botón “Crear aplicación”.

3 y 4: Seleccione la opción “Construir experiencias conectadas” opción y haga clic en el botón ‘Continuar’.

5 y 6: Agregue “Nombre para mostrar de la aplicación”, “Correo electrónico de contacto de la aplicación” y seleccione “¿Tiene una cuenta de administrador comercial?” y luego haga clic en el botón “Crear aplicación”.

7 y 8: Después de hacer clic en Crear ID de aplicación, deberá pasar por una verificación de seguridad como se muestra:

9: Haga clic en la pestaña “Configuración”.

Amablemente agregar eliminar URL de devolución de llamada. Puede consultar la descripción de la URL de devolución de llamada de eliminación desde aquí: https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/

10-15: En el menú desplegable, encontrará dos opciones: Básica y Avanzada. Haga clic en “Básica”. A continuación, introduzca su “Dominio de la aplicación”, “URL de privacidad”, “URL de términos de servicio”, “Añadir icono”, “Seleccionar categoría” y haga clic en el botón “Guardar cambios”.

App Dominios:

tudominio.com es correcta

tudominio.com/tienda es incorrecto

www.dominio.com es incorrecto

16: Ahora haga clic en “+Agregar plataforma”.

17: Y seleccione Sitio web como Plataforma.

18 y 19: Ahora ingrese la URL de su sitio.

20 y 21: Haga clic en “Productos+” y haga clic en el botón Configurar desde la pestaña de inicio de sesión de Facebook.

22: Seleccione la web como plataforma para la aplicación.

23: Agregue la URL del sitio y haga clic en guardar.

24-26: Haga clic en Configuración y agregue una URI de redireccionamiento OAuth válida.

URI de redireccionamiento OAuth válidos:

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

27: Seleccione la opción “En desarrollo” .

28 y 29: Elija una categoría del menú desplegable y haga clic en el botón “Cambiar modo”.

30: Copie el ID de la aplicación y el secreto de la aplicación y péguelos en los campos provistos en el módulo.

Paso final:

1. Inicie sesión con el SDK de JavaScript.

Establezca este campo como Sí.

2. Dominios permitidos para el SDK de JavaScript

Establecer el dominio de la tienda.

Nota: aquí el dominio debe ingresarse con el siguiente tipo.

https://octest.knowband.com

3.2.2 ¿Cómo configurar el inicio de sesión de Google?

Siga los pasos a continuación para obtener el ID y el secreto del cliente. 1. Vaya al enlace “ https://console.developers.google.com/project 2. Haga clic en “Crear un proyecto”.

3. Ingrese el nombre del proyecto y el nombre de la organización que desee y haga clic en “Crear”.

4. Vaya al Administrador de API, haga clic en el menú de la izquierda, haga clic en API y servicios y luego haga clic en Crear credenciales.

5. Seleccione la opción ID de cliente OAuth.

6. Haga clic en el botón “Configurar pantalla de consentimiento”. Introduzca el “ID de correo electrónico”, el “Nombre del producto” y haga clic en el botón “Guardar”.

7. Seleccione la opción Externa y haga clic en el botón “Crear”.

Utilice la siguiente URL de redireccionamiento https://your_store_url/index.php?route=supercheckout/supercheckout 8. Agregue el nombre de la aplicación y el correo electrónico de soporte al usuario.

9. Haga clic en Agregar dominio y agregue el dominio autorizado y luego haga clic en Guardar y continuar.

10. Haga clic en el botón Guardar y continuar.

Haga clic en +Agregar usuarios.

11. Agregue un nombre de usuario y haga clic en el botón Agregar.

12. El usuario agregado será visible, luego haga clic en el botón Guardar y continuar.

13. Haga clic en la pantalla de contenido de Juramento y luego haga clic en el botón Publicar Agregar.

14. Haga clic en Credenciales y luego en el botón +Crear credenciales y luego seleccione ID de cliente de Oath.

15. Agregue el tipo de aplicación y el nombre y luego haga clic en el botón Agregar.

16. Agregue las URL y luego haga clic en el botón Crear.

17. Copie y pegue el ID de cliente y el secreto de cliente en el campo de texto que se muestra a continuación en el módulo de pago de una página de Prestashop.

Cómo generar la clave API de Google:

1) Vaya al Administrador de API, haga clic en el menú de la izquierda, haga clic en API y servicios y luego haga clic en Credenciales.

2) Haga clic en Crear credenciales y luego seleccione la clave API.

3) Copie la clave API e ingrésela en el campo Id. de la aplicación de Google de la página de inicio de sesión del módulo del extremo administrador.

3.3 Dirección de pago

Esta pestaña contiene configuraciones para los campos que se mostrarán en la sección Dirección de pago o facturación en la página de pago como se muestra a continuación.

1. Consta de dos secciones: la de la izquierda es para clientes invitados y la de la derecha, para clientes registrados.
2. Para que un campo se muestre u oculte en la página de pago, marque la casilla de verificación justo a la izquierda de la etiqueta Mostrar.
3. Para que un campo sea obligatorio (campo requerido) marque la casilla de verificación justo a la izquierda de Requerir etiqueta.
4. Los campos también se pueden reorganizar según las necesidades. Para reorganizarlos, simplemente coloque el cursor sobre el icono de arrastrar y suelte el campo donde corresponda, como se muestra a continuación.
5. Al guardar, los campos se reorganizarán según los cambios.

3.4 Dirección de envío

Esta pestaña contiene configuraciones para los campos que se mostrarán en la sección Dirección de envío en la página de pago como se muestra a continuación.

1. Consta de dos secciones: la de la izquierda, para clientes invitados, y la de la derecha, para clientes registrados.
2. Para que un campo se muestre u oculte en la página de pago, marque la casilla de verificación justo a la izquierda de la etiqueta Mostrar.
3. Para que un campo sea obligatorio (campo requerido) marque la casilla de verificación justo a la izquierda de Requerir etiqueta.
4. Los campos también se pueden reorganizar según las necesidades. Para reorganizarlos, simplemente coloque el cursor sobre el icono de arrastrar y suelte el campo donde corresponda, como se muestra a continuación.
5. Al guardar, los campos se reorganizarán según los cambios.

Método de envío 3.5

Esta pestaña contiene la configuración del método de envío que se muestra en la página de pago. Permite habilitar, deshabilitar y configurar el método de envío predeterminado, como se muestra a continuación:

• Mostrar métodos de envío: Con esta opción, puedes mostrar u ocultar los métodos de envío en la página de pago. Para ello, debes activar o desactivar el botón, o viceversa.
• Estilo de visualización: Esta opción le permite seleccionar el estilo de visualización de los métodos de envío que ha añadido a su sitio web. Puede elegir entre tres opciones: Solo texto, Solo imagen o Texto con imágenes.
• Título del método de envío de la pantalla: Con esta opción, puede habilitar o deshabilitar el título de los métodos de envío que se muestran en la página de pago.
• Seleccione un método de envío predeterminado: Esta opción le ayuda a seleccionar cualquier método como método de envío predeterminado para su tienda.
• Título: Con esta opción, puedes configurar títulos para cada método de envío añadido y configurado en tu tienda. Puedes configurar el título en inglés o francés.
• Logo: Esta opción te permite configurar el logo deseado correspondiente a cada uno de los métodos de envío configurados para tu tienda.

3.6 Envío a pago

La función de envío a pago del módulo Supercheckout de OpenCart desactiva automáticamente los métodos de pago según el método de envío seleccionado por el cliente. Es decir, el administrador puede asociar opciones de pago específicas con opciones de envío específicas en la tienda.

3.7 Método de pago

Esta pestaña contiene configuraciones para los métodos de pago que se muestran en la página de pago, como habilitar/deshabilitar o seleccionar un método predeterminado.

• Mostrar métodos de pago: Con esta opción, puede mostrar u ocultar los métodos de pago en la página de pago. Para ello, debe activar o desactivar el botón, o viceversa.
• Estilo de visualización: Esta opción le permite seleccionar el estilo de visualización de los métodos de pago que ha añadido a su sitio web. Puede elegir entre tres opciones: Solo texto, Solo imagen o Texto con imágenes.
• Seleccione un método de pago predeterminado: Esta opción le ayuda a seleccionar cualquier método como método de pago predeterminado para su tienda.
• Título: Con esta opción, puedes configurar títulos para cada método de pago añadido y configurado en tu tienda. Puedes configurar el título en inglés o francés.
• Logo: Esta opción te permite configurar el logo deseado correspondiente a cada uno de los métodos de pago configurados para tu tienda.

3.8 Carrito

En esta sección encontrarás los campos del carrito divididos en dos secciones, la de la izquierda es para Clientes Invitados y la de la derecha es para clientes Registrados o Logueados.

1. Para mostrar u ocultar el carrito de la página de pago, marque y desmarque la casilla de verificación presente delante de la etiqueta Mostrar carrito.
2. Para habilitar o deshabilitar cualquier columna en el carrito, marque o desmarque la casilla de verificación frente a la columna correspondiente.
3. Para habilitar o deshabilitar las imágenes emergentes del producto, marque o desmarque la casilla de verificación frente a la columna correspondiente.
4. Para cambiar el tamaño de la imagen emergente, ingrese el ancho y la altura de la ventana emergente en el cuadro de texto frente a la etiqueta Tamaño de la imagen del producto.
5. Las opciones de cupones, puntos de recompensa y vales también se pueden activar o desactivar marcando o desmarcando la casilla correspondiente. Tenga en cuenta que el cuadro de texto de puntos de recompensa solo será visible en la página de Supercheckout una vez que se cumplan las siguientes tres condiciones: a) El cliente debe iniciar sesión; b) Debe tener al menos 1 punto de recompensa en su cuenta; c) Debe tener un producto en el carrito que pueda comprarse con puntos de recompensa.

Confirmar:

1. Esta pestaña está dividida nuevamente en dos secciones, la de la izquierda es para Clientes Invitados y la de la derecha para Clientes Registrados o Iniciados Sesión.
2. Para habilitar el cuadro de comentarios para el pedido del cliente, marque la casilla de verificación frente a Dejar un comentario para la etiqueta del pedido y para deshabilitarlo, desmarque la misma casilla de verificación.
3. Para habilitar o aceptar los términos o cualquier otra información guardada en el administrador de la tienda, marque o desmarque la casilla de verificación frente a la etiqueta Acepto las condiciones.

3.9 Pestaña Diseño

Esta pestaña contiene las configuraciones para el diseño de OpenCart One Page Checkout Pro como se muestra a continuación:

1 columna

2 columna

3 columna

Puede cambiar fácilmente el ancho de cualquier columna ajustando el control deslizante presente en la parte superior como se muestra a continuación.

 

También puedes reposicionar diferentes bloques de la página de pago con solo arrastrar y soltar. Al guardar, el bloque se reorganizará en la página de pago según los cambios.

3.10 Newsletter

Al hacer clic en la pestaña Boletín informativo de la Módulo de pago responsivo de un solo paso de OpenCart, puede configurar los ajustes de MailChimp, SendinBlue y Klaviyo Integrator como se muestra a continuación:

• Habilitar MailChimp: Puedes habilitar o deshabilitar la función de Integrador de MailChimp para tu tienda. Puedes habilitar esta opción si quieres aumentar las suscripciones al boletín informativo de tu tienda.
• Clave API de MailChimp: Esta opción le ayuda a configurar la clave API de Mailchimp para capturar los correos electrónicos de los clientes.
• Lista de MailChimp: Una vez configurada la clave con esto Extensión de pago rápido de OpenCart, puede buscar y seleccionar la lista de MailChimp.

Se puede hacer lo mismo con SendinBlue y Klaviyo.

4.0 Interfaz frontal de Extensión de pago en un solo paso de OpenCart

Cuando el usuario hace clic en el botón “Añadir al carrito” correspondiente a un producto y realiza su pago, verá el siguiente supercheckout en su pantalla.

5.0 Tutorial de Opencart One Page Checkout Pro de Knowband

Para que la instalación, configuración y configuración sean completamente sencillas, hemos creado un tutorial detallado y fácil de entender para OpenCart One Page Checkout Pro de Knowband. Esta guía paso a paso te guía paso a paso, desde la descarga e instalación del módulo hasta la configuración de todas sus potentes funciones para una experiencia de pago más rápida, fluida e intuitiva. Tanto si eres nuevo en OpenCart como si eres un usuario experimentado, el tutorial te permite personalizar campos, gestionar las opciones de inicio de sesión con redes sociales, habilitar el pago como invitado, configurar los métodos de pago y envío, y optimizar el diseño general sin complicaciones. Consulta el tutorial completo aquí para garantizar una instalación y un funcionamiento sin problemas de la extensión One Page Checkout Pro.

Extensión de pago en una página de OpenCart: https://www.knowband.com/opencart-one-supercheckout-pro

Demostración de administración del proceso de pago en una página de OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Demostración frontal del proceso de pago en una página de OpenCart: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

Pago en una página de OpenCart desde el Marketplace oficial de OpenCart: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353