Integra un botón PayPal con un formulario de contacto en WordPress

Tabla de contenidos

Buscando información para mí misma, encontré algo que estoy segura de que será de gran utilidad para muchos de vosotros. Se trata de cómo integrar un formulario de contacto con un botón de PayPal, en un sitio WordPress. El formulario de contacto es totalmente personalizable según tus necesidades.

Esta integración funciona de modo tal que un comprador de tu web rellena y te envía el formulario con los datos que le has solicitado, y el botón de PayPal aparece automáticamente inmediatamente después, ofreciéndole realizar el pago.

A continuación te explico otra opción ligeramente diferente, que te permitirá redirigir automáticamente al comprador a la página de pago de PayPal en lugar de mostrarle el botón. Así le ahorrarás un paso 😉

La integración de un formulario de contacto con PayPal en nuestra web, es muy útil a la hora de vender un producto y que el comprador pueda contactarnos enviándonos un mensaje con indicaciones, preguntas, sugerencias, etc., en el mismo acto de la venta.

He visto muchos sitios web que ofrecen un producto o servicio sin un formulario de contacto que le permita al cliente comunicarse con el vendedor, solo ofrecen un botón de pago sin más. Y está claro que esta forma de trabajo no da demasiada credibilidad al futuro comprador que casi siempre tiene algo que decir al realizar su compra.

En definitiva, en este sencillo tutorial te contaré cómo mejorar tu proceso de pago y no perder clientes, utilizando WordPress, el plugin Contact 7 form y tu cuenta de PayPal.

Contenido del tutorial

Primer paso:

Instalar y activar los siguientes plug-ins:

  1. Formulario de Contacto 7 (Contact 7 form)
  2. *Captcha
  3. * Contact Form DB

  • Los plugins Captcha para detener bots y Contact Form DB son opcionales, pero es recomendable instalarlos así puedes llevar un control de los pedidos de compra usando base de datos y detener a los robots que intenten enviarte spam.

Segundo paso:

  1. Los tres plugins se mostrarán en la columna izquierda de la página del Admin. Haz click en Contacto y crea un nuevo formulario con el botón Añadir nuevo.

  1. Rellena el formulario con los campos relevantes a tu servicio. Guarda el formulario ¡no lo olvides! porque si pasas de página, perderás todos los cambios realizados.

Una vez guardado el formulario, te aparecerá un código y el siguiente texto: Copie y pegue este código dentro del contenido de su post, página o contenido de texto del widget.

  1. Ve a tu cuenta de PayPal y en Servicios para vendedores -> Crea tu botón Comprar ahora crea tu botón de compra a tu gusto. Copia el código resultante.

 

4. Vuelve a la página del plugin en WordPress, haz scroll hasta la sección Mensajes y pega el código del botón de PayPal en el primer campo. Cualquier contenido que se encuentre aquí, aparecerá después de que el usuario pulse en el botón «Enviar».

5. Vuelve arriba de la página y guarda el formulario nuevamente.

6. Selecciona y copia el pequeño código que aparece después de que guardas el formulario. Tiene el formato [contact-form-7 id=»95″ title=»El que tú le pongas»]

7. Ve a la página donde deseas mostrar tu botón de compra y pega ese pequeño código. Guarda y visualiza esta página.

Si todo ha salido bien, después de que el usuario rellena y envía el formulario de pedido, el botón de PayPal debería aparecer debajo con el texto que configuras a tu gusto para dar a tu cliente las instrucciones necesarias. Procura que le quede claro que si no paga, su pedido no será confirmado.

Redirección automática a PayPal

Si no quieres que aparezca el botón de PayPal y quieres redirigir directamente al cliente a la página de pago, añade el siguiente código en el pie del formulario de Contacto, donde pone «Configuración adicional»:

on_sent_ok: «location.replace(‘https://www.paypal(.)com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YourButtonID‘);»

Reemplaza lo que está en negrita por el código de tu botón entregado por Paypal y que figura en el apartado «Correo electrónico» como muestra la siguiente imagen:

Tardará unos segundos en redirigir y de paso mostrará durante estos segundos el mensaje que escribiste en el punto 4.

Configuración avanzada y consejillo de regalo

Algo recomendable es añadir dos páginas en WordPress para las ordenes: Pago completado y Orden incompleta. Será más amigable a ojos del usuario. Es odioso tratar de comprar algo online y que te lleve a un sitio sin diseño, porque pierdes la sensación de seguridad y te puede llevar a cancelar el pedido. El diseño es muy importante a la hora de vender un producto.

La página de pedido completado puede notificar y asegurar al comprador que su orden será puesta en marcha inmediatamente, junto con un número de orden de referencia. La página de orden incompleta, puede preguntarle al usuario que cancela el pedido, qué ve que se pueda mejorar para que eso no vuelva a suceder.

Para poder personalizar estas dos páginas has de tener una cuenta Business de PayPal. Las opciones se encuentran dentro de PayPal en «Personalizar funciones avanzadas»

Si te gustó el tutorial o piensas que he olvidado algo, por favor escribe en los comentarios debajo 😉

Marcar como favorito enlace permanente.

9 comentarios

  1. Como haría para que los datos que ingrese el cliente en el formulario pueda ser enviado a mi correo personal cuando el cliente haga el pago en paypal

  2. Buen tutorial aunque me queda una duda.
    ¿Se puede integrar un formulario de una plataforma con autorrespondedor?
    ¿Al rellenar los datos del formulario no se marcharía a «confirmar» la suscripción antes de poder darle al botón?

    ¿Cómo se podría facilitar este paso en el que recoja los datos de mi cliente y a la vez tenga disponible su botón de compra?

    Gracias de todos modos.

  3. Excelente, aunque he seguido las instrucciones y en la redirección automática a Paypal, pongo el código que nos indicas con el código del botón entregado por paypal y no funciona, no me redirige a Paypal. Habrá algun error en el código que nos indicas? saludos y gracias!!!

    • Mira que el código ha de ser el que te entrega Paypal a ti, comprueba que no te sobra ningún espacio por ningún lado. Tiene que funcionarte bien ¡Suerte! 🙂

      • Hola,
        Estaba buscando esto por muchos sitios y al final lo he encontrado, pero no me redirige a paypal.
        Usando el código de correo y complementando con las indicaciones que das on_sent_ok: “location.replace mi código y ‘);»

  4. Fantástico!
    Me has salvado de una buena, me estaba volviendo loco buscando cómo hacerlo.

    1000 gracias!

  5. Excelente tutorial, es algo similar a lo que busco, pero una pregunta desde wordpress puedo enviar un mensaje de respuesta al cliente con lo que adquirió después de que haga el pago el paypal? y que yo pueda configurar el contenido en cuanto al diseño de ese mensaje?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos: El responsable del proceso es Carlos González-Román Ferrer. Tus datos serán tratados para gestionar y moderar tus comentarios. La legitimación del tratamiento es por consentimiento del interesado. Tus datos serán tratados por Automattic Inc., EEUU para filtrar el spam. Tienes derecho a acceder, rectificar y cancelar los datos, así como otros derechos, como se explica en la política de privacidad.