Como aceptar pagos en Bubble.io con Stripe Checkout

Bubble es una gran herramienta que permite crear aplicaciones sin necesidad de programar con código. Esta nueva forma de desarrollo reduce mucho los tiempos de implementación y abarata los costes. Es por tanto una gran opción para permitir a pequeñas empresas o proyectos poder contar con una aplicación a medida.

En muchos casos puede ser interesante incorporar en las aplicaciones creadas mediante la plataforma de Bubble.io una pasarela de pago para permitir cobros online. ¡Y que mejor forma que utilizar Stripe para ello!

En este post vamos a ver cómo puedes integrar la interfaz de pago de Stripe Checkout en tu aplicación de Bubble de forma rápida y sencilla.

1. Instala el plugin de Stripe de Bubble

La función de aceptar pagos a través de Stripe no está disponible por defecto en Bubble, por lo que será necesario instalar un plugin. Hay varios que facilitan el uso de esta plataforma, pero vamos a ver cómo utilizar el plugin oficial.

Lo primero que tendremos que hacer es buscar e instalar este plugin desde el menú lateral izquierdo, haciendo clic en el apartado «Plugins» y en el botón de «Add plugins». Buscamos «Stripe» en el buscador e instalamos la primera opción que nos aparece:

image

2. Configura el plugin de Bubble con las claves API de Stripe

Una vez instalado el plugin deberemos configurarlo seleccionándolo en el apartado de plugins instalados desde el menú «Plugins» – «Stripe»:

image 2

Para configurar las claves API tenemos que introducir la clave secreta (Secret Key) y la clave publicable (Publishable Key), que podemos encontrar desde el Dashboard de Stripe en el apartado «Desarrolladores» – «Claves de API».

image 3

Deberemos introducir tanto las claves del entorno de pruebas de Stripe (developmet) como las del entorno de producción (live). Podemos cambiar entre un tipo de claves y otras marcando la opción «Modo de prueba» que se encuentra en la parte superior derecha de la pantalla.

Otra opción que viene en el plugin es el Client ID, que sirve para poder utilizar Stripe Conect. Esta es una funcionalidad de Stripe que se utiliza para gestionar pagos en plataformas como marketplaces. Sin embargo esta opción no es necesaria para pagos online simples en los que cobras directamente al cliente así que puedes dejarlo vacío.

3. Elige el tipo de interfaz de pago de Stripe en Bubble

Lo siguiente que puedes cambiar en los ajustes es la interfaz de pago a utilizar, que depende de versión del plugin que selecciones.

image 4

Si eliges la versión Checkout v2 podrás realizar pagos empleando un popup como el siguiente:

image 5

Esta es una versión antigua del Checkout de Stripe que ya no es recomendable utilizar porque no cumple con la SCA (Strong Customer Authentication o normativa de autenticación reforzada). Y además es mucho más fea.

Así que es mucho mejor usar la versión v3, que utiliza la interfaz de pago actual de Stripe Checkout (la misma empleada en los links de pago de Stripe).

image 7

Otros ajustes que también puedes configurar es la posibilidad de recoger la dirección de facturación del cliente en la página de Checkout. Para ello tienes que seleccionar la opción «Collect the user’s adress with Checkout».

4. Crea un botón en Bubble y asigna un workflow de pago con Stripe

Una vez configurado el plugin tendremos que crear un botón en Bubble desde la pestaña de «Design» y asignarle un flujo de trabajo automático desde el apartado Workflow para realizar el pago. Elegiremos el disparador de clicar un elemento.

image 8

Elegiremos el elemento del botón:

image 9

Y seleccionaremos la opción de Pago («Payment»), -Cobrar al usuario actual («charge the current user»):

image 10

Por último tendremos que configurar en la acción aspectos como el email del usuario que realiza el pago (payer email), la cantidad del pago (amount), el tipo de divisa (currency) y el nombre, descripción y foto del producto.

image 11

No es necesario que el usuario se registre para realizar el pago. En lugar de utilizar el correo del usuario registrado podemos crear un nuevo elemento de campo de texto (Input) en el que los clientes puedan indicar el correo electrónico sin necesidad de crear una cuenta.

También podemos hacer que la información de los distintos productos se guarde directamente en la base de datos de Stripe para tener más flexibilidad en las opciones para configurar la selección de productos. O incluso hacer que el importe del pago se calcule empleando las fórmulas de Bubble, lo que nos sirve por ejemplo para generar presupuestos personalizados en base a opciones seleccionadas por el cliente.

5. Prueba la integración de Stripe en Bubble con una tarjeta de prueba

Una vez configurado todo es recomendable hacer una prueba para comprobar que todo funciona como debe. Para ello simplemente clica en el botón, se deberá desplegar la interfaz de pago de Stripe Checkout y desde ahí introduce los datos de la tarjeta de prueba de Stripe:

  • Número: 4242 4242 4242 4242
  • Fecha de caducidad: Cualquier fecha posterior a la actual
  • Código seguro de verificación: Cualquiera
image 13
image 14

Puedes comprobar que el pago de prueba ha llegado correctamente desde el Dasboard de Stripe, en modo de prueba y en la pestaña «Pagos» – «Todos los pagos».

image 15

Una vez comprobado que todo funciona correctamente puedes publicar los cambios de la aplicación en Bubble realizados en modo desarrollo al entorno real (Deploy current versión to Live).

No es necesario hacer nada para cambiar del entorno de pruebas de Stripe al entorno real, se cambia de forma automática al pasar del modo de desarrollo de Bubble (Development) al modo Real (Live).

image 12

Extra: Para traducir Stripe Checkout selecciona el idioma de tu aplicación en Bubble

Es posible que al desplegar el formulario de pago veas que se encuentra en inglés. Seguramente sea porque no tienes seleccionado el español como idioma de tu aplicación de Bubble. Puedes cambiarlo desde Ajustes (Settings) – Idiomas (Languages):

image 16

¡Y ya está! Has visto que es muy fácil integrar los pagos online en Bubble a través de la pasarela de pago de Stripe. Las posibilidades que esto nos permite son increíbles. ¿Se te ocurre alguna? Déjamela en los comentarios ⬇⬇⬇

Descubre los mejores programas fáciles de usar pero muy potentes para automatizar tus tareas y ahorrar tiempo, esfuerzo y estrés a diario en tareas repetitivas.

política de privacidad

Deja un comentario

Ver más

  • Responsable: Laura Maestro García.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a Raiola Networks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Privacidad     Cookies      Aviso legal