Demo de Razorpay (Pasarela de pago india)
Resumen del proceso
| Pasos |
| Qué hacer |
| --- |
| --- |
| 1. Registro |
| Regístrate en Razorpay y obtén una API Key |
| 1. Crear |
| Crea la app |
| 1. Configuración |
| Configura la información básica de la app |
| 1. Autenticación |
| Configura la autenticación de la app |
| 1. Acciones |
| Agrega la acción "create payment link" y edita la información de la acción y sus entradas |
| 1. Flujos |
| Edita el subflujo de la acción y obtén las salidas de la acción |
| 1. Acciones |
| Edita las salidas de la acción |
| 1. Pruebas |
| Instala la app en borrador y pruébala |
| 1. One Time Urls |
| Agrega una URL de un solo uso para recibir el resultado del pago |
| 10. Triggers |
| Agrega un trigger para enviar el resultado del pago |
| 11. Pruebas |
| Vuelve a probar |
Registro
Lo primero es registrar una cuenta de Razorpay y obtener tu API Key en **Settings - API Key**:
Crear
En tu panel, sigue los pasos del 1 al 7 en la captura de pantalla anterior para crear una app versión 2 y entrar al constructor de apps.
Configuración
En la sección de configuración, haz clic en **Edit** para editar la información de la app, incluido el nombre, la descripción, el logo y la imagen de portada.
Los usuarios pueden ver la información de tu app antes de descargarla.
Autenticación
Según la documentación de autenticación de Razorpay, se requieren key_id y key_secret con autenticación **Basic Auth**.
En la sección **Auth**, selecciona **Api Key** como **Auth Type** y haz clic en **Edit** para agregar las 2 entradas de autenticación.
Haz clic en **Save** cuando termines de agregar key_id y key_secret:
Acciones - Entradas
Ahora que ya configuramos la parte de autenticación de tu app, ¡vamos a agregar acciones!
API utilizada: **Create payment link**.
Sigue los pasos del 1 al 6 en la captura de pantalla anterior para crear la acción y comenzar a editarla.
Siguiendo la documentación de la API, puedes ver qué parámetros se requieren, qué tipos de valores son y si son obligatorios u opcionales.
Haz clic en **Add Items** en la sección **Inputs**:
Ten tu documentación y OneChat lado a lado, y copia y pega la información según corresponda.
Para los parámetros opcionales, desactiva el interruptor **Required?** y proporciona un valor predeterminado si lo necesitas.
Te sugerimos completar primero los **Inputs** y dejar los **Outputs** para después de terminar el subflujo de esta acción.
Agrega la descripción y guía necesarias, y revisa la sección de vista previa para tus entradas.
Recuerda siempre hacer clic en **Save** en lugar de **cancel** antes de salir de la edición de la acción.
Después de editar la información de la acción y las entradas, crea un subflujo que se ejecute cuando los usuarios llamen esta acción:
Flujos
Ve a la sección **Flows** y entra al subflujo que acabamos de crear:
En el caso de crear un enlace de pago, una sola solicitud externa debería ser suficiente:
Sigue los pasos del 3 al 5 en la captura de pantalla anterior para comenzar a editar la solicitud externa. ¿No sabes cómo agregar un **Action Step**? No te preocupes, intenta hacer clic derecho con el mouse.
Selecciona el tipo **POST**, pega la URL, selecciona **Body - raw - JSON** y luego copia los 2 parámetros, amount y currency.
Reemplaza 1000 e INR con los campos de app amount y currency presionando el botón </> del lado derecho. En la ventana emergente, busca el campo por nombre y haz clic para seleccionarlo:
Cuando insertas campos de app, aparece **"Test body content"**. Esto sirve para especificar valores de prueba para los campos. Sin un valor de prueba, la prueba puede fallar. Vamos a establecer amount en 1000 y currency en AUD:
TIP - Cuando uses {{ para llamar un campo, asegúrate de que no haya un carácter como " justo después. Mira la captura de pantalla a continuación.
Para la autenticación, ya mencionamos que la API de Razorpay usa **Basic Auth**:
Selecciona **Basic Auth**, completa los campos de app y recuerda ingresar tu key_id y key_secret de prueba.
Parece que todo está bien, pulsa el botón **Test**:
Sigue los pasos del 1 al 8 para guardar el resultado de tu prueba en campos de app y haz clic en **Save**.
¡Excelente! La solicitud se completó y obtuvimos payment_link_id y payment_link, que necesitamos de los datos de respuesta.
payment_link_id es un ID para rastrear un enlace de pago y payment_link almacena el enlace en sí.
Prueba visitar el enlace de pago:
¡Perfecto! Ahora, ¿cómo devolvemos el enlace de pago y el ID al chatbot? ¡No olvides que todavía no hemos configurado los **Action Outputs**!
Guarda y publica tu subflujo, luego volvamos a la sección **Actions**:
Acciones - Salidas
Agrega las 2 salidas y haz clic en los 2 botones **Save** para guardar no solo la edición de salidas, sino también la edición de la acción.
Pruebas
En tu panel, sigue las capturas de pantalla de abajo para instalar tu app en versión borrador, ya que aún no ha sido publicada:
Completa tus credenciales y guarda:
Actualiza aquí tus credenciales si lo necesitas:
Elige cualquiera de tus chatbots, por ejemplo, un chatbot de Facebook:
Crea un **Action Step**, ve a **Integrations** y luego selecciona la acción de tu app.
Completa las entradas, configura las salidas y haz clic en **Save**:
Agrega 2 pasos más de **Send Message** para manejar 2 situaciones diferentes:
Muestra el resultado y también coloca el enlace de pago en un botón con URL.
Haz la vista previa desde el **Action Step** y verás este mensaje enviado a tu Messenger:
Haz clic en el botón **Pay** y deberías ver la página de pago de Razorpay mostrando un pago de US$99.99:
¿qué pasa si no se recibe el mensaje?
Puede que no recibas este mensaje porque algunos enlaces de pago pueden ser bloqueados automáticamente por Facebook. Tal vez quieras usar algunos servicios de acortamiento de URL como Bitly, etc. (la app de Bitly está disponible en la tienda de apps de OneChat)
En caso de que el mensaje no se reciba del lado de Facebook, por favor revísalo en **Live Chat**:
TIP - Cuando un mensaje se muestra en una conversación de **Live Chat**, significa que el sistema ya lo envió.
¡La acción parece estar funcionando perfectamente!
One Time Urls
¡Tu app ya casi está lista! Pero espera, el pago se realiza en el sitio web de Razorpay, ¿cómo sé si el pago fue exitoso o falló? Bueno, los proveedores de pago normalmente proporcionan un parámetro llamado **Callback URL**:
Según la documentación, callback_url es el lugar al que Razorpay envía de vuelta el resultado del pago. Eso significa que necesitamos darle a Razorpay un callback_url, indicándoles a dónde enviar la información de regreso.
Aquí se puede usar una **One Time Url** como **Callback URL**.
Sigue los pasos del 1 al 5 en la captura de pantalla anterior para crear y editar la **One Time Url**.
Abramos otra página web de la app antes de entrar a la página de edición de la URL de un solo uso.
Ve a tu acción **"Create Payment Link"** en la Página 2 y agrega los 2 parámetros en la sección del cuerpo:
Escucha el payload para una prueba en vivo. Ten en cuenta que la URL de prueba debe pegarse en **"Test body contents"** en lugar de **"Body content"**:
Cuando termines, haz clic en **Test** y obtendrás un enlace de pago como el que viste antes. Visita el enlace de pago y realiza un pago de prueba:
Usa una tarjeta de prueba para simular el proceso de pago.
Ingresa un código OTP aleatorio y pulsa **Submit**.
Por último, haz clic en **Done** y verás los datos que necesitamos cuando un pago real sea realizado:
Ahora ya terminamos la primera sección, parámetros, en una **One Time Url**.
**Web Forms** sirve para recopilar información adicional mediante un formulario web, lo cual no es obligatorio en este caso. Vamos directamente a diseñar nuestra **Web Page**:
Se ve bien. En la parte inferior, define un intervalo de expiración para la URL de un solo uso. De forma predeterminada, el enlace vence en 10 minutos. El paso final para la **One Time Url** es especificar un subflujo que se ejecutará cuando los usuarios abran esta página:
No olvides hacer clic en **Save** en la esquina superior derecha y la URL de un solo uso quedará lista:
Después de configurar la URL de un solo uso, vamos a agregarla a la acción **Create Payment Link**:
En el subflujo de **Create Payment Link**, agrega una acción **Get One Time Url** antes de la solicitud externa (haz clic y arrastra para moverla).
Guarda la nueva URL generada en un campo de app y luego edita la solicitud externa para insertar ese campo:
Guarda la edición y publica el subflujo.
Triggers
La app ahora puede recibir los resultados de pago desde Razorpay; enviemos el resultado de vuelta al chatbot mediante un trigger.
Sigue los pasos del 1 al 6 en la captura de pantalla anterior para crear un trigger y comenzar a editarlo:
Aquí es donde especificas qué datos enviar de regreso al chatbot; en este caso, enviamos tanto payment_status como todo el JSON de payment_result.
Después de eso, podemos disparar el trigger en el subflujo que ejecuta la URL de un solo uso cuando se recibe el pago:
Pruebas
TIP - Como tu app todavía está en versión borrador, cualquier cambio realizado en la app también se actualizará en todas las apps instaladas. Simplemente actualiza la página web para obtener la versión más reciente de la app.
No hay nada que editar en el flujo anterior del chatbot, pero el trigger debe configurarse en **Automation** antes de volver a probar el proceso de pago:
Sigue los pasos del 1 al 4 en la captura de pantalla anterior para agregar el trigger y nombrar 2 campos personalizados para guardar los datos en el chatbot:
Crea un nuevo subflujo para este trigger. El subflujo se ejecutará una vez que el chatbot reciba los datos desde la app:
En el subflujo, simplemente muestra los datos que recibimos:
Todo bien por ahora, publiquemos el subflujo y volvamos al subflujo anterior para previsualizar nuevamente desde el **Action Step**:
Se recibió otro enlace, haz clic en **Pay** y usa la tarjeta de prueba nuevamente para procesar el pago:
La página web diseñada se muestra como se esperaba:
¡Ding! También se recibió un mensaje en Messenger:
🚀 ¡¡Felicidades!! ¡Creaste tu primera app! 😍