Easy Digital Downloads se dedica a proporcionar un sistema de comercio electrónico fácil de usar para usuarios de WordPress. Trabajamos duro para lograr ese objetivo a diario. Sin embargo, debido a su extensibilidad y la variación inevitable de las necesidades de los clientes, gran parte de la funcionalidad se deja en la desalentadora tarea del desarrollo personalizado.
Una de las necesidades más comunes que vemos en nuestro canal de soporte es una forma fácil de crear formularios de pago personalizados. Para los no desarrolladores, la creación de formularios personalizados es lo suficientemente difícil. Si se agrega la funcionalidad de comercio electrónico, incluso la gente que lo hace por sí misma tiene dificultades.
El objetivo de este artículo es ayudar a todos los usuarios de Easy Digital Downloads, independientemente de su nivel de habilidad, a aprender a crear formularios de pago personalizados sin escribir *ningún* código.
Plugins mínimos requeridos
Hay al menos cuatro plugins que deben funcionar juntos para que esto suceda. Explicaré cada uno de ellos a continuación.
Easy Digital Downloads
Si bien Easy Digital Downloads tiene su propia funcionalidad de pago principal, el sistema básico solo admite un formulario de pago "universal". Incluso si personalizas el formulario, seguirá siendo el mismo formulario para todas las transacciones, independientemente de lo que haya en el carrito.
Gravity Forms
Gravity Forms es un constructor de formularios avanzado para WordPress. Puedes usarlo para crear cualquier cosa, desde el formulario de contacto más básico hasta formularios complejos que sirvan para cualquier propósito. Con características como la lógica condicional de campos, la organización y presentación de entradas, y el soporte de complementos, sin duda es uno de los plugins premium más populares de WordPress en el mercado.
extensión Gravity Forms Checkout
Gravity Forms Checkout es el puente entre Easy Digital Downloads y Gravity Forms. Para crear múltiples formularios de pago personalizados para tus productos, esta extensión de Easy Digital Downloads es una pieza necesaria del rompecabezas.
Complemento de pago de Gravity Forms
Por último, los formularios de pago personalizados creados a través de Gravity Forms requieren que utilices los complementos de Gravity Forms para agregar funcionalidad adicional a los formularios mismos. Eso significa que las pasarelas de pago de Easy Digital Downloads no funcionarán con Gravity Forms Checkout.
Para procesar pagos, debes usar pasarelas de pago creadas para Gravity Forms. En este artículo, haremos referencia al complemento Gravity Forms PayPal Payments Standard. Hay opciones adicionales disponibles como Stripe y Authorize.net.
Creación de formularios de pago personalizados
Ahora que tienes todos los plugins requeridos, comencemos. Recorreremos la creación de un formulario de pago básico para un solo producto. Sigue los pasos si estás preparado para hacerlo.
En este punto, ya deberías tener productos en tu tienda que deseas vender. Ten en cuenta que incluso si tienes las herramientas mencionadas activadas o en uso, tu tienda Easy Digital Downloads seguirá funcionando de manera original.
Los formularios de pago personalizados con Gravity Forms Checkout simplemente agregan otra opción. Tus productos aún se pueden comprar de la manera tradicional.
Crea nuevos formularios con Gravity Forms
Para el proceso de creación de formularios, piénsalo como si Easy Digital Downloads se integrara con Gravity Forms, en lugar de al revés. Con ese enfoque, tiene sentido que para crear un nuevo formulario de pago personalizado, primero necesites crear un nuevo formulario en Gravity Forms.
Con Gravity Forms activado, ve a Formularios -> Nuevo Formulario en tu panel de WordPress. Se te pedirá que le des un título y una descripción opcional al formulario. Hazlo y crea el formulario.
Agregar campos básicos
En esta etapa, tienes una entrada de formulario creada pero no tiene ningún campo. Todo lo que tiene es un título y una descripción que se mostrarán automáticamente de forma predeterminada, aunque puedes ocultarlos si así lo deseas.
Necesitarás recopilar al menos una dirección de correo electrónico de tus clientes. Así que agregaremos un campo de dirección de correo electrónico a nuestro formulario para empezar.
En el lado derecho de la pantalla, verás varias secciones expandibles de agrupaciones de campos. El campo de correo electrónico se encuentra en la sección Campos avanzados. Para agregar el campo de correo electrónico a tu formulario, simplemente haz clic en el botón etiquetado como Correo electrónico.
Hacer clic en el botón agregará el campo a tu formulario (lado izquierdo de la pantalla) con contenido predeterminado mínimo. Mueve el cursor sobre el nuevo campo y cuando veas el indicador visual de que estás pasando el cursor, haz clic una vez en el campo para ver sus opciones.
El campo de correo electrónico es muy simple y solo necesita un ajuste. En la sección Reglas, marca el campo como Requerido. Con esta configuración implementada, el formulario de pago no se enviará sin una dirección de correo electrónico.
Muchos de ustedes también querrán agregar campos como nombre y apellido. No discutiremos esos en este artículo, pero el proceso es muy similar a agregar el campo de correo electrónico.
Ahora que tenemos un campo de correo electrónico requerido, agreguemos un campo más antes de pasar a los campos relacionados con el producto.
Solo por estructura y para familiarizarnos más con Gravity Forms, agregaremos un campo al formulario llamado Sección. Las secciones son una forma fácil de dividir tu formulario en secciones visuales que ayudan al flujo de llenado del formulario.
El campo de Sección se encuentra en la sección Campos estándar. Agrégalo a tu formulario y expándelo para ver sus opciones.
Según el tipo de campo y el hecho de que agregaremos un campo de Producto a continuación, consideremos este campo de Sección como un encabezado para la visualización del campo de producto.
Ajusta los campos Etiqueta del campo y Descripción a tu gusto. Algo como "Información del producto" como Etiqueta del campo y cualquier pequeño detalle que quieras revelar sobre el producto en sí como Descripción.
En cualquier momento durante el proceso de creación, puedes previsualizar la estructura de tu formulario haciendo clic en el enlace Vista previa ubicado en el menú de navegación justo encima del generador de formularios. Ten en cuenta que algunos campos requieren que actualices el formulario para previsualizar.
La vista previa de tu formulario no es una representación de cómo se diseñará en el front-end. En su lugar, usa la vista previa para ver la estructura y la funcionalidad. Por ahora, no tenemos nada más que un campo de correo electrónico, un título de sección (etiqueta) y una descripción.
Si aún no estás familiarizado con Gravity Forms, lo que has hecho hasta ahora es cómo usarías el generador de formularios para cualquier tipo de formulario que crees, no solo con Easy Digital Downloads. Si no tienes claro cómo funciona el generador de formularios básico, visita la documentación de Gravity Forms.
En esta etapa del proceso, la vista previa de tu formulario debería verse similar a esto:
Con el título del formulario, la descripción del formulario y el campo de correo electrónico y la sección de información del producto en su lugar, podemos agregar un producto al formulario.
Agregar campos de producto
Recuerda que este es un formulario extremadamente básico y su propósito es servir como el pago para un producto en particular. Para aquellos que prefieren tener un formulario de pago personalizado para un producto específico en lugar de usar su botón Agregar al carrito y el pago tradicional, este formulario sería un reemplazo ideal.
Dicho esto, agregaremos y mostraremos el campo Producto al formulario para fines informativos. Se informa al cliente sobre a qué producto le otorgará acceso el formulario junto con su precio.
En el lado derecho de la pantalla, busca la sección Campos de precios. En esa sección, selecciona agregar un nuevo campo de Producto haciendo clic en el botón etiquetado como Producto. Una vez agregado, expande el campo.
Venderé un producto llamado "Producto de ejemplo", que ya se ha creado como una entrada de Descarga. Después de completar las secciones Etiqueta de campo y Descripción, conectaré mi campo de Producto a Easy Digital Downloads seleccionando "Producto de ejemplo" del menú desplegable Conectar a Descarga de EDD.
Continuando con la configuración, estableceré mi Tipo de campo como "Producto único" con un Precio de $10. Ten en cuenta que, dado que tengo el control total del formulario, debo establecer el precio yo mismo. No se extrae de la entrada de Descarga.
Por último, marcaré la casilla Deshabilitar campo de cantidad y estableceré las únicas Reglas como Requerido.
Echemos un vistazo a una vista previa actualizada de mi formulario de pago personalizado.
Con solo esos campos en su lugar, has creado un formulario que está preparado para vender "Producto de ejemplo" a tus clientes. Todo lo que tienes que hacer ahora es agregar campos para aceptar el pago.
Por favor, ten en cuenta que mostrar el campo Producto es opcional. Si bien el campo debe estar presente para poder conectar el formulario con el producto, puedes seleccionar “Oculto” como el Tipo de campo, lo que incluirá el campo al enviar, pero el cliente nunca verá el campo en sí.
La razón por la que podrías querer hacer esto es porque este formulario de pago se puede incrustar (a través de un shortcode) en una página que ya proporciona información importante sobre el producto, incluido el precio. Si este es el caso, mostrar el campo Producto en el formulario puede ser redundante e incluso confuso para el cliente.
Solo recuerda que el campo debe estar presente.
En este punto, deberías guardar tu formulario. El siguiente paso requerirá que visites otras páginas para configurar las opciones de pago. Una vez completado, volveremos al formulario.
Agregar campos de pago
Ahora somos libres de aceptar pagos de los clientes. Para hacerlo, tenemos que configurar el formulario para que acepte al menos un método de pago. Como se mencionó anteriormente, usaremos el complemento PayPal Payments Standard para Gravity Forms para procesar nuestros pagos.
Dependiendo de la pasarela de pago que elijas, es posible que debas o no agregar un campo directo a tu formulario. Por ejemplo, si estás utilizando el complemento Stripe, agregará un campo de Tarjeta de crédito al constructor de formularios que puedes seleccionar como lo has hecho anteriormente.
Sin embargo, el complemento PayPal Payments Standard no lo hace. En cambio, necesitarías seguir las instrucciones directamente de Gravity Forms para configurar tus formularios y usar PayPal para las transacciones de los clientes.
En este artículo, no cubriremos esos detalles. Se aplican a Gravity Forms, ya sea que esté integrado con Easy Digital Downloads o no. Así que querrás usar la documentación de Gravity Forms para encontrar los documentos relevantes para tus necesidades.
Completa todos los pasos requeridos para configurar tus pasarelas de pago. Si se debe agregar un nuevo campo al formulario, hazlo siguiendo los mismos métodos que se describen arriba.
Agregar el monto final del pago (total)
Mientras configurabas tu(s) opción(es) de pago, se te habría indicado que crearas una Feed para cada tipo de pago que aceptarías. Los usuarios de PayPal Payments Standard habrían visitado esta documentación.
En la creación de esa Feed, habrías tenido que establecer el Monto del pago para la Feed. Lo que esto significa es que cada vez que se envía tu formulario de pago, el cliente debe pagar una cierta cantidad y la Feed necesita saber de dónde obtienes esa cantidad.
La configuración del Monto del pago debe establecerse para obtener datos de uno de tus campos del formulario que contenga el valor total del formulario. Sin embargo, aún no hemos configurado ese campo. Guarda el progreso de tu Feed y regresa a tu formulario guardado para que podamos agregar el campo.
En el lado derecho de la pantalla del creador de formularios, selecciona agregar un campo de Total a tu formulario desde la sección Campos de Precios. Una vez agregado, expande el nuevo campo.
Verás que no hay muchas configuraciones. El campo está diseñado para calcular automáticamente el total del formulario basándose en la información que obtiene de los otros campos del formulario y la posible interacción del cliente.
Con este campo agregado a tu formulario y tu formulario actualizado, ahora puedes establecer este campo como la Cantidad de Pago en tu Feed.
Continúa siguiendo el resto de la documentación de Gravity Forms para finalizar la configuración de tu Feed y guardar el nuevo Feed.
Usando tu formulario de pago personalizado
Ahora que has creado un formulario de pago personalizado preparado para aceptar pagos, necesitas mostrar tu formulario. Gravity Forms lo hace extremadamente fácil con el shortcode [[gravityform]]. En cualquier página, publicación o tipo de publicación personalizada que desees, haz clic en el botón Agregar Formulario para añadir un formulario a tu contenido.
Una vez que tu página se guarde, el formulario se mostrará en el front-end y estará listo para aceptar pagos del producto que hayas configurado.
Ten en cuenta que si PayPal Payments Standard es la única pasarela que has configurado, no se mostrará ningún texto relacionado con PayPal en el formulario (a menos que hayas agregado texto personalizado). Simplemente al completar el formulario y enviarlo, se redirigirá al cliente a PayPal para completar el pago.
Ejemplos de lógica condicional
Sería imposible cubrir todas las configuraciones posibles de formularios en este único artículo. Sin embargo, podemos compartir algunos ejemplos para ayudarte a empezar a hacer tu formulario más inteligente y fácil de usar.
Veamos un ejemplo de formulario que usamos aquí en el sitio de Easy Digital Downloads. Para ayudar a los nuevos usuarios a elegir las extensiones que necesitan para poner en marcha sus tiendas, hemos creado el Paquete de Inicio. (Actualización: nuestro Paquete de Inicio ya no está activo, ya que hemos realizado cambios en nuestras opciones generales de compra. Puedes continuar leyendo como si existiera.)
Este formulario independiente no depende de la funcionalidad del carrito de compras.
Dividido en secciones lógicas que incluyen selecciones de extensiones, todo lo que un cliente necesita hacer es seleccionar las extensiones que se ajustan a las necesidades de su negocio, ingresar información personal y de pago, aceptar los términos y completar la compra.
El formulario no solo es completamente personalizado, sino que fácilmente puede ser uno de muchos formularios de pago personalizados en el sitio. Con la información anterior, puedes estar en camino de tener justo eso.
Paquetes de productos personalizados
En nuestro formulario del Paquete de Inicio, es posible que hayas notado el uso de secciones de extensiones enfocadas que permiten al cliente elegir ciertos productos. Veamos específicamente la sección de Marketing.
Cada vez que un usuario marca una casilla para una de nuestras extensiones de marketing, la extensión se agrega a su paquete de inicio personalizado, cambiando así el total del formulario.
Para lograr esto, debes:
- Agrega un nuevo campo de Casillas de verificación a tu formulario. Una vez expandido, aparecerán tres opciones de casilla de verificación predeterminadas en la sección Opciones. Si tienes la intención de usar este campo de casilla de verificación para permitir la selección de cinco productos, por ejemplo, debes crear cinco opciones que representen los nombres de tus cinco productos. Haz que este sea un campo obligatorio.
- Agrega un nuevo campo de Producto a tu formulario. Configura el campo de Producto para que se conecte a uno de los productos de Easy Digital Downloads que referenciaste desde las opciones de tus casillas de verificación. En la configuración de la pestaña General del Producto, establece su Tipo de campo en “Producto único” (no se puede ocultar) y asígnale un precio. En la pestaña Avanzado, marca la configuración Habilitar lógica condicional y configura el campo para que solo se muestre si se selecciona la “Opción” correcta de tu campo de casilla de verificación en el paso 1.
- Repite el paso 2 para todas las Opciones creadas en el paso 1.
Lo que esto hace es agregar campos de Producto al formulario solo cuando se cumplen sus condiciones. Esas condiciones son Opciones verificadas del campo de casilla de verificación. Siempre que esas Opciones representen tus productos y estén vinculadas a ellos a través de la lógica condicional de campos, los clientes pueden crear sus propios paquetes personalizados.
Selector de método de pago
Hacia el final de nuestro formulario Paquete de Inicio, le indicamos al cliente que seleccione un método de pago. Aceptamos pagos a través de Stripe y PayPal.
Como se mencionó anteriormente, se utilizan diferentes métodos para agregar campos al formulario para la información de pago. PayPal Payments Standard no requiere un campo, pero Stripe requiere varios. El campo de Tarjeta de Crédito de Stripe y un campo de Dirección adicional deben agregarse al formulario para procesar los pagos con tarjeta de crédito.
Para crear esto, debes:
- Agrega un nuevo campo de Botones de radio a tu formulario. Una vez expandido, aparecerán tres opciones de radio predeterminadas en la sección Opciones. Dado que permitimos a los clientes elegir entre dos métodos de pago, debes tener dos opciones que representen los nombres de los métodos de pago. En nuestro caso, elegimos Tarjeta de crédito / débito y PayPal como opciones. Haz que este sea un campo obligatorio.
- Agrega todos los campos necesarios para aceptar pagos con tarjeta de crédito según las instrucciones de Gravity Forms. Configura los campos para recopilar toda la información requerida. En la pestaña Avanzado de todos los campos relacionados con tarjetas de crédito, marca la configuración Habilitar lógica condicional y configura los campos para que solo se muestren si se selecciona la “Opción” correcta de tu campo de botones de radio en el paso 1.
- Debido a que PayPal no requiere ningún campo en el formulario, todo lo que necesitas hacer es ir a tu Feed de PayPal para el formulario y, en su configuración, marcar la configuración Habilitar lógica condicional y configurar el Feed para que solo se use si se selecciona la “Opción” correcta de tu campo de botones de radio en el paso 1 (PayPal).
La elección es tuya
Esta es una tarea difícil de abordar porque una vez que comprendes el concepto de la lógica de campos condicionales, realmente tienes un lienzo en blanco para experimentar cada vez que creas un formulario de pago personalizado.
Podemos proporcionar ejemplos, pero las posibilidades son infinitas. La clave de todo es la lógica condicional y el uso estratégico de los campos de Producto.
Depende de ti decidir si tus productos necesitan un formulario de pago más especializado. Del mismo modo, crear algo similar a nuestro Paquete de Inicio es una decisión comercial que solo tú puedes tomar.
Juega con las funciones para ver si te inspira algunas ideas lucrativas.
Preguntas Frecuentes
¿Puedo usar Gravity Forms Checkout con la extensión Recurring Payments?
No. Recurring Payments no se integra con la configuración anterior.
¿Qué pasa con los recibos por correo electrónico y la confirmación de compra?
La redirección de confirmación de compra predeterminada de Easy Digital Downloads ya no se aplica. Sin embargo, Gravity Forms te permitirá configurar un comportamiento de confirmación personalizado si así lo decides. Se recomienda una página estándar con enlaces estáticos.
El recibo por correo electrónico todavía se enviará al usuario y contendrá cualquier información relacionada con el producto que tengas en tu plantilla de recibo. Este comportamiento no cambia.
Consejo: desde una confirmación personalizada que crees en Gravity Forms, dirige a tus clientes a revisar sus correos electrónicos después de la compra y enlaza información importante que pueda minimizar la confusión.
Si permito a los clientes crear paquetes personalizados, ¿se procesan como Paquetes (Bundles)?
La funcionalidad principal de paquetes de Easy Digital Downloads no se aplica. Si un cliente compra 10 productos a través de uno de tus formularios de pago personalizados, cada producto se considera una compra separada.
¿Cómo uso los descuentos?
Para ofrecer descuentos a los clientes que usan el formulario de pago personalizado, simplemente debes establecer los campos de Producto con un precio con descuento. Los clientes no podrán ingresar un código de descuento como en el formulario de pago predeterminado.
¿Cómo diseño mis formularios de pago personalizados?
Es importante tener en cuenta que todo lo que hemos discutido aquí es la creación del formulario y su funcionalidad. Estos son elementos genéricos del formulario y deben ser diseñados por tu tema o tu propio CSS personalizado, al igual que cualquier otro elemento HTML.
Al probar tu formulario, asegúrate de probar su correcto funcionamiento. Que se vea agradable a la vista o no, no es una indicación de cómo funciona. Como te imaginarás, la creación de la visualización del Paquete de Inicio requirió varias horas de trabajo de diseño personalizado.
Si tienes preguntas sobre lo mencionado en este artículo, no dudes en dejar una pregunta a continuación en los comentarios.
Para obtener soporte, utiliza nuestro formulario de soporte.
