Easy Digital Downloads se dedica a proporcionar un sistema de comercio electrónico fácil de usar para los 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, mucha funcionalidad queda 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 ya bastante difícil. Si añadimos la funcionalidad de comercio electrónico, incluso los aficionados al "hazlo tú mismo" tienen problemas.
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 creador 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.
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 complementos de Gravity Forms para añadir funcionalidad adicional a los propios formularios. 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, pongámonos en marcha. Te guiaremos a través de 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 la manera original.
Los formularios de pago personalizados con Gravity Forms Checkout simplemente añaden otra opción. Tus productos todavía 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.
Añadiendo 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 por defecto, aunque puedes ocultarlos si así lo deseas.
Necesitarás recopilar al menos una dirección de correo electrónico de tus clientes. Así que añadiremos 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 añadir 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 añadirá el campo a tu formulario (lado izquierdo de la pantalla) con un contenido mínimo por defecto. 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 añadir campos como nombre y apellido. No discutiremos esos en este artículo, pero el proceso es muy similar a añadir el campo de Correo electrónico.
Ahora que tenemos un campo de correo electrónico requerido, añadamos 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, añadiremos 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 rellenar el formulario.
El campo de Sección se encuentra en la sección Campos Estándar. Añádelo a tu formulario y expándelo para ver sus opciones.
Basándonos en el tipo de campo y el hecho de que añadiremos 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 constructor de formularios. Ten en cuenta que algunos campos requieren que actualices el formulario para previsualizar.
La vista previa de su formulario no es una representación de cómo se diseñará en el front-end. En su lugar, utilice la vista previa para observar 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á familiarizado con Gravity Forms, lo que ha hecho hasta ahora es cómo usaría el generador de formularios para cualquier tipo de formulario que cree, no solo con Easy Digital Downloads. Si no tiene claro cómo funcionan las funciones básicas del generador de formularios, visite la documentación de Gravity Forms.
En esta etapa del proceso, la vista previa de su formulario debería parecerse a esto:
Con el título del formulario, la descripción del formulario, 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
Recuerde, este es un formulario extremadamente básico y su propósito es servir como el pago de 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, encuentre la sección Campos de precios. En esa sección, seleccione agregar un nuevo campo de Producto haciendo clic en el botón etiquetado como Producto. Una vez agregado, expanda 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 del 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 en "Producto único" con un Precio de $10. Tenga 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 Desactivar 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, ha creado un formulario que está preparado para vender "Producto de ejemplo" a sus clientes. Todo lo que tiene que hacer ahora es agregar campos para aceptar el pago.
Tenga en cuenta que mostrar el campo Producto es opcional. Si bien el campo debe estar presente para conectar el formulario al producto, puede seleccionar "Oculto" como el Tipo de campo, lo que incluirá el campo al enviarlo, pero el cliente nunca verá el campo en sí.
El motivo por el que quizás quieras hacer esto es porque este formulario de pago puede ser incrustado (mediante 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 del 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.
Añadiendo campos de pago
Ahora somos libres de aceptar pagos de los clientes. Para ello, tenemos que configurar el formulario para que acepte al menos un método de pago. Como se mencionó anteriormente, utilizaremos el complemento PayPal Payments Standard para Gravity Forms para procesar nuestros pagos.
Dependiendo de la pasarela de pago que elijas, es posible que tengas o no que añadir un campo directo a tu formulario. Por ejemplo, si estás utilizando el complemento de Stripe, añadirá un campo de Tarjeta de crédito al constructor de formularios que podrás seleccionar como lo has hecho anteriormente.
Sin embargo, el complemento PayPal Payments Standard no lo hace. En su lugar, tendrías que seguir las instrucciones directamente de Gravity Forms para configurar tus formularios para usar PayPal en las transacciones de los clientes.
En este artículo, no cubriremos esos detalles. Se aplican a Gravity Forms tanto si está integrado con Easy Digital Downloads como si no. Por lo tanto, querrás usar la documentación de Gravity Forms para encontrar la documentación relevante para tus necesidades.
Completa todos los pasos requeridos para configurar tus pasarelas de pago. Si se debe añadir un nuevo campo al formulario, hazlo siguiendo los mismos métodos descritos anteriormente.
Añadiendo el importe final del pago (total)
Mientras configurabas tu(s) opción(es) de pago, se te habría indicado que crearas un Feed para cada tipo de pago que aceptaras. Los usuarios de PayPal Payments Standard habrían visitado esta documentación.
En la creación de ese Feed, habrías tenido que establecer el Importe del pago para el Feed. Lo que esto significa es que cada vez que se envíe tu formulario de pago, el cliente debe pagar una cierta cantidad y el Feed necesita saber de dónde obtienes esa cantidad.
La configuración del Importe 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 vuelve a tu formulario guardado para que podamos añadir el campo.
En el lado derecho de la pantalla del constructor de formularios, selecciona añadir un campo de Total a tu formulario desde la sección Campos de precios. Una vez añadido, 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 añadido a tu formulario y tu formulario actualizado, ahora puedes establecer este campo como el Importe del pago en tu Feed.
Continúe siguiendo el resto de la documentación de Gravity Forms para finalizar la configuración de su Feed y guardar el nuevo Feed.
Uso de su formulario de pago personalizado
Ahora que ha creado un formulario de pago personalizado preparado para aceptar pagos, necesita mostrar su 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 desee, haga clic en el botón Añadir formulario para agregar un formulario a su contenido.
Una vez guardada su página, el formulario se mostrará en el front-end y estará listo para aceptar pagos para cualquier producto que haya configurado.
Tenga en cuenta que si PayPal Payments Standard es la única pasarela que ha configurado, no se mostrará ningún texto relacionado con PayPal en el formulario (a menos que haya agregado texto personalizado). Simplemente al completar el formulario y enviarlo, el cliente será redirigido a PayPal para completar el pago.
Ejemplos de lógica condicional
Sería imposible cubrir todas las posibles configuraciones de formularios en este único artículo. Sin embargo, podemos compartir algunos ejemplos para ayudarle a empezar a hacer su formulario más inteligente y fácil de usar.
Veamos un formulario de ejemplo 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. Puede 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, introducir la información personal y de pago, aceptar los términos y completar la compra.
El formulario no solo es completamente personalizado, sino que puede ser fácilmente uno de muchos formularios de pago personalizados en el sitio. Con la información anterior, puede estar bien encaminado para tener precisamente eso.
Paquetes de productos personalizados
En nuestro formulario del Paquete de Inicio, es posible que haya 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, debe:
- Agregue un nuevo campo de Casillas de verificación a su formulario. Una vez expandido, aparecerán tres opciones de casilla de verificación predeterminadas en la sección Opciones. Si tiene la intención de usar este campo de casilla de verificación para permitir la selección de cinco productos, por ejemplo, debe crear cinco opciones que representen los nombres de sus cinco productos. Haga que este sea un campo obligatorio.
- Añade un campo de Producto nuevo a tu formulario. Configura el campo de Producto para que se conecte a uno de los productos de Easy Digital Downloads que has referenciado de tus selecciones de casilla 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 solo añadir campos de Producto al formulario cuando se cumplen sus condiciones. Esas condiciones son Opciones comprobadas 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 de campos condicionales, 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:
- Añade un campo nuevo 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.
- Dado 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 utilice si se selecciona la “Opción” correcta de tu campo de botones de radio en el paso 1 (PayPal).
La elección es tuya
Es difícil escribir sobre esto porque una vez que comprendes el concepto de lógica de campos condicionales, realmente tienes un lienzo en blanco con el que jugar 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.
Tú decides 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 surgen ideas lucrativas.
Preguntas frecuentes
¿Puedo usar Gravity Forms Checkout con la extensión de Pagos Recurrentes?
No. Pagos Recurrentes 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 deseas. Se recomienda una página estándar con enlaces estáticos.
El recibo por correo electrónico se seguirá enviando al usuario, conteniendo 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?
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 utilizan el formulario de pago personalizado, simplemente debes establecer los campos de Producto con un precio con descuento. Los clientes no podrán introducir 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 no es un indicio de cómo funciona. Como te imaginarás, crear la visualización del Paquete de Inicio llevó varias horas de trabajo de diseño personalizado.
Si tienes alguna pregunta sobre lo mencionado en este artículo, no dudes en dejarla a continuación en los comentarios.
Para obtener soporte, utiliza nuestro formulario de soporte.
