Opencart One Page Checkout – User Manual

1.0 Introducción

La mayoría de los visitantes abandonan el pago del producto deseado solo porque encuentran que el proceso es complejo y largo para completar. En última instancia, esto conduce a un número cada vez mayor de carros abandonados. Para controlar las tasas de salida y abandono de carritos, Knowband ha ofrecido�Pago de una página de OpenCart Pro Complemento para tiendas OpenCart. Además, al implementar One Page Checkout para su sitio de comercio electrónico, puede mejorar las tasas de conversión, ya que reemplaza la página de pago de varios pasos con un pago de una sola página.

Vista móvil:

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

1. La extensión ofrece la función de pago como invitado mediante la cual los usuarios pueden completar sus pedidos de manera fácil y rápida 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 en la página de pago desde el back-end de la extensión OpenCart One Page Checkout Pro. El administrador de la tienda puede mostrar u ocultar cualquiera de los campos de la página de pago o puede hacerlos opcionales u obligatorios para que los completen los usuarios. El administrador también puede reorganizar los campos de posición con la funcionalidad de arrastrar y soltar.
4. El propietario de la tienda puede personalizar fácilmente la apariencia de la página de pago, lo que incluye cambiar el color de los botones, el color de fondo de los botones, el color del texto, etc.
5. OpenCart One Page Supercheckout ofrece compatibilidad multitienda y multilingüe.
6. La extensión OpenCart One Step Checkout es compatible con casi todos los principales métodos de envío y pago que aumentan la confianza de los clientes para elegir el método deseado desde la página de pago.
7. El comerciante electrónico puede aplicar cualquiera de los diseños de 3 diseños de pago diferentes, es decir, 1 columna, 2 columnas 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 estas cuentas suyas 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 realizar las personalizaciones en vivo en el sitio web.
11. El módulo de pago simplificado de OpenCart ofrece la función Ship2Pay mediante la cual el propietario de la tienda puede asignar métodos de pago particulares con métodos de entrega seleccionados. Oculta todos los demás métodos de pago al seleccionar un método de entrega en particular y muestra solo aquellos métodos de pago que están asignados al método de entrega seleccionado para el usuario.

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

Antes de iniciar el proceso de instalación, debe comprar el�Extensión OpenCart One Page Checkout de la tienda Knowband. Una vez comprado, recibirá los siguientes archivos en su correo electrónico registrado.

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

Ahora, para instalar este pago de una sola página de OpenCart en su tienda en línea, siga los pasos indicados: 1. Descomprima el archivo zip. Obtendrá 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 de 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, haga clic en Extensiones en el menú del lado izquierdo. Luego haga clic en Instalador de extensiones (�Inicio->extensión).

• Ahora, cargue supercheckout_pro.ocmod.xml. Se muestra un mensaje de éxito una vez que se carga el archivo.

• Una vez cargado el archivo, vaya a Inicio-> Modificación

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

• Finalmente, haga clic en el botón Actualizar (Esto es obligatorio).

Entonces,Pago de una página de OpenCart Pro ahora se instaló correctamente y está listo para usar en su tienda. Vaya al menú de administración y haga clic en Extensiones y luego en Módulos. Haga clic en el botón configurar junto a�Superpago Knowband.

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

Justo después de la instalación exitosa del sitio web One Page Checkout para OpenCart, puede configurar los campos del formulario de pago según sus requisitos. Tienes que navegar por la configuración en el orden dado: Panel de administrador > Prórrogas de tiempo para presentar declaraciones de impuestos > Módulos >�Knowband Supercheckout

La interfaz de administración fácil de entender de�Pago de 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 Cada una de estas secciones se ha discutido a continuación:

Configuración general de 3.1

• Habilitar deshabilitar: Con esta opción, puede habilitar o deshabilitar la funcionalidad completa del�OpenCart One Page Checkout Pro�complemento de APAGADO a ENCENDIDO.
• Habilitar la opción de boletín: Puede habilitar o deshabilitar la opción Boletín en la página Supercheckout. Una vez que haya activado este botón, se producirán los siguientes casos: a.) La opción Boletín será visible para los clientes de pago como invitado, solo si ha activado la opción Registrar invitado automáticamente. b.) La opción de boletín siempre estará visible para los clientes si están creando una nueva cuenta. c.) La opción de boletín nunca será visible para los clientes registrados.
• Registrar invitado automáticamente: Puede habilitar esta opción para registrar automáticamente a los clientes invitados en su tienda. Al habilitar esta opción, puede registrar a sus clientes en la tienda y enviarles una contraseña generada en 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 configurar 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�Superpago de una página�salir de la página de las opciones como Invitado, Iniciar sesión y Registrarse.
• Deshabilitar invitado: Puede habilitar o deshabilitar la función 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 en la página Supercheckout. Para aplicar CSS personalizado en la página Supercheckout, puede escribir ese CSS en el cuadro de texto que está justo a la derecha de la etiqueta Agregar estilo personalizado. Por ejemplo: puede cambiar el color de los botones en la página Supercheckout.
• Agregue la cantidad mínima para mostrar el banner de envío gratis: 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 país de detección automática: Después de habilitar esta función, la extensión detectará y completará el país del usuario automáticamente 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.
  
• Habilite 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 OpenCart One Page Checkout.
• URL de prueba:Una vez que habilite el modo de prueba, puede establecer una URL de superpago donde puede probar la funcionalidad del pago de una página.

Personalizador

En la pestaña Personalizador, puede personalizar el color de fondo del botón, el color del borde del botón 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 de inicio de sesión, el color de fondo del botón de inicio de sesión, el color de fondo del botón de cierre de sesión, el cupón Color de fondo del botón de código, Color de fondo del botón de código de cupón, etc.

• Color de fondo de la barra de envío gratis: Esta sección le permite cambiar el color de fondo de la barra de envío gratis 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/deshabilitar la opción de inicio de sesión de Facebook en One Page Checkout.
• Identificación de la aplicación de Facebook: Esta opción le permite configurar la ID de la aplicación de Facebook que se puede generar utilizando la cuenta del desarrollador de Facebook.
• Secreto de la aplicación de Facebook: Con esta opción, configure la clave secreta generada con la cuenta del desarrollador de Facebook.
• Habilitar el inicio de sesión de Google:Con esta opción, puede habilitar/deshabilitar la opción de inicio de sesión de Google en One Page Checkout.
• Identificación de la aplicación de Google:�Esta opción le permite establecer la 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, puede configurar la clave secreta de la aplicación generada con 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 secreta 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, vaya 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 mencionados a continuación: –

1:�Ir a la URL dada: https://developers.facebook.com/apps/

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

3 y 4: Seleccione la pestaña “Construye 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 elija entre “¿Tiene una cuenta de Business Manager?” 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 un control de seguridad como se muestra:

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

Amablemente agregar eliminar URL de devolución de llamada. Puede verificar 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: Habrá dos opciones disponibles en el menú desplegable, Básico y Avanzado, haga clic en “Básico”. Y luego ingrese su “Dominio de aplicación”, “URL de privacidad”, “URL de términos de servicio”, “Agregar ícono”, “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 en 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 un URI de redirección de OAuth válido.

URI de redireccionamiento de OAuth válidos:

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

27: Seleccione la pestaña “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 proporcionados 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 en el tipo a continuación.

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 la identificación del cliente y el secreto del cliente. 1. Ir 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 a 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 de OAuth.

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

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

Use 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 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 estará visible y 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 del cliente y el secreto del 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 a API Manager, 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 introdúzcala en el campo ID de la aplicación de Google de la página de inicio de sesión del módulo final de administración.

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. El de la izquierda es para clientes invitados y el de la derecha para clientes registrados.
2. Para hacer que un campo se muestre/oculte en la página de pago, marque la casilla de verificación justo a la izquierda de la etiqueta Mostrar.
3. Para hacer que un campo sea obligatorio (campo obligatorio), marque la casilla de verificación justo a la izquierda de Requerir etiqueta.
4. Los campos también se pueden reorganizar según el requisito. Para reorganizar, simplemente mueva el cursor al ícono de arrastrar y arrastre y suelte el campo donde sea necesario, 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. El de la izquierda es para Clientes Invitados y el de la derecha para clientes registrados.
2. Para hacer que un campo se muestre/oculte en la página de pago, marque la casilla de verificación justo a la izquierda de la etiqueta Mostrar.
3. Para hacer que un campo sea obligatorio (campo obligatorio), marque la casilla de verificación justo a la izquierda de Requerir etiqueta.
4. Los campos también se pueden reorganizar según el requisito. Para reorganizar, simplemente mueva el cursor al ícono de arrastrar y arrastre y suelte el campo donde sea necesario, 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 configuraciones para el método de envío que se muestra en la página de pago. Contiene configuraciones para 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, puede mostrar/ocultar los métodos de envío en la página de pago. Para ello, debe cambiar el botón de ON a OFF o viceversa.
• Estilo de visualización: Esta opción le permite seleccionar el estilo de visualización para los métodos de envío que haya agregado a su sitio web. Puede elegir cualquier estilo entre tres opciones como Solo texto, Solo imagen o Texto con imágenes.
• Mostrar el título del método de envío: 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.
• Posición: Con esta opción, puede configurar los títulos correspondientes a cada uno de los métodos de envío agregados y configurados para su tienda. Puede configurar el título en inglés o francés.
• Logo: Esta opción le permite configurar el logotipo deseado correspondiente a cada uno de los métodos de envío configurados para su tienda.

3.6 Enviar2Pagar

La función ship2pay que ofrece el módulo OpenCart Supercheckout 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 asignar algunas opciones de pago particulares con algunas opciones de envío particulares 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/ocultar los métodos de pago en la página de pago. Para ello, debe cambiar el botón de ON a OFF o viceversa.
• Estilo de visualización:�Esta opción le permite seleccionar el estilo de visualización para los métodos de pago que haya agregado a su sitio web. Puede elegir cualquier estilo entre tres opciones como 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.
• Posición:�Con esta opción, puede establecer títulos correspondientes a cada uno de los métodos de pago agregados y configurados para su tienda. Puede configurar el título en inglés o francés.
• Logo:�Esta opción le permite configurar el logo deseado�correspondiente a cada uno de los métodos de pago configurados para su tienda.

3.8�Carro

En esta sección, encontrará los campos del carrito divididos en dos secciones, la izquierda es para clientes invitados y la derecha es para clientes registrados o conectados.

1. Para mostrar/ocultar el carrito de la página de pago, desmarque la casilla de verificación presente frente a la etiqueta Mostrar carrito.
2. Para habilitar/deshabilitar cualquier columna en el carrito, marque/desmarque la casilla de verificación frente a esa columna respectiva.
3. Para habilitar/deshabilitar las imágenes emergentes para el producto, marque/desmarque la casilla de verificación frente a esa columna respectiva.
4. Para cambiar el tamaño de la ventana emergente de la imagen, 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 cupón, puntos de recompensa y vales también se pueden desactivar o activar marcando o desmarcando la casilla de verificación que se encuentra delante del campo respectivo. Tenga en cuenta que el cuadro de texto de puntos de recompensa solo será visible en la página 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 se pueda comprar con puntos de recompensa.

Confirmar:

1. Esta pestaña se divide nuevamente en dos secciones, la izquierda es para clientes invitados y la derecha para clientes registrados o conectados.
2. Para habilitar el cuadro de comentarios para el pedido del cliente, marque la casilla de verificación delante de Deje un comentario para la etiqueta del pedido y para deshabilitar desmarque la misma casilla de verificación.
3. Para permitir aceptar el término o cualquier otra información guardada en el administrador de la tienda, marque / desmarque la casilla de verificación frente a la etiqueta Acepto las condiciones.

3.9 Pestaña Diseño

Esta pestaña contiene la configuración 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.

 

Además, puede reposicionar diferentes bloques de la página de pago con una simple acción de arrastrar y soltar. Al guardar, el bloque se reorganizará en la página de pago según los cambios.

3.10 Newsletter

Haciendo clic en la pestaña Newsletter de la�Módulo de pago de un solo paso receptivo de OpenCart, puede configurar los ajustes de MailChimp, SendinBlue y Klaviyo Integrator como se muestra a continuación:

• Habilitar MailChimp: Puede habilitar o deshabilitar la funcionalidad de MailChimp Integrator para su tienda. Puede habilitar esta opción si desea aumentar las suscripciones a boletines para su tienda.
• Clave API de MailChimp: Esta opción lo ayuda a configurar la clave API de Mailchimp para capturar los correos electrónicos de los clientes.
• Lista de MailChimp: Una vez configurada la llave 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 “Agregar al carrito” correspondiente a un producto y realiza su pago, verá en su pantalla el siguiente superpago.

Extensión OpenCart One Page Checkout: https://www.knowband.com/opencart-one-supercheckout-pro

Demostración de administrador de OpenCart One Page Checkout: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Demostración frontal de OpenCart One Page Checkout: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

OpenCart One Page Checkout del OpenCart Marketplace oficial: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353