Cómo agregar pago con código QR de Stripe en WordPress

¿Está buscando agregar una opción de pago con código QR en su sitio de WordPress?

Un método de pago con código QR permite a los usuarios escanear y acceder a su enlace de pago en sus teléfonos. Esto hace que el proceso de pago sea más simple y fácil para ellos.

Pero, hay muchas maneras de permitir que los usuarios paguen con código QR. Además, hay muchas pasarelas de pago que puede integrar con el código QR.

Por ejemplo, puede agregar manualmente un código QR de pago a su sitio utilizando plataformas como QR Code Generator o QRStuff. Pero esto requiere un proceso de configuración largo.

Debe ingresar la información al código QR, como el enlace de pago, la URL del sitio web y los detalles de contacto. También debe personalizar el código QR por separado de su sitio y descargarlo como una imagen.

Al final, puede parecer fuera de lugar y tener conflictos de funcionalidad.

Además, los códigos QR generados manualmente son estáticos, lo que significa que cualquier actualización requiere regenerar y reemplazar la imagen en su sitio.

Es por eso que le recomendamos que utilice WPForms para ayudarle a crear una opción de pago con código QR.

Primero, con WPForms, puede generar códigos QR dinámicamente basándose en las entradas del formulario, como detalles del usuario, montos de pago o registros de eventos. Esto asegura que los códigos QR sean siempre relevantes y personalizados sin intervención manual.

También puede agregar rápidamente un código QR con su enlace de pago a cualquier formulario o página utilizando el constructor visual, ahorrando tiempo.

La mejor parte es que WPForms se integra con pasarelas de pago como PayPal y Stripe, lo que facilita la generación de códigos QR vinculados a páginas de pago.

Ahora que hemos seleccionado una herramienta para crear el código QR de pago, la siguiente pregunta es, ¿qué pasarela es mejor para configurar códigos QR de pago?

Aquí, tu prioridad debe ser encontrar una pasarela de pago que sea segura, escalable y fácil de usar. También deberías encontrar una que soporte muchas monedas, dándote acceso a una audiencia global.

Por estas razones, seleccionamos Stripe.

Stripe te permite generar códigos QR dinámicos que enlazan a páginas de pago en tiempo real. Puedes personalizar la página de pago enlazada al código QR con tu marca, logotipo y colores.

Stripe soporta varios métodos de pago, incluyendo tarjetas de crédito/débito, billeteras móviles como Apple Pay y Google Pay, así como sistemas de pago locales.

Como resultado, un solo código QR puede dirigir a los usuarios a una página de pago donde eligen su método preferido.

Aquí hay otras razones por las que Stripe es una excelente pasarela de pago con código QR.

• Pagos con un toque: Los clientes pueden escanear el código QR y completar el pago en segundos utilizando métodos de pago guardados.
• Montos de pago dinámicos: Stripe te permite crear códigos QR vinculados a montos de pago calculados dinámicamente.
• Fácil integración con sitios web: Stripe proporciona integraciones de API sencillas y plugins para plataformas como WordPress.
• Actualizaciones en tiempo real: El panel de Stripe rastrea los pagos realizados a través de códigos QR. Puedes monitorear las transacciones al instante.
• Transacciones seguras: Los pagos a través de códigos QR de Stripe se procesan de forma segura, con cifrado avanzado y mecanismos de detección de fraude.

Como puedes ver, la combinación de Stripe y WPforms es una excelente manera de recibir pagos a través de códigos QR.

Con eso dicho, te mostraremos, paso a paso, cómo configurar pagos con código QR en WordPress.

A continuación, se muestra un ejemplo del pago con código QR de Stripe que crearemos en este tutorial:

Con eso dicho, empecemos.

Cómo agregar pago con código QR de Stripe en WordPress

Como se mencionó, necesitamos dos herramientas para configurar pagos con código QR en WordPress: WPForms y Stripe.

Por suerte, WPForms es compatible con Stripe. Por lo tanto, conectaremos Stripe con WordPress a través de WPForms. Este proceso permite a los usuarios pagar con código QR en cualquier formulario que desees utilizando el constructor de arrastrar y soltar. Esto hace que sea conveniente y fácil para tus usuarios realizar una compra.

Ahora, revisa todos los pasos que seguiremos a continuación. Si deseas saltar a algún paso, simplemente haz clic en él.

• Paso 1: Instalar y configurar WPForms
• Paso 2: Instalar y configurar el complemento WPForms Stripe Pro
• Paso 3: Crear Formulario de Pago
• Paso 4: Configurar el pago con Stripe
• Paso 5: Configurar notificaciones y mensajes de confirmación
• Paso 6: Publicar el formulario
• Paso 7: Agregar código QR para pagos con Stripe en WordPress

Te guiaremos a través de todo el proceso a continuación.

Paso 1: Instalar y configurar WPForms

El primer paso es instalar WPforms en tu panel de WordPress. Sin embargo, debemos mencionar que WPforms ofrece una versión gratuita que te permite realizar pagos con Stripe. Puedes acceder a ella rápidamente en tu repositorio de WordPress y comenzar a crear formularios.

Pero necesitas la versión pro para funcionalidades más avanzadas de Stripe, como el uso de un código QR.

Esto se debe a que la versión pro te da acceso al complemento Stripe Pro, que necesitaremos en este tutorial. Además de eso, la versión gratuita de WPForms viene con una tarifa de transacción del 3%, lo que puede aumentar el costo de tus productos.

Echa un vistazo a la última reseña de WPForms para obtener más información.

Para comenzar, dirígete al sitio web oficial de WPForms y regístrate para obtener un plan. Ofrecen una variedad de planes, lo que facilita encontrar uno que se ajuste a tu presupuesto y necesidades. Pero, para usar específicamente el complemento Stripe Pro, necesitas los planes Pro o Elite de WPForms.

Después de comprar el plan Pro o Elite, inicia sesión en tu cuenta de WPForms y navega a Descargas.

Después de esto, descarga el archivo Zip de WPForms a tu PC. Luego, todavía en esta página, copia la Clave de licencia; la necesitarás para activar la versión pro.

Una vez hecho esto, dirígete a tu panel de WordPress y ve a Plugins » Añadir nuevo plugin. Luego, instala y activa WPForms como lo harías con cualquier otro plugin.

Echa un vistazo a este tutorial sobre cómo instalar plugins si necesitas ayuda.

Después de la activación, deberías ver una nueva opción de menú en tu panel de WordPress etiquetada como “WPForms”. Esto indica que el proceso de instalación fue un éxito.

Después de esto, ve a WPForms » Ajustes » General y pega la “Clave de licencia” que copiaste anteriormente.

Finalmente, haz clic en Verificar clave, ¡y eso es todo! Estás listo para usar WPForms.

A continuación, veamos cómo configurar el pago de Stripe en WordPress a través de WPForms.

Paso 2: Instalar y configurar el complemento WPForms Stripe Pro

WPforms hace que sea muy sencillo añadir pagos de Stripe y configurarlos. Todo lo que tienes que hacer es ir a WPForms » Complementos.

Aquí, desplázate por los complementos disponibles o utiliza la función de búsqueda para encontrar el complemento “Stripe Pro”. Después de esto, instálalo y actívalo como cualquier otro complemento de plugin.

¡Eso es todo! Ahora puedes usar funciones avanzadas de Stripe en WPForms a través de este complemento.

A continuación, configura y establece los pagos de Stripe en WPForms.

Para hacer esto, dirígete a WPForms » Ajustes y navega a la pestaña “Pago”. Después de esto, desplázate hasta la sección Stripe en la página y haz clic en “Conectar con Stripe”.

Serás redirigido a una página de registro donde podrás añadir tus datos de inicio de sesión de Stripe. Si no tienes una cuenta de Stripe, también puedes crear una en esta página.

Una vez conectado, serás redirigido de vuelta a tu panel de WordPress. En este punto, deberías ver una marca verde junto a “Estado de la conexión” en la pestaña de Stripe.

Echa un vistazo a este artículo sobre los mejores plugins de Stripe si buscas más herramientas que se conecten tan fácilmente con Stripe en WordPress.

¡Genial! Acabas de configurar Stripe y estás listo para recibir pagos.

Paso 3: Crear Formulario de Pago

El siguiente paso es configurar un formulario de pago donde los usuarios puedan realizar pagos. Como se mencionó, la ventaja de usar WPForms es que puedes agregar un campo de pago en cualquier formulario que desees.

Por ejemplo, puedes agregar un campo de pago a un formulario de registro. Esto combina el registro y el pago con el proceso de código QR, agilizando el pago. También puedes agregarlo a un formulario de donación, formulario de facturación, formulario de subasta, formulario de RSVP para fiestas, formulario de pedido y más.

Lo mejor de usar WPforms es que viene con más de 2000 plantillas de formularios listas para usar. Esto simplifica aún más el proceso. También puedes usar el lienzo en blanco si tienes experiencia en diseño.

Para ayudarte a elegir una plantilla, WPforms te muestra una vista previa de cada una en la página de plantillas. Si deseas ver la plantilla en pantalla completa, colócale el cursor encima y selecciona "ver demostración".

Nuestro tutorial paso a paso utilizará la plantilla "Formulario de contacto simple".

Así que, colocaremos el cursor sobre ella y haremos clic en "Usar plantilla". Esto abrirá la plantilla en el constructor de formularios de arrastrar y soltar.

Primero, notarás que la interfaz del constructor de formularios está dividida en dos secciones: "Campos" a la izquierda y una vista previa en vivo de tu formulario a la derecha.

Los campos se dividen en Campos Estándar, Campos Elegantes y Campos de Pago. Esto facilita encontrar un campo que desees agregar.

WPForms ofrece una variedad de tipos de campos, incluyendo texto de una sola línea, correo electrónico, menús desplegables, casillas de verificación y más, lo que te brinda la flexibilidad de crear formularios adaptados a tu propósito.

Para agregar un campo, simplemente arrástralo desde el panel izquierdo y suéltalo en la ubicación deseada en tu formulario en la ventana de vista previa a la derecha. Puedes reorganizar los campos haciendo clic y arrastrándolos dentro de la vista previa en vivo mientras crea tu formulario de contacto.

Esto te permite personalizar el diseño del formulario para que se adapte a tus necesidades sin esfuerzo.

Por ejemplo, puedes agregar un campo de Casillas de verificación, Elementos múltiples o Elementos desplegables si deseas vender varios productos en tu formulario. Por otro lado, puedes agregar un campo de Elemento único si deseas vender solo un producto en el formulario de contacto.

Recuerda que cada plantilla de WPForms tiene campos preagregados que puedes personalizar.

Para editar un campo, selecciónalo en la vista previa del formulario y las opciones del campo aparecerán a la izquierda. Desde aquí, puedes modificar la etiqueta del campo, el texto de marcador de posición y otras configuraciones, como si el campo es obligatorio.

Una vez que hayas terminado de editar o agregar campos, Guarda tu formulario usando el botón en la parte superior derecha para asegurarte de que todos los cambios se apliquen. Este proceso simple garantiza que incluso los principiantes puedan crear formularios profesionales y funcionales en minutos.

Echa un vistazo a este artículo comparativo sobre WPForms vs. FormStack para ver cómo se comparan en la creación de formularios.

Paso 4: Configurar el pago con Stripe

Con tu formulario de contacto listo, configurar la opción de pago de Stripe es el siguiente paso.

Para hacer esto, necesitaremos agregar un campo de Stripe al formulario. Este es un proceso muy simple, ya que utilizarás el mismo proceso de arrastrar y soltar que usamos anteriormente.

Entonces, ve al panel de campos y desplázate hasta Campos de pago. Aquí, localiza el campo "Tarjeta de crédito de Stripe", luego arrástralo y suéltalo en la ubicación del formulario donde deseas que aparezca.

El campo de pago de Stripe de WPforms viene preconfigurado con las líneas de texto para el número de tarjeta, la fecha de vencimiento, el CVC y el país. Por lo tanto, no necesita personalizar más el campo de tarjeta de crédito de Stripe.

Consulta este artículo para conocer otra forma conveniente de recibir pagos con tarjeta en WordPress.

Con el campo de pago de Stripe listo, ve a la pestaña "Pagos" en el extremo izquierdo.

Una vez seleccionado, se abren todas las pasarelas de pago para conectarse con WPForms. Puedes usar Authorize.Net, Cupones, PayPal Commerce, PayPal Standard y Square.

Pero, la pasarela de pago recomendada es Stripe, que encontrarás en la parte superior de esta página.

Una vez que selecciones esta opción, se abrirá una nueva página a la izquierda con un botón de alternancia para habilitar "Pagos únicos" o "Pagos recurrentes".

Consulta este artículo para aprender cómo configurar pagos recurrentes con WPForms.

Para nuestro tutorial de hoy, configuraremos Pagos únicos.

Una vez que uses el botón de alternancia para habilitar esta función, verás opciones para mapear los campos de tu formulario de contacto a los campos de pago. Esto permite que WPforms se comunique con Stripe y asegure que los detalles de pago correctos se capturen durante el proceso de envío del formulario.

De nuevo, WPForms facilita el proceso de mapeo.

Todo lo que necesitas hacer es seleccionar una opción de los menús desplegables. De hecho, los menús desplegables solo contienen el campo *más probable* para ser mapeado, lo que lo hace aún más fácil.

Por ejemplo, bajo el menú desplegable Recibo de pago de Stripe, verás "Email". Luego, en el menú desplegable Nombre del cliente, obtendrás "Nombre".

Después del mapeo, debería verse como en la captura de pantalla a continuación:

Para mejorar aún más la experiencia del usuario, puedes activar Lógica Condicional en la parte inferior de esta página.

Aquí, puedes dictar cuándo se deben mostrar u ocultar los campos de pago. WPForms incluso te permite agregar múltiples reglas de lógica condicional.

Además de la lógica condicional, aquí hay otra forma de reducir el abandono de formularios que puede ser útil.

Paso 5: Configurar notificaciones y mensajes de confirmación

Ahora bien, las notificaciones por correo electrónico y los mensajes de confirmación son importantes para todos los formularios. Pero, son cruciales para los formularios relacionados con pagos. Proporcionan feedback instantáneo a los usuarios, asegurándoles que su pago se procesó correctamente.

Las notificaciones por correo electrónico se pueden configurar para enviar un recibo o detalles de confirmación al usuario, y al mismo tiempo notificarte sobre la transacción.

Los mensajes de confirmación, que se muestran inmediatamente después del envío del formulario, ayudan a eliminar la confusión al informar a los usuarios que su pago y el envío del formulario fueron exitosos.

Puedes configurar el mensaje de confirmación inmediatamente en la misma página como un "Mensaje", mostrarlo en otra página del mismo sitio o en una URL externa.

WPForms te permite configurarlos ambos en Ajustes. Aquí, obtienes pestañas tanto para “Notificaciones” como para “Confirmaciones”.

Recuerda, asegurarte de que estos mensajes sean claros y profesionales aumenta la confianza del usuario y crea una experiencia general más fluida.

Puedes consultar este artículo sobre cómo configurar notificaciones y confirmaciones de formularios para una explicación detallada.

Paso 6: Publicar el formulario

Ahora, con todo configurado, lo único que queda por hacer es publicar tu formulario en tu sitio de WordPress. Hay dos maneras de hacerlo: Publicar en una página nueva o publicar en una página existente.

Veamos cómo publicar en una página existente.

Primero, presiona el botón Guardar en la parte superior de la página. Una vez hecho, selecciona el botón “Incrustar” junto al botón Guardar para abrir una ventana emergente. Luego, en esta ventana, elige “Seleccionar página existente”.

En la siguiente ventana emergente, elige la página donde quieres que aparezca el formulario desde el menú desplegable. Después de esto, presiona “Vamos”.

Esto abrirá la página en el editor de bloques de WordPress.

Después de esto, ve al extremo izquierdo del editor de bloques y selecciona el botón Signo más (+) para abrir los bloques.

Luego, localiza el bloque de WPForms y arrástralo y suéltalo en la ubicación de la página donde quieres que aparezca tu formulario de pago. Una vez que cargue, usa el menú desplegable en el bloque para seleccionar el formulario de pago que acabas de crear.

Finalmente, presiona Guardar en la parte superior derecha de la página. En este punto, deberías ver el formulario de contacto que creaste en la página en vivo.

A continuación, veamos cómo agregar el formulario de pago a una página nueva.

De nuevo, regresa al botón Incrustar en la parte superior del constructor de formularios de arrastrar y soltar. Pero esta vez, selecciona “Crear página nueva”.

En el siguiente popup, nombre su nueva página y seleccione “Vamos”. Esto abrirá el editor de bloques para la nueva página. Esta vez, la nueva página se cargará con el formulario pre-agregado.

Por supuesto, puede usar bloques de WordPress para personalizar aún más la página. Pero, el formulario debería estar listo para publicar tal como está. Una vez que esté satisfecho con el formulario, presione “Publicar” en la parte superior de la página.

¡Eso es todo! Ahora puede publicar un formulario usando WPForms en páginas existentes y nuevas.

A continuación, veamos cómo agregar un código QR para aceptar pagos a través del formulario.

Paso 7: Agregar código QR para pagos de Stripe en WordPress

Ahora, existen 2 métodos gratuitos y sencillos para agregar un código QR a tu formulario de pago. Primero, puedes usar Google Chrome, que tiene una función de QR integrada, o Shortcodes Ultimate, un plugin gratuito para WordPress.

1. Usa la Función Integrada de Chrome para Agregar un Código QR

Para crear un código QR usando la función de Google Chrome, abre la página del formulario de pago en el navegador.

Puedes usar el botón de compartir junto a la barra de texto de la URL para abrir la función de código QR.

Si no lo encuentras aquí, presiona el botón “Personalizar y controlar” en la parte superior derecha de tu navegador Chrome. Esto generalmente se muestra como 3 puntos.

Después de esto, desplázate hacia abajo hasta Transmitir, Guardar y Compartir. Luego, desde el menú desplegable, selecciona “Crear código QR”.

Luego, en la ventana emergente que aparece a continuación, descarga el código QR como una imagen.

A continuación, ve a cualquier página o publicación en tu sitio y agrega el código QR que descargaste. Preferiblemente, agrégalo a las páginas de productos para poder redirigir rápidamente a tus usuarios a la página de pago.

A continuación, todo lo que tienes que hacer es editar la página o publicación en el editor de bloques. Luego, usa el bloque de imágenes para agregar el código QR.

Eso es todo. Tus usuarios podrán abrir tu formulario de pago al instante.

2. Usa Shortcodes Ultimate para Agregar un Código QR

Los shortcodes creados por Shortcodes Ultimate te permiten colocar el Código QR en áreas de página más convenientes, widgets, barras laterales y más sin necesidad de codificar.

Para obtener la versión gratuita de este plugin de shortcode, ve a tu repositorio de WordPress y usa la función de búsqueda para encontrar “Shortcodes Ultimate”. Después de esto, instálalo y actívalo como cualquier otro plugin.

Después de esto, abre una página nueva o existente en tu panel de WordPress. Luego, usa la función Signo más (+) para buscar “shortcode”.

Arrastra y suelta el bloque de shortcode en la posición de la página donde deseas que aparezca el código QR.

Una vez hecho esto, selecciona la opción de corchetes “[]” en la parte superior del bloque de shortcode para abrir más opciones. Luego, busca “QR Code” en la larga lista de opciones en la ventana emergente.

En la siguiente ventana emergente, ingresa la URL del formulario de pago en el campo Data. Luego, puedes agregar más personalizaciones como tamaño, margen, alineación, enlace y más.

Después de esto, haz clic en Insert Shortcode y actualiza la página. Deberías ver el código QR en la página en vivo en este punto.

Echa un vistazo a la muestra del código QR de pago a continuación:

La mejor parte es que puedes usar este código QR creado en múltiples páginas y publicaciones sin ediciones adicionales.

¡Eso es todo! Acabas de aprender a agregar pagos con código QR de Stripe en WordPress. Esperamos que lo hayas disfrutado. Si tienes más preguntas, consulta las preguntas frecuentes a continuación.

Preguntas frecuentes: Cómo agregar pagos con código QR de Stripe en WordPress

¡Felicitaciones! Ahora puedes configurar códigos de pago QR en tu sitio de WordPress. Aquí tienes un artículo que te muestra cómo aceptar pagos de Stripe en WordPress si no deseas agregar códigos QR a tu formulario de pago.

Además de eso, aquí tienes otros artículos que podrían interesarte.

• Los 9 mejores plugins de pago para WordPress
• Reseña de WP Simple Pay: ¿Es el mejor plugin de pago?
• Los 9 mejores plugins de pago para WordPress

El primer artículo enumera los mejores plugins de pago para WordPress. El siguiente reseña WP Simple Pay, otro increíble plugin de pago. La última publicación clasifica los mejores plugins de pago de WordPress.