.gif)
Aprende cómo integrar Sage Pay con Bubble.io. Sigue nuestra guía detallada paso a paso para configurar la API en ambas plataformas y procesar pagos a través de tu aplicación Bubble.io con éxito.
Sage Pay, ahora conocido como Opayo, es un proveedor de servicios de pago con sede en el Reino Unido. Es parte de Sage Group, una empresa multinacional de software empresarial. Sage Pay permite a las empresas aceptar y procesar pagos con tarjetas de crédito y débito en línea y por teléfono. La plataforma admite múltiples divisas y ofrece servicios de prevención de fraude. Sage Pay se integra con muchas soluciones de carrito de compras populares y ofrece una variedad de opciones de integración de API, lo que lo convierte en una solución integral para las empresas que buscan un procesamiento de pagos seguro y confiable.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
La integración de Sage Pay con Bubble.io requiere una serie de pasos específicos. Para esta guía, suponemos que ya tienes una cuenta de Bubble.io y una cuenta de Sage Pay. El proceso implicaría configurar la API a través de Sage Pay, pasar a Bubble.io e integrar la API.
Paso 1: Inicia sesión en tu cuenta de Sage Pay. La URL de la página de inicio de sesión normalmente se ve así: https://live.sagepay.com/mysagepay/login.msp
Paso 2: Una vez que hayas iniciado sesión, dirígete a la pestaña "Configuración" en el panel izquierdo de tu tablero de cuenta.
Paso 3: Selecciona la subpestaña "Acceso a la API".
Paso 4: En la sección de acceso a la API, selecciona "Nueva clave API". En la ventana emergente, introduce un nombre para la API.
Paso 5: Sage Pay generará una clave API para ti. Asegúrate de guardar esta clave API, la necesitarás más tarde.
Paso 6: Cambia a tu cuenta de Bubble.io e inicia sesión.
Paso 7: Una vez que hayas iniciado sesión, haz clic en tu aplicación, luego selecciona la pestaña 'Plugins' del panel izquierdo.
Paso 8: En la página de Plugins, haz clic en el botón "+ Añadir plugins".
Paso 9: En la barra de búsqueda que aparece, escribe "API Connector". Selecciona el plugin 'API Connector' desarrollado por Bubble y haz clic en 'instalar'.
Paso 10: Una vez instalado, vuelve a tu aplicación y luego desde el panel izquierdo, selecciona la pestaña 'Configuración' y luego selecciona la subpestaña 'API'.
Paso 11: En el menú desplegable de proveedor de API, selecciona 'API Connector'.
Paso 12: En esta página del conector de API, haz clic en 'Añadir otra API'.
Paso 13: Aquí, necesitas configurar la API. Dale un nombre a la API. Para la autenticación, selecciona 'Clave privada'. En el campo de entrada de la clave, introduce la clave API que guardaste de tu cuenta de Sage Pay.
Paso 14: Define tus llamadas API. Necesitarás definir un método POST para permitir que tu aplicación acceda a la función de procesamiento de pagos. La URL de POST es generalmente algo así: https://pi-test.sagepay.com/api/v1/transactions Para esto, también necesitarás una carga útil en formato JSON. La carga útil contendrá información como el nombre del vendedor, el tipo de transacción, la cantidad y la moneda, los detalles de la tarjeta, etc. Un ejemplo típico de formato JSON para esto incluye:
.png)
.png)
{
"vendorName": "nombre de su proveedor",
"transactionType": "Payment",
"paymentMethod": {
"card": {
"merchantSessionKey": "tu clave de sesión",
"cardIdentifier": "identificador de la tarjeta"
}
},
"transactionId": "ID de transacción único",
"amount": monto de la transacción,
"currency": "tipo de moneda"
}
La cabecera 'Content-Type' debe ser 'application/json' y debes seleccionar 'JSON' para el 'Body Type'. Recuerda reemplazar 'tu clave de sesión', 'identificador de tarjeta', 'ID de transacción único' y 'monto de transacción' con la información real.
Paso 15: A continuación, puedes definir un método GET si quieres que tu aplicación pueda verificar el estado de la transacción. La URL para esto será generalmente como: 'https://pi-test.sagepay.com/api/v1/transactions/{TransactionId}'. Recuerda reemplazar '{TransactionId}' con el ID de transacción real.
Paso 16: Haz clic en el botón "Inicializar la llamada". Si todo está configurado correctamente, esta llamada será exitosa y estará lista para usar en tu aplicación.
Paso 17: Ahora estás listo para hacer estas llamadas API en tus flujos de trabajo de Bubble.io. Por ejemplo, cuando un usuario haga clic en un botón de 'Pagar ahora', puedes crear un flujo de trabajo que realice una llamada API 'POST' a Sage Pay.
En conclusión, esta guía ha demostrado cómo puedes integrar Sage Pay con Bubble.io. El proceso implicó configurar la API tanto en Sage Pay como en Bubble.io, y luego usar estas llamadas API en tu aplicación de Bubble.io. Esto permitirá que tu aplicación de Bubble.io procese pagos usando Sage Pay.
Escenario: Un minorista de muebles en línea quiere mejorar su experiencia de pago del cliente y asegurar su proceso de pago. Utilizan Bubble.io para construir un sitio web de comercio electrónico dinámico y fácil de usar donde los clientes pueden explorar y comprar sus productos. Para garantizar un proceso de pago fluido y seguro, desean integrar Sage Pay como el sistema de pago del sitio web.
Solución: Integrando Bubble.io con Sage Pay
Creación de la página web: El minorista utiliza Bubble.io para crear un sitio web de comercio electrónico intuitivo y ágil. Esto incluye catálogos de productos, carros de la compra y una interfaz de pago donde los clientes pueden registrar su información de facturación.
Configuración de la Integración: El minorista instala el plugin de Sage Pay en Bubble.io y lo configura con su clave de API de Sage Pay. Configuran flujos de trabajo en Bubble.io que se activan durante el proceso de pago.
Flujo de Trabajo de Pago: Cuando un cliente procede a pagar, se activa el flujo de trabajo. Los detalles del carrito de la compra del cliente y la información de facturación se envían de forma segura a Sage Pay a través de la acción del plugin configurado. El pago se procesa a través de Sage Pay, proporcionando a los clientes opciones de pago seguras y diversas.
Confirmación de Pago: Una vez que el pago se realiza con éxito, Sage Pay envía una confirmación a Bubble.io. Bubble.io luego actualiza el estado del pedido y envía un recibo al correo electrónico del cliente.
Procesamiento y Cumplimiento del Pedido: El sistema de gestión de pedidos del minorista se actualiza con los detalles del nuevo pedido. El equipo puede entonces preparar y enviar los artículos pedidos.
Experiencia de Usuario Fluida: La integración crea una experiencia fluida de pago para los clientes, reduciendo la cantidad de carritos abandonados e incrementando las ventas en general.
Beneficios:
Seguridad: Sage Pay proporciona características de seguridad sólidas que protegen los datos de pago sensibles del cliente, reduciendo el riesgo de fraude.
Mejora de la Experiencia de Pago: La integración agiliza el proceso de pago, facilitando a los clientes realizar una compra de manera rápida y eficaz.
Procesamiento Automatizado de Pagos: La automatización reduce la intervención manual en el proceso de pago, ahorrando tiempo al equipo.
Escalabilidad: A medida que crece el negocio del minorista en línea, el sistema integrado es capaz de manejar un tráfico y transacciones aumentados sin comprometer el rendimiento o la seguridad.
Al integrar Bubble.io con Sage Pay, el minorista de muebles en línea ofrece una experiencia de compra segura y fluida a sus clientes, mejorando la satisfacción del cliente e impulsando más ventas.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
