Razorpay (pasarela de pago india)
Esta demostración muestra, paso a paso, cómo construir un NicoApp desde cero. Razorpay es un proveedor de servicios de pago en la India. En esta demostración vamos a crear una acción "Crear enlace de pago" y un disparador "Pago realizado".
Descripción general del proceso
Registro
Antes que nada, registra una cuenta en Razorpay y obtén tu clave de API en Configuración - Clave de API:
Crear
En tu panel, sigue los pasos 1 a 7 de la captura de pantalla anterior para crear una app de la versión 2 y entrar en el constructor de apps.
Configuración
En la sección de configuración, haz clic en Editar para editar la información de la app, incluyendo nombre, descripción, logo e imagen de portada de la app.
Los usuarios pueden ver la información de tu app antes de descargarla.
Autenticación
Según el Razorpay Auth Document, key_id y key_secret son obligatorios con la autenticación Basic Auth.
En la sección Autenticación, selecciona Clave API como Tipo de Autenticación y haz clic en Editar para agregar las 2 entradas de autenticación.
Haz clic en Guardar cuando termines de agregar key_id y key_secret:
Acciones - Entradas
¡Ahora que configuramos la parte de autenticación de tu app, vamos a agregar acciones!
API utilizada: Crear enlace de pago.
Sigue los pasos 1 a 6 de la captura de pantalla anterior para crear la acción y empezar a editarla.
Siguiendo la documentación de la API, puedes ver qué parámetros existen, qué tipos de valores reciben y si son obligatorios u opcionales.
Haz clic en Agregar Elementos en la sección Entradas:
Ten la documentación y NicoChat lado a lado y copia y pega la información correspondiente.
Para los parámetros opcionales, desactiva el interruptor ¿Requerido? y proporciona un valor predeterminado, si es necesario.
Te sugerimos completar primero las Entradas y dejar las Salidas para después de terminar el subflujo de esta acción.
Escribe la descripción y las orientaciones necesarias y revisa la sección de vista previa de tus entradas.
Después de editar la información y las entradas de la acción, crea un subflujo que se ejecute cuando los usuarios llamen a esta acción:
Flujos
Ve a la sección Flujos y abre el subflujo que acabamos de crear:
En el caso de la creación del enlace de pago, una solicitud externa debería ser suficiente:
Sigue los pasos 3 a 5 de la captura de pantalla anterior para empezar a editar la solicitud externa. ¿No sabes cómo agregar un paso de acción? No te preocupes: prueba a hacer clic con el botón derecho del mouse.
Selecciona el tipo POST, pega la URL, selecciona Body - raw - JSON y copia los 2 parámetros, monto y moneda.
Sustituye 1000 e INR por los campos de la app monto y moneda pulsando el botón </> del lado derecho. En la ventana emergente, busca el campo por su nombre y haz clic para seleccionarlo:
Cuando insertas campos de la app, aparece el "Contenido del Cuerpo de Prueba". Ahí es donde se especifican los valores de prueba de los campos. Sin valor de prueba, la prueba puede fallar. Definamos el monto como 1000 y la moneda como AUD:
{{ para llamar a un campo, asegúrate de que no haya ningún carácter como " justo después. Mira la imagen abajo.
Para la autenticación, ya mencionamos que la API de Razorpay usa autenticación básica:
Selecciona Autenticación básica, completa los campos de la app y recuerda informar tu key_id de prueba y tu key_secret de prueba.
Parece que todo está bien. Haz clic en el botón Probar:
Sigue los pasos 1 a 8 para guardar el resultado de la prueba en los campos de la app y haz clic en Guardar.
¡Excelente! La solicitud se completó y obtuvimos en los datos de respuesta el payment_link_id y el payment_link que necesitamos.
payment_link_id es el ID que identifica un enlace de pago, y payment_link almacena el enlace en sí.
Intenta 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 definimos las Salidas de la Acción!
Guarda y publica el subflujo. Después, volvamos a la sección Acciones:
Acciones - Salidas
Agrega las 2 salidas y haz clic en los 2 botones Guardar, para guardar no solo la edición de la salida, sino también la edición de la acción.
Prueba
En tu panel, sigue las capturas de pantalla de abajo para instalar la app en la versión borrador, ya que todavía no ha sido publicada:
Completa tus credenciales y guarda:
Actualiza tus credenciales aquí, si lo necesitas:
Elige cualquiera de tus chatbots — por ejemplo, el chatbot de Facebook:
Crea un paso de acción, ve a Integraciones y selecciona la acción de tu app.
Completa las entradas, configura las salidas y haz clic en Guardar:
Agrega 2 pasos de Mensaje más para manejar 2 situaciones diferentes:
Muestra el resultado y coloca también el enlace de pago en un botón de URL.
Previsualiza desde el paso de acción y verás llegar este mensaje a tu Messenger:
Haz clic en el botón Pagar y verás la página de pago de Razorpay mostrando un pago de US$ 99,99:
Puede que no recibas este mensaje porque algunos enlaces de pago son bloqueados automáticamente por Facebook. En ese caso, conviene usar un servicio de acortamiento de URL, como Bitly, entre otros (la app de Bitly está disponible en la tienda de apps de NicoChat).
Si el mensaje no llega en Facebook, verifícalo en el Live Chat:
¡La acción parece funcionar muy bien!
URLs de un solo uso
¡Tu app ya casi está lista! Pero espera: el pago se realiza en el sitio de Razorpay, entonces ¿cómo saber si fue pagado o falló? Los proveedores de pago suelen ofrecer un parámetro llamado URL de retorno:
Según la documentación, el callback_url es la dirección a donde Razorpay envía el resultado del pago. Es decir, necesitamos indicarle a Razorpay un callback_url diciendo a dónde debe devolver la información.
Aquí se puede usar una URL de un solo uso como URL de retorno.
Sigue los pasos 1 a 5 de la captura de pantalla anterior para crear y editar la URL de un solo uso.
Vamos a abrir otra página de la app antes de entrar en la página de edición de la URL de un solo uso.
Ve a la acción "Crear enlace de pago" en la Página 2 y agrega los 2 parámetros a la sección del cuerpo:
Escucha el payload para una prueba en vivo. Ten en cuenta que la URL de prueba debe pegarse en "Contenido del Cuerpo de Prueba", y no en "Contenido del Cuerpo":
Al terminar, haz clic en Probar y recibirás un enlace de pago, como ya viste antes. Accede al enlace y haz un pago de prueba:
Usa una tarjeta de prueba para simular el proceso de pago.
Informa un código OTP aleatorio y haz clic en Enviar.
Por último, haz clic en Concluido y verás los datos que necesitamos cuando se realiza un pago real:
Ya terminamos la primera sección, parámetros, de la "URL de un solo uso".
Formulario Web sirve para recolectar información extra por medio de un formulario web, lo que no es obligatorio en este caso. Vamos directo al diseño de nuestra página Web:
Quedó bien. En la parte de abajo, define un intervalo de expiración para la URL de un solo uso. Por defecto, el enlace expira en 10 minutos. El paso final de la URL de un solo uso es especificar un subflujo que se ejecute cuando esta página sea abierta por los usuarios:
No olvides hacer clic en Guardar en la esquina superior derecha, y la URL de un solo uso estará lista:
Después de configurar la URL de un solo uso, vamos a agregarla a la acción Crear enlace de pago:
En el subflujo Crear enlace de pago, agrega una acción Obtener URL de Uso Único antes de la solicitud externa (haz clic y arrastra para mover).
Guarda la nueva URL generada en un campo de la app y edita la solicitud externa para insertar el campo:
Guarda la edición y publica el subflujo.
Disparadores
La app ya puede recibir los resultados de pago de Razorpay. Ahora vamos a enviar el resultado de vuelta al chatbot por medio de un disparador.
Sigue los pasos 1 a 6 de la captura de pantalla anterior para crear un disparador y empezar a editarlo:
Aquí es donde especificas qué datos enviar de vuelta al chatbot. En este caso, enviamos tanto el payment_status como todo el JSON payment_result.
Después de eso, podemos activar el disparador en el subflujo que la URL de un solo uso ejecuta cuando se recibe el pago:
Prueba
No hay nada que editar en el flujo anterior del chatbot, pero el disparador debe configurarse en Automatización antes de probar el proceso de pago nuevamente:
Sigue los pasos 1 a 4 de la captura de pantalla anterior para agregar el disparador y nombrar 2 campos personalizados para guardar los datos en NicoChat:
Crea un nuevo subflujo para este disparador. El subflujo se ejecutará en cuanto el chatbot reciba los datos de la app:
En el subflujo, basta con mostrar los datos que recibimos:
Todo listo. Publiquemos el subflujo y volvamos al subflujo anterior para previsualizar nuevamente desde el paso de acción:
Recibimos otro enlace. Haz clic en Pagar y usa nuevamente la tarjeta de prueba para procesar el pago:
La página web que diseñamos aparece como se esperaba:
¡Ding! Un mensaje también llegó a Messenger:
🚀 ¡¡Felicidades!! ¡Creaste tu primera app! 😍