Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir pago con código QR de Stripe en WordPress

Los códigos QR, o códigos de respuesta rápida, son un tipo de código de barras que los usuarios pueden escanear utilizando sus teléfonos móviles. Puede mostrar un formulario de pago de Stripe utilizando códigos QR para ayudar a los clientes a comprar fácilmente un producto o servicio.

Actualmente, muchos usuarios de WordPress tienen dificultades para añadir códigos QR a sus sitios web y aceptar pagos en línea. Para ayudarte, hemos probado y utilizado un montón de plugins diferentes.

Según nuestra experiencia, la forma más sencilla es crear un formulario de pago de Stripe utilizando WPForms y luego crear un código QR para el formulario utilizando los ajustes del navegador Google Chrome o el plugin Shortcodes Ultimate.

En este artículo, le mostraremos cómo añadir el pago por código QR de Stripe en WordPress.

How to add Stripe payment QR code payment in WordPress

¿Por qué añadir el pago con código QR de Stripe en WordPress?

Stripe es una popular pasarela de pago que te permite aceptar pagos online en tu sitio WordPress o tienda de comercio electrónico. Hace que sea muy fácil para los clientes a pagar con sus tarjetas de crédito.

Lo mejor es que los clientes no tienen que pasar por un largo proceso de registro. Basta con que introduzcan su tarjeta de crédito en el sitio web para realizar la compra.

Añadir pagos con código QR de Stripe a su sitio ofrece a los clientes la flexibilidad de completar una compra rápidamente. Los clientes pueden simplemente explorar el código para abrir el enlace de pago.

Esto hace que el proceso de finalizar compra / pago sea muy sencillo y rápido. Ayuda a la gente a comprar fácilmente un producto y un servicio en su tienda en línea. Como resultado, aumentarán las conversiones y se reducirán los abandonos de carrito.

Dicho esto, veamos cómo puede añadir un código QR de pago de Stripe a su sitio web de WordPress.

Crear un formulario de pago de Stripe en WordPress

En primer lugar, tendrá que añadir un formulario de pago de Stripe en su sitio web para aceptar pagos en línea de los clientes.

La mejor manera de hacerlo es usando WPForms. Es el mejor plugin de formulario de contacto para WordPress que es super fácil de usar y se integra fácilmente con Stripe. Hay muchas plantillas de formularios para elegir, y puedes personalizarlas usando el maquetador de arrastrar y soltar.

Para este tutorial, necesitará la licencia WPForms Pro porque incluye el complemento Stripe. También hay una versión WPForms Lite que puede utilizar de forma gratuita. Le permite aceptar pagos de Stripe, pero hay una tarifa de transacción del 3% para los pagos realizados a través de sus formularios.

Para empezar, necesitará descargar e instalar el plugin WPForms. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puede ir a WPForms ” Ajustes desde su escritorio de WordPress e introducir la clave de licencia. Puede encontrar la clave en el área de su cuenta en el sitio web de WPForms.

Adding a license key to the WPForms form builder plugin

Basta con introducir la clave y hacer clic en el botón “Verificar clave”.

Una vez hecho esto, tendrá que ir a la página WPForms ” Extensiones e instalar la extensión Stripe.

Installing the Stripe addon

Siga adelante y haga clic en el botón ‘Instalar extensión’, y WPForms la instalará y activará automáticamente.

Desde aquí, puede dirigirse a WPForms ” Configuración desde el panel de administración de WordPress e ir a la pestaña ‘Pagos’.

A continuación, simplemente haga clic en el botón “Conectar con Stripe” y siga las instrucciones en pantalla para conectar su cuenta con WPForms.

Click the connect with Stripe button

Una vez que Stripe está conectado, puede ir a WPForms ” Añadir nuevo para crear un nuevo formulario.

WPForms ofrece muchas plantillas de formularios entre las que elegir. Puede seleccionar un formulario de contacto simple, un formulario de pedido o un formulario de pago de Stripe y personalizarlo.

Stripe payment form

Para este tutorial, utilizaremos la plantilla ‘Formulario de pago de Stripe’.

A continuación, puede personalizar su formulario utilizando el editor de arrastrar y soltar. Por defecto, verás diferentes campos de formulario en la plantilla.

Sin embargo, WPForms le permite añadir más campos de formulario a la plantilla, como un desplegable, casillas de verificación, correo electrónico, teléfono, dirección, sitio web y más.

Customize Stripe payment form

También puede hacer clic en cualquier campo de formulario de la plantilla para personalizarla aún más.

Por ejemplo, cambiamos el texto de cada elemento en su formulario de demostración y activamos la opción de mostrar los precios después de la etiqueta del elemento.

Customize form field in stripe payment form

Una vez que haya terminado de editar el formulario, simplemente cambie a la pestaña “Pagos” y seleccione “Stripe” en el menú de la izquierda.

Desde aquí, asegúrese de que la opción “Activar pagos de Stripe” está activada.

Enable Stripe payments

A continuación, puedes cambiar a la pestaña de ajustes. Aquí verás opciones para cambiar los ajustes de aviso y confirmación.

Por ejemplo, puede seleccionar qué acción debe tener lugar una vez que un usuario envía un formulario. WPForms le permite mostrar un mensaje o una página o incluso redirigir a los usuarios a una URL.

Confirmation settings form

Ya está listo para mostrar su formulario de pago de Stripe en su sitio web.

Sólo tienes que hacer clic en el botón “Guardar” para guardar los cambios e incrustarlos en la parte superior.

Save and embed your form

A continuación, WPForms mostrará una ventana emergente donde puede elegir una página existente o crear una nueva para incrustar su formulario.

Elegiremos la opción “Seleccionar página existente” para este tutorial.

Embed a form in page

A continuación, tendrás que introducir un nombre para tu nueva página.

Una vez hecho esto, basta con hacer clic en el botón “Let’s Go”.

Enter name for your new page

Después de eso, verá una vista previa de su formulario de pago de Stripe en el editor de contenido de WordPress.

Puede publicar la página y visitar el sitio web para verla en acción.

Stripe payment form preview

Ahora, sigue adelante y copia el enlace a la página de tu formulario de pago, ya que lo necesitarás para crear un código QR.

Método alternativo: También puede crear un formulario de pago de Stripe utilizando WP Simple Pay. Es el mejor plugin de pago de Stripe para WordPress que le ayuda a cobrar los pagos en línea sin necesidad de establecer un carrito de compras.

WP Simple Pay es una opción más directa que WPForms. Es perfecta si solo buscas crear un formulario básico para aceptar pagos con tarjeta de crédito.

Sin embargo, si busca más opciones de personalización y plantillas de formularios, le recomendamos que utilice WPForms.

Para más detalles, puede consultar nuestra guía detallada sobre cómo aceptar pagos con Stripe en WordPress.

Añadir código QR para pagos Stripe en WordPress

Ahora que su formulario de pago de Stripe está listo, puede crear un código QR para él y mostrarlo en cualquier lugar de su sitio.

Hay dos formas de añadir un código QR a tu sitio. Puede utilizar la característica del navegador Google Chrome o utilizar un plugin de código QR para WordPress.

1. Crear códigos QR con Google Chrome

Si utilizas el navegador Google Chrome, puedes utilizarlo para compartir una página web mediante un código QR.

En primer lugar, deberá abrir la página del formulario de pago de Stripe en una nueva pestaña o ventana.

A continuación, puede hacer clic en el icono de compartir situado en la esquina superior derecha de la barra de direcciones del sitio. A continuación, seleccione la opción “Crear código QR”.

Click the share icon in chrome

A continuación, Google Chrome generará un código QR para la página del formulario de pago de Stripe.

Puedes descargar el código QR como imagen.

Download the QR code

A continuación, sólo tiene que colocar la imagen en cualquier lugar de su sitio.

Por ejemplo, puede mostrar el código QR en las páginas de productos para que los clientes puedan escanearlos rápidamente y abrir el formulario para realizar una compra.

Add QR code to product page

2. Crear un código QR de pago de Stripe utilizando un plugin de WordPress.

Puedes añadir códigos QR a tu sitio utilizando un plugin para WordPress como Shortcodes Ultimate. Es un plugin gratuito que te permite crear más de 50 tipos diferentes de shortcodes, incluyendo códigos QR. Puede obtener más información en nuestra detallada reseña de Shortcodes Ultimate.

En primer lugar, tendrá que instalar y activar el plugin Shortcodes Ultimate. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, verá la pantalla de bienvenida de Shortcode Ultimate.

Shortcode ultimate welcome screen

A continuación, tendrás que editar una página o entrada para añadir tu código QR.

Una vez que estés en el editor de contenido, simplemente añade un bloque shortcode.

How to add a shortcode block to WordPress

A continuación, debería aparecer la opción “Insertar shortcode”.

Sólo tienes que hacer clic en el icono de los corchetes dobles para añadir tu código QR.

Click the select shortcode icon

A continuación, el plugin mostrará diferentes opciones de shortcode para su sitio.

Seleccione la opción “Código QR”.

Select QR code shortcode

Después, verás opciones para introducir los detalles de tu código QR.

En el campo Datos, puede introducir la URL del formulario de pago de Stripe que creó anteriormente.

Además, existe la opción de introducir un título para el código, que actúa como texto alternativo. También puede ajustar el tamaño de su código QR.

Enter QR code details

Si se desplaza hacia abajo, verá más opciones para personalizar su código QR. Por ejemplo, puedes cambiar el color principal, el color de fondo y mucho más.

Una vez que hayas terminado, simplemente haz clic en el botón “Insertar shortcode”.

Click insert shortcode

El plugin también le permite ver una vista previa en vivo del código en la entrada de su blog o página de destino.

Siga adelante y publique su página para ver el código QR del formulario de pago de Stripe en acción.

QR code live preview

Esperamos que este artículo te haya ayudado a aprender cómo añadir el pago con código QR de Stripe en WordPress. Puede que también quieras ver nuestra guía sobre cómo aceptar pagos periódicos en WordPress y los mejores plugins de códigos de cupones para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

3 comentariosDeja una respuesta

  1. Ralph

    Paying with QR code is more and more popular. I think it is becuase of its ease of use. It’s just faster than old methods and we want to save more and more time.

    I have a question – Scaning QR code with phone from laptop screen is easy, but is it also such a easy thing with smartphones themselves? I mean, i scroll website on my phone and see QR code, my phone do not recognize QR code like that, only with photo app. Is it normal or it’s just my phone and having qr code for mobile users is just as good as for desktop users?

    • WPBeginner Support

      It would depend on the phone, if you have not done so already you would want to try taking a screenshot with your phone.

      Administrador

      • Ralph

        Oh, I did not think of that… Thank you for your suggestion, this should do the trick!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.