¿Desea añadir un botón de donación a su sitio WordPress? Stripe facilita la aceptación de pagos con tarjeta de crédito, lo cual es una forma conveniente para que sus visitantes puedan donar a su sitio.

Aunque hay un montón de plugins de donación con todas las funciones, vamos a centrarnos en la creación de un botón de donación  muy simple en este post. Para lograrlo, compartiremos tutoriales para dos plugins gratuitos diferentes:

Empezaremos con un tutorial rápido sobre cómo crear su cuenta de Stripe y encontrar las claves de API que necesitará para configurar cualquiera de los dos plugins.

A continuación, veremos cómo crear un botón de donación de Stripe con WP Simple Pay o Stripe Pay.

¿Cómo obtener sus claves de API de Stripe?

Independientemente de cuál de los dos plugins elija, deberá introducir las claves de la API de Stripe para crear el botón Donar a Stripe.

Estas claves de API son las que conectan su sitio WordPress con el servicio de procesamiento de pago por Stripe. Son esenciales, pero también son fáciles de crear con Stripe. Así que no se preocupe!

En lugar de tratar de explicar esto en las instrucciones paso a paso para cada plugin, sólo lo haremos una vez. De esta forma, sabrá exactamente dónde encontrar las claves de la API cuando configure cualquiera de los dos plugins.

Paso 1: Crear una cuenta de Stripe Libre

Para empezar, tendrá que registrarse para obtener una cuenta gratuita de Stripe. No hay información complicada – sólo tiene que introducir su correo electrónico, nombre y contraseña (aunque tendrá que proporcionar más información para empezar a aceptar pagos de verdad).

Para hacer eso, vaya aquí.

Paso 2: Buscar claves de API

Para encontrar sus claves de API, vaya aquí.

Preste atención a la diferencia entre las claves de la API de prueba y las claves de la API en vivo:

Puede alternar entre ellos haciendo clic en el botón de alternar, y ambos plugins incluirán cuadros que le permitirán introducir tanto las teclas de prueba como las de directo, así como una configuración que le permitirá cambiar entre los modos de prueba y de directo:

Sus claves de API de banda

Sus claves de API de Stripe

Mantenga estas claves a mano, ya que las necesitará para configurar cualquiera de los dos plugins.

¿Cómo añadir un botón Donar con WP Simple Pay?

Para empezar, instale y active el plugin gratuito WP Simple Pay de WordPress.org.

A continuación, le indicamos cómo configurar el botón Donar….

Paso 1: Introducir claves de API

Para empezar, vaya a Simple Pay Lite → Configuración e ingrese sus claves de prueba y en vivo API. Asegúrese de que el modo de prueba permanezca Habilitado por ahora:

Introduzca las claves de la API y asegúrese de que el modo de prueba está activado

Introduzca las claves de la API y asegúrese de que el modo de prueba está activado

Paso 2: Configurar moneda (por defecto es USD)

Por defecto, WP Simple Pay utiliza USD como moneda para el botón Donar. Si desea utilizar una moneda diferente, puede modificarla pasando a la ficha Parametrizaciones generales:

Cómo cambiar la moneda

¿Cómo cambiar la moneda?

Paso 3: Crear un nuevo formulario de pago

Un formulario de pago es esencialmente un botón de donación específico que desea utilizar. Para crear uno, vaya a Simple Pay Lite → Añadir nuevo.

En la pestaña Opciones de pago, introduzca el importe que desea que los visitantes puedan donar (si desea que los visitantes puedan donar su propio importe personalizado, necesitará la versión pagada del plugin):

Introduzca el importe fijo de la donación

Introduzca el importe fijo de la donación

Eso es todo lo que técnicamente necesita hacer. Pero para ofrecer un formulario más personalizado, puede cambiar el texto que se muestra en el formulario en las fichas Mostrar formulario a página y Mostrar superposición de proceso de pago.

Por ejemplo, en el área de visualización de formularios a página, puede cambiar el texto para que el botón diga «Donar con tarjeta» en lugar de «Pagar con tarjeta»:

Cambiar el texto del botón Donar

Cambiar el texto del botón Donar

Una vez que haya terminado, haga clic en Crear para publicar su formulario.

Para mostrar su formulario en el front-end de su sitio, deberá agregar el código abreviado al mensaje, página o widget de texto donde desee que se muestre:

El código abreviado de WP Simple Pay

El código abreviado de WP Simple Pay

Paso 4: Pruebe su formulario y active el modo en vivo

Debido a que tiene activado el modo de prueba, puede probar su formulario introduciendo algunos datos de prueba:

Ejemplo del botón Donar

Ejemplo del botón Donar

Una vez que esté satisfecho con el funcionamiento de todo, puede habilitar el modo Live para empezar a aceptar pagos reales visitando Simple Pay Lite → Configuración y desactivando el modo de prueba:

Cómo desactivar el modo de prueba

¿Cómo desactivar el modo de prueba?

Y si desea editar la página que los usuarios ven después de enviar un pago, sólo tiene que editar la página de confirmación de pago que WP Simple Pay creó.

¿Cómo añadir un botón de Donación con pago con Stripe Payments?

Aunque Stripe Payments no es tan popular como WP Simple Pay, su ventaja es que puede aceptar donaciones personalizadas sin necesidad de pagar por una versión premium.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características

Una vez que lo hayas instalado y activado desde WordPress.org, aquí está cómo usarlo….

Paso 1: Añadir claves de API y configurar los ajustes básicos

Para empezar, vaya a Stripe Payments → Settings para agregar sus claves de API:

Cómo introducir las claves de la API

Cómo introducir las claves de la API

Asegúrese de que el modo en vivo no esté seleccionado por el momento.

También puede configurar la divisa del botón Donar en esta área, así como el texto del botón. Es probable que desee cambiar el campo Texto del botón a algo como «Donar»:

Configurar la moneda y el texto de los botones

Configurar la moneda y el texto de los botones

Paso 2: Añadir un nuevo producto

Luego, vaya a Stripe Payments → Agregar nuevo producto. Hay muchas opciones, pero la mayoría de ellas son innecesarias para un botón básico de donación.

Las secciones que debe configurar son:

Elija un monto de donación fijo o personalizado

Elija un monto de donación fijo o personalizado

Una vez que haya terminado de configurar las cosas, haga clic en Publicar. A continuación, copie el código abreviado desde la parte inferior del editor y añádalo al mensaje, la página o el widget de texto en el que desea mostrar el botón Donar de Stripe.

Paso 3: Pruebe el botón de donación y luego entre en funcionamiento

Como todavía está en modo de prueba, puede probar con seguridad su botón de donación introduciendo los datos ficticios de Stripe:

Ejemplo del formulario de donativo personalizado

Ejemplo del formulario de donativo personalizado

Una vez que haya verificado que todo funciona correctamente, puede habilitar los pagos reales yendo a Stripe Payments → Settings y activando el modo en vivo:

Cómo desactivar el modo de prueba

Cómo desactivar el modo de prueba

Resumen

No importa qué plugin escoja, añadir un botón de donación de Stripe a su sitio de WordPress es bastante simple y fácil. Ambos plugins también le permiten crear varios botones, por lo que puede crear fácilmente diferentes botones Donar para diferentes usos.

Si no está satisfecho con Stripe después de crear su propio botón, también puede considerar aceptar donaciones a través de PayPal o Bitcoin. En esta guía hemos recopilado todos los pros y contras utilizando Stripe o PayPal.

¿Tiene alguna otra pregunta sobre cómo añadir un botón de donar a su sitio WordPress? ¿O necesita una funcionalidad diferente que no cubrimos? Deje un comentario y trataremos de ayudarle!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes