Multi Builder
Ir a la webPreciosAPI
  • Base de conocimientos
  • Plataforma
    • Ajustes
      • Sitemaps
      • Dominios
      • Idioma y hora
      • Título, Favicon, Imagen para compartir
      • Cookies y confidencialidad
      • Solicitud de datos del cliente
      • Administrador de archivos
      • Panel de control
      • Código personalizado
      • Personalización
      • Ajustes de SEO
    • Editor
      • Estilos globales
      • Imágenes
      • Footer o pie de página
      • Header
      • Estilos globales de textos
      • Paleta de colores
      • Diseño del sitio
      • Estilo de la página
      • Cómo añadir páginas y pop-ups
      • Tipos de vistas y vistas previas
    • Widgets
      • Básicos
        • Widgets: Texto y encabezado
        • Widget: Botón
        • Widget: Contenedor
        • Widget: Icono
        • Widget: Sección de icono
        • Widget: Separador
        • Widget: Espaciador
        • Widget: Acordeón
        • Widget: Upsell/Downsell
      • Contenidos multimedia
        • Widget: Imagen
        • Widget: Vídeo
        • Widget: Lista de vídeos
        • Widget: Audio
        • Widget: Galería
        • Widget: Slider
      • Generación de leads
        • Widget: Citas
        • Widget: Formulario
        • Widget: Cuestionario/Encuesta
      • Ventas
        • Widget: Módulo de pago
        • Widget: Tienda
        • Widget: Resumen del pedido
      • Comunidad
        • Widget: Círculo
        • Widget: Círculos
        • Widget: Área de comentarios
        • Widget: Debate
        • Widget: Reseñas
        • Widget: Muro/Foro
      • Otros
        • Widget: Donación
        • Widget: Redes sociales
        • Widget: Blog
        • Widget: Código
        • Widget: Cuenta atrás
        • Widget: Incrustar
        • Widget: Mapa
        • Widget: Menú
        • Widget: Portafolio
        • Widget: Barra de progreso
        • Widget: Buscar
        • Widget: Inicio de sesión/Registro de miembros
    • Embudos
      • Introducción
      • Ajustes del embudo
      • Upsells y downsells
      • Pasos del embudo
      • Prueba A/B (A/B testing)
      • Embudo dentro de una web
      • Ofertas bump
      • Estadísticas en embudos
      • Generador de enlaces de seguimiento
    • CRM
      • CRM (Conceptos básicos)
      • Etiquetas
      • Propiedades
      • Miembros
      • Mensajes y formularios
      • Ficha del contacto
      • Segmentos
    • Tienda online
      • Conceptos básicos
      • Ajustes de tu tienda
      • Productos
      • Gastos de envío
      • Impuestos
      • Formas de pago
      • Descuentos y ofertas
      • Página del producto
      • Página del catálogo de productos
      • Carrito
    • Portfolios
      • Cómo crear un portfolio
    • E-mails
      • Campañas de e-mail
      • Automatizaciones
      • Segmentos
      • Autorización para el envío de e-mails
      • Doble opt-in
      • Cómo verificar tu dominio
      • Plantillas de e-mail
      • Editor de e-mails y bloques
      • Listas y suscriptores
    • Calendario de citas
      • Agenda de citas (I): Introducción
      • Agenda de citas (II): Cómo crear un Operador
      • Agenda de citas (III): Cómo crear un Servicio
      • Agenda de citas (IV): Cómo crear un Evento
      • Widget: Citas
  • E-mails del sistema
    • Confirmación doble opt-in
    • Productos digitales de descarga
    • Pedido completado
    • Recordatorio de cita
    • Registro de miembro aprobado
    • Recuperación de contraseña de miembro
    • Nuevo pedido
    • Pedido cancelado
    • Pedido enviado
    • Mención en la Comunidad
    • Respuesta en la Comunidad
    • Nueva cita
    • No se pudo renovar suscripción
  • Comunidad
    • Ajustes de la Comunidad
    • Panel de control
    • Moderación
    • Roles de la Comunidad
    • Widgets: Comunidad
  • Círculos
    • Ajustes del círculo
    • Estilos del círculo
    • Páginas
    • Grupos
    • Niveles de acceso
    • Disponibilidad del contenido
    • Analíticas e interacción
  • LMS
  • Blogs
    • Cómo crear un blog
    • Widget: Blog
    • Página de presentación del blog
    • Artículos del blog
  • DISEÑOS DE EMBUDOS
    • Tipos de embudos
      • Generación de leads
      • Embudo para un webinario
      • Embudo "hero"
  • Integraciones internas
    • Twilio
    • E-mail marketing
  • Integraciones externas
    • Make
  • Zapier
  • Usuarios avanzados
    • Modificaciones con CSS
      • Galería de imágenes en móvil
      • Scroll to Top
      • Posición del menú en móvil
      • Menú móvil a pantalla completa
      • Menú desplegable en móvil
      • Cómo mejorar textos en móvil
      • Efecto de scroll sobre una imagen
      • Insignias de Moderador y Admistrador
    • Modificaciones con CCS y JS
      • Widget de Sección de icono con efecto hover
      • Icono o botón en móviles
      • Barra fija de llamada a la acción
      • Widget de Sección de icono con tooltip
    • Modificaciones con JS
      • Añadir descripciones a formas de pago
  • Otros
    • Preguntas frecuentes
    • Glosario
      • Administrador
      • Agenda
      • Automatización
      • Campaña
      • Carrito abandonado
      • Contacto
      • CSS
      • Dominio
      • Downsell
      • E-mail marketing
      • Embudos
      • Encuesta (o Cuestionario)
      • Etiquetas
      • Formulario
      • Grupo de miembros
      • JavaScript
      • Lista
      • Membresía
      • Miembro
      • Mensaje
      • Oferta bump
      • Operador
      • Página del sistema
      • Pedido
      • Portafolio (o Portfolio)
      • Producto
      • Propiedad
      • Proyecto
      • Segmento
      • Sitio web
      • Subdominio
      • Suscriptor
      • Suscripción
      • Widget
      • Upsell
Con tecnología de GitBook
En esta página
  • Seleccionar productos
  • Ofertas bump
  • Carrito
  • Estilos
  • Pasos
  • Fuentes, colores y rótulos
  • Sello de seguridad
  1. Plataforma
  2. Widgets
  3. Ventas

Widget: Módulo de pago

tienda online | productos | pagar

AnteriorVentasSiguienteWidget: Tienda

Última actualización hace 2 años

El widget para realizar pagos en una tienda online lo encontramos en:

  1. Añadir widget>Ventas>Módulo de pago

Módulo de pago
  1. Y también desde la carpeta de PÁGINAS DEL SISTEMA en Página de pago de la tienda.

El módulo de pagos ofrece dos formas de realizar el pago de los productos. Haciendo doble clic sobre el widget se abre la configuración de Productos con dos opciones:

Seleccionar productos

Con esta opción, en el módulo de pago ya se presenta el producto o productos que el cliente tiene opción de adquirir. En Productos principales>Seleccionar productos seleccionamos uno o varios productos que ya hemos creado en la pestaña de Tienda (seguidamente los reordenaremos como queramos). Podemos presentar los productos con varias combinaciones:

  • El cliente puede comprar sólo una unidad de uno o varios productos.

  • El cliente puede elegir las unidades que quiere comprar.

  • El cliente solo puede comprar la selección de productos que se le presentan (por ejemplo, si es un pack indivisible).

  • El cliente solo puede comprar uno de los productos.

  • El cliente puede elegir comprar uno o varios productos.

Ofertas bump

IMPORTANTE: si creas una oferta bump en Seleccionar productos, pero posteriormente seleccionas Carrito como funcionamiento de la tienda, el bump se muestra igualmente en la página de pago. A diferencia de los upsell y downsell (que solo se pueden crear en embudos), las ofertas bump las podemos implementar en cualquier tipo de página donde insertemos este widget de Módulo de pago.

Carrito

En el módulo de pago se mostrarán los productos que el cliente haya introducido previamente en su carrito. Por tanto, en este punto el cliente solo tiene la capacidad de:

  • Modificar el número de unidades.

  • Seleccionar otra variación del producto.

  • Eliminar el producto del carrito.

Estilos

Los mismos ajustes de estilo sirven tanto para la opción Seleccionar productos como para Carrito.

Primero elegimos el diseño y la estructura del módulo:

1. A la derecha los datos de pago y la izquierda el resumen de los productos.

2. Arriba los datos de pago y abajo el resumen de productos (mejor cuando se finaliza la compra en un único paso, ya que el resumen de los productos solo aparece en la tercera sección).

3. Igual que la opción 1, pero la separación entre los dos es una línea inclinada.

Pasos

El proceso de pago se divide en tres secciones:

  • Sección 1: el cliente aporta su nombre completo y dirección de e-mail.

  • Sección 2: se solicita dirección de envío y dirección de facturación.

  • Sección 3: se elige forma de pago y se introducen los datos de la tarjeta de crédito o de la cuenta en una pasarela de pago.

El sistema nos da 3 opciones:

  • En 1 paso: las tres secciones se le muestran al cliente en una única interfaz.

  • En 2 pasos: primero se introduce nombre, e-mail, dirección de envío y dirección de facturación. Entonces el cliente clica en Continuar y ya puede introducir los datos de su tarjeta bancaria o el acceso a su cuenta en una pasarela de pago.

  • En 3 pasos: cada sección se muestra por separado y el cliente las va confirmando haciendo clic en Continuar.

Fuentes, colores y rótulos

En los ajustes que encontramos en:

  • Datos del cliente y de facturación

  • Panel del módulo de pago

  • Resumen del pedido, y

  • Botones

podemos modificar y personalizar fuentes, colores, bordes, fondos, radios de los bordes y también modificar los textos de todos los rótulos que aparecen en el módulo de pago y que indican al cliente qué información se está solicitando. Encontrarás muchísimos ajustes y es mejor que le dediques un tiempo a familiarizarte con esta parte del widget.

Sello de seguridad

En la parte inferior del módulo de pago verás que aparecen dos pequeños iconos, un candado y un escudo indicando que se trata de una página segura y encriptada. Estos sellos animan al cliente a finalizar la compra por si tienen dudas sobre la seguridad de la página. En los ajustes tendrás que marcar la opción "Mostrar sellos de Pago seguro" y podrás ajustar tanto el texto que aparece como el color del icono.

Finalmente verás unos últimos ajustes con un título que no necesita más explicaciones:

  • Mostrar el precio normal tachado cuando el artículo está en oferta.

  • Mostrar el resumen del pedido encima de los datos del cliente en móviles.

  • Expandir el módulo de pago a altura completa de la ventana.

Páginas del sistema
Seleccionar productos
Ejemplo de módulo de pago

ATENCIÓN: para saber más, puedes leer el artículo .

Ofertas bump
Carrito
Estilos del módulo de pago
Ofertas bump