Cómo agregar el pago del código Stripe QR en WordPress

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

Un método de pago 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 formas de permitir que los usuarios pague por código QR. Además de eso, 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 largo proceso de configuración.

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

Al final, puede verse fuera de lugar y tener un conflicto de funcionalidad.

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

Es por eso que le recomendamos que use WPFORMS para ayudarlo a crear una opción de pago de código QR.

Primero, con WPFORMS, puede generar dinámicamente códigos QR basados ​​en entradas de formulario, como detalles del usuario, montos de pago o registros de eventos. Esto asegura que los códigos QR siempre sean 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 Visual Builder, ahorrando tiempo.

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

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

Aquí, su prioridad debe ser encontrar una pasarela de pago que sea segura, escalable y fácil de usar. También debe encontrar una que admita muchas monedas, que le brinde acceso a una audiencia global.

Por estas razones, seleccionamos Stripe.

Stripe le permite generar códigos QR dinámicos que vinculan a las páginas de pago en tiempo real. Puede personalizar la página de pago vinculada al código QR con su marca, logotipo y colores.

Stripe admite varios métodos de pago, incluidas tarjetas de crédito/débito, billeteras móviles como Apple Pay y Google Pay, así como los 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 cuales Stripe es una excelente pasarela de pago del código QR.

• Pagos de un toque: los clientes pueden escanear el código QR y completar el pago en segundos utilizando métodos de pago guardados
• Cantidad de pago dinámico: Stripe le permite crear códigos QR vinculados a los montos de pago calculados dinámicamente.
• Integración fácil con los sitios web: Stripe proporciona integraciones y complementos de API simples para plataformas como WordPress.
• Actualizaciones en tiempo real: el tablero de stripe rastrea los pagos realizados a través de códigos QR. Puede monitorear las transacciones al instante.
• Transacciones seguras: los pagos a través de los códigos Stripe QR se procesan de forma segura, con mecanismos avanzados de cifrado y detección de fraude.

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

Con eso fuera del camino, le mostremos, paso a paso, cómo configurar los pagos de código QR en WordPress.

A continuación se muestra una muestra del pago del código Stripe QR que crearemos en este tutorial:

Con eso fuera del camino, comencemos.

Cómo agregar el pago del código Stripe QR en WordPress

Como se mencionó, necesitamos dos herramientas para configurar los pagos QR en WordPress: WPFORMS y Stripe.

Afortunadamente, WPFORMS es compatible con Stripe. Entonces, conectaremos Stripe con WordPress a través de WPFORMS. Este proceso permite a los usuarios pagar por código QR en cualquier formulario que desee usar el Builder Drag y Drop. Esto hace que sea conveniente y fácil para sus usuarios realizar una compra.

Ahora, mira todos los pasos que seguiremos a continuación. Si desea omitir a cualquier paso, simplemente haga clic en él.

• Paso 1: Instale y configure WPForms
• Paso 2: Instale y configure WPForms Stripe Pro Addon
• Paso 3: Crear formulario de pago
• Paso 4: Configure el pago de rayas
• Paso 5: Configurar notificaciones y mensajes de confirmación
• Paso 6: publicar el formulario
• Paso 7: Agregar código QR para pagos de rayas en WordPress

Permítanos guiarlo a través de todo el proceso a continuación.

Paso 1: Instale y configure WPForms

El primer paso es instalar WPForms en su tablero de WordPress. Pero, debemos mencionar que WPFORMS ofrece una versión gratuita que le permite realizar pagos de rayas. Puede acceder a él rápidamente en su repositorio de WordPress y comenzar a hacer formularios.

Pero necesita la versión Pro para funcionalidades de rayas más avanzadas, como usar un código QR.

Esto se debe a que la versión Pro le brinda acceso al Stripe Pro Addon, que necesitaremos en este tutorial. Además de eso, la versión gratuita de WPFORMS viene con una tarifa de transacción del 3%, que puede aumentar el costo de sus productos.

Consulte la última revisión de WPFORMS para obtener más información.

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

Después de comprar el plan Pro o Elite, inicie sesión en su cuenta WPForms y navegue a las descargas .

Después de esto, descargue el archivo ZIP WPForms a su PC. Luego, aún así, en esta página, copie la clave de licencia ; Lo necesitará para activar la versión Pro.

Una vez hecho esto, diríjase a su tablero de WordPress y vaya a complementos »Agregue un nuevo complemento . Luego, instale y active WPForms como lo haría con cualquier otro complemento.

Consulte este tutorial sobre cómo instalar complementos si necesita alguna ayuda.

Después de la activación, debería ver que aparezca una nueva opción de menú en su tablero de WordPress etiquetado como "wpforms". Esto indica que el proceso de instalación fue un éxito.

Después de esto, vaya a WPForms »Configuración» General y pegue la "clave de licencia" que copió anteriormente.

Finalmente, presione la tecla Verify , ¡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: Instale y configure WPForms Stripe Pro Addon

WPFORMS hace que sea súper simple agregar pagos de rayas y configurarlos. Todo lo que tienes que hacer es ir a los complementos de WPForms .

Aquí, desplácese a través de los complementos disponibles o use la función de búsqueda para encontrar el complemento "Stripe Pro". Después de esto, instálelo y active como cualquier otro complemento complemento.

¡Eso es todo! Ahora puede usar funciones de rayas avanzadas en WPFORMS a través de este complemento.

A continuación, configure y configure los pagos de stripe en WPFORMS.

Para hacer esto, diríjase a la configuración de WPFORMS y navegue a la pestaña "Pago". Después de esto, desplácese a la sección Stripe en la página y presione "Conéctese con Stripe".

Será redirigido a una página de registro donde puede agregar sus detalles de inicio de sesión de rayas. Si no tiene una cuenta de Stripe, también puede crear una en esta página.

Una vez conectado, será redirigido a su tablero de WordPress. En este punto, debería ver una garrapata verde junto al "estado de conexión" en la pestaña Stripe.

Consulte este artículo sobre los mejores complementos de rayas si está buscando más herramientas que se conecten fácilmente con Stripe en WordPress.

¡Excelente! Acaba de configurar Stripe y está 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 belleza de usar WPForms es que puede agregar un campo de pago en cualquier formulario que desee.

Por ejemplo, puede agregar un campo de pago a un formulario de registro. Esto combina el registro y el pago con el proceso del código QR, racionalizando el pago. También puede agregarlo a un formulario de donación, formulario de facturación, forma de subasta, formulario de RSVP de fiesta, formulario de pedido y más.

La mejor parte del uso de WPForms es que viene con más de 2000 plantillas de formulario listas para usar. Esto simplifica aún más el proceso. También puede usar el lienzo en blanco si tiene experiencia de diseño.

Para ayudarlo a elegir una plantilla, WPForms le muestra una vista previa para cada uno en la página de plantilla. Si desea ver la plantilla en una pantalla completa, pase el paso sobre ella y seleccione "Ver demostración".

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

Entonces, pasaremos sobre él y llegaremos a "Usar plantilla". Esto abrirá la plantilla en el constructor de formulario de arrastre y caída.

Primero, notará que la interfaz del formulario de formulario se divide en dos secciones: "campos" a la izquierda y una vista previa en vivo de su formulario a la derecha.

Los campos se dividen en campos estándar, campos elegantes y campos de pago. Esto hace que sea fácil encontrar un campo que desee agregar.

WPFORMS ofrece una variedad de tipos de campo, que incluyen texto de una sola línea, correo electrónico, menores desplegables, casillas de verificación y más, lo que le brinda la flexibilidad de crear formularios adaptados a su propósito.

Para agregar un campo, simplemente arrástrelo desde el panel izquierdo y déjelo caer en el lugar deseado en su formulario en la ventana de vista previa a la derecha. Puede reorganizar los campos haciendo clic y arrastrándolos dentro de la vista previa en vivo mientras crea su formulario de contacto.

Esto le permite personalizar el diseño del formulario para satisfacer sus necesidades sin esfuerzo.

Por ejemplo, puede agregar un campo de la casilla de verificación, múltiples elementos o campo de elementos desplegables si desea vender múltiples productos en su formulario. Por otro lado, puede agregar un solo campo de artículos si desea vender solo un producto en el formulario de contacto.

Recuerde, cada plantilla WPFORMS tiene campos previamente agregados, que puede personalizar.

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

Una vez que haya terminado de editar o agregar campos, guarde su formulario usando el botón en la parte superior derecha para asegurarse de que se apliquen todos los cambios. Este simple proceso asegura que incluso los principiantes puedan construir formas funcionales y profesionales en minutos.

Consulte este artículo de comparación en WPFORMS vs. FormStack para ver cómo coinciden en la creación de formularios.

Paso 4: Configure el pago de rayas

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

Para hacer esto, necesitaremos agregar un campo de rayas al formulario. Este es un proceso muy simple, ya que usará el mismo proceso de arrastre y caída que utilizamos anteriormente.

Entonces, vaya al panel de campos y desplácese a los campos de pagos . Aquí, localice el campo "Tarjeta de crédito Stripe", luego arrastre y déjelo caer a la ubicación en el formulario que desea que aparezca.

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

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

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

Una vez seleccionado, abre todas las pasarelas de pago para conectarse con WPFORMS. Puede usar Authorize.net, cupones, PayPal Commerce, PayPal Standard y Square.

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

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

Consulte este artículo para aprender a configurar pagos recurrentes con WPFORMS.

Para nuestro tutorial hoy, estableceremos pagos únicos.

Una vez que use el botón Toggle para habilitar esta función, verá opciones para asignar sus campos de formulario de contacto a los campos de pago. Esto permite que WPFORMS se comunique con Stripe y garantice que los detalles de pago correctos se capturen durante el proceso de envío del formulario.

Nuevamente, WPFORMS facilita el proceso de mapeo.

Todo lo que necesita 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 del recibo de pago de rayas, verá "correo electrónico". Luego, en el menú desplegable por el nombre del cliente, obtendrá "nombre".

Después de mapear, debería parecerse a la captura de pantalla a continuación:

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

Aquí, puede dictar cuándo se deben mostrar o ocultar los campos de pago. WPFORMS incluso le permite agregar múltiples reglas lógicas condicionales.

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

Paso 5: Configurar notificaciones y mensajes de confirmación

Ahora, las notificaciones de correo electrónico y los mensajes de confirmación son importantes para todas las formas. Pero son cruciales para los formularios relacionados con el pago. Proporcionan comentarios instantáneos a los usuarios, asegurándoles que su pago se procesó con éxito.

Las notificaciones por correo electrónico se pueden configurar para enviar un recibo o detalles de confirmación al usuario al tiempo que le notifica 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 la presentación del formulario tuvieron éxito.

Puede establecer el mensaje de confirmación inmediatamente en la misma página que un "mensaje", mostrarlo en otra página en el mismo sitio o en una URL externa.

WPFORMS le permite configurarlos a ambos en Configuración . Aquí, obtienes pestañas para "notificaciones" y "confirmaciones".

Recuerde, garantizar que estos mensajes sean claros y profesionales mejora la confianza del usuario y crea una experiencia general más suave.

Puede consultar este artículo sobre cómo configurar notificaciones de formulario y confirmaciones para una explicación en profundidad.

Paso 6: publicar el formulario

Ahora, con todo establecido, lo único que queda por hacer es publicar su formulario en su sitio de WordPress. Hay dos formas de hacer esto: publicar en una nueva página o publicar en una página existente.

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

Primero, presione el botón Guardar en la parte superior de la página. Una vez hecho esto, seleccione el botón "Incorporar" junto al botón Guardar para abrir una ventana emergente. Luego, en esta ventana, elija "Seleccione la página existente".

En la próxima ventana emergente, elija la página donde desea que aparezca el formulario desde el menú desplegable. Después de este golpe, "Vamos".

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

Después de esto, vaya al extremo izquierdo del editor de bloques y seleccione el botón Plus (+) para abrir los bloques.

Luego, localice el bloque WPForms y arrastre y deje caer a la ubicación en la página donde desea que aparezca su formulario de pago. Una vez que se carga, use el menú desplegable en el bloque para seleccionar el formulario de pago que acaba de construir.

Finalmente, presione Guardar en la parte superior derecha de la página. En este punto, debería ver el formulario de contacto que creó en la página Live.

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

Nuevamente, regrese al botón de inserción en la parte superior del creador de Forma de arrastrar y soltar. Pero esta vez, seleccione "Crear nueva página".

En la próxima ventana emergente, nombre su nueva página y seleccione "Let's Go". Esto abrirá el editor de bloques para la nueva página. Esta vez, la nueva página se cargará con el formulario previamente agregado.

Por supuesto, puede usar bloques de WordPress para personalizar aún más la página. Pero, el formulario debe 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 utilizando 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 rayas en WordPress

Ahora, hay 2 métodos gratuitos y simples para agregar un código QR a su formulario de pago. Primero, puede usar Google Chrome, que tiene una función QR incorporada, o códigos cortos Ultimate, un complemento gratuito de WordPress.

1. Use la función Chrome incorporada para agregar un código QR

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

Puede usar el botón Compartir junto a la barra de texto de URL para abrir la función del código QR.

Si no lo encuentra aquí, presione el botón "Personalizar y controlar" en la parte superior derecha de su navegador Chrome. Esto generalmente se muestra como 3 puntos.

Después de esto, desplácese hacia abajo para lanzar, guardar y compartir . Luego, en el menú desplegable, seleccione "Crear código QR".

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

A continuación, vaya a cualquier página o publique en su sitio y agregue el código QR que descargó. Preferiblemente, agréguelo a las páginas de productos para que pueda redirigir rápidamente a sus usuarios a la página de pago.

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

Eso es todo. Sus usuarios pueden abrir su formulario de pago al instante.

2. Use códigos cortos Ultimate para agregar un código QR

Los códigos cortos construidos por los códigos cortos Ultimate le permiten colocar el código QR en áreas de página más convenientes, widgets, barras laterales y más sin codificar.

Para obtener la versión gratuita de este complemento de código corto, vaya a su repositorio de WordPress y use la función de búsqueda para encontrar "Códigos cortos Ultimate". Después de esto, instálelo y active como lo haría con cualquier otro complemento.

Después de esto, abra una página nueva o existente en su tablero de WordPress. Luego, use la función Plus (+) para buscar "Shortcode".

Arrastre y suelte el bloque de código corto a la posición en la página donde desea que aparezca el código QR.

Una vez hecho esto, seleccione la opción de soporte cuadrado "[]" en la parte superior del bloque de código corto para abrir más opciones. Luego, busque "código QR" de la larga lista de opciones en la ventana emergente.

En la siguiente ventana emergente, ingrese la URL del formulario de pago en el campo de datos . Luego, puede agregar más personalizaciones como tamaño, margen, alinearse, enlace y más.

Después de esto, presione Insertar el código corto y actualizar la página. Debería ver el código QR en la página en vivo en este punto.

Consulte la muestra del código QR de pago a continuación:

La mejor parte es que puede usar este código QR creado en varias páginas y publicaciones sin ediciones adicionales.

¡Eso es todo! Acaba de aprender a agregar el pago del código Stripe QR en WordPress. Esperamos que lo hayas disfrutado. Si tiene más preguntas, consulte las preguntas comúnmente hechas a continuación.

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

¡Felicidades! Ahora puede configurar los códigos de pago QR en su sitio de WordPress. Aquí hay un artículo para mostrarle cómo aceptar pagos de rayas en WordPress si no desea agregar códigos QR a su formulario de pago.

Además de eso, aquí hay otros artículos que puede estar interesado en leer.

• 9 mejores complementos de pago de WordPress
• WP Simple Pay Review: ¿Es el mejor complemento de pago?
• 9 mejores complementos de pago de WordPress

El primer artículo enumera los mejores complementos de pago para WordPress. El siguiente revisa WP Simple Pay, otro complemento de pago increíble. La última publicación clasifica los mejores complementos de pago de WordPress.