Introduction

Today, we delve into the latest iteration of Mini Apps—Version 2—highlighting its new features, significant improvements, and practical implementation steps.

This comprehensive summary aims to provide a clear understanding of the evolution from Version 1 to Version 2, emphasizing enhanced functionalities such as One-Time URLs, external requests, JavaScript functions, and web form integrations.

Whether you're a developer, a product manager, or a chatbot builder, this guide will equip you with the knowledge to leverage Mini App Version 2 effectively.

Overview of Key Topics

• Comparison between Mini App Version 1 and Version 2

• New features introduced in Version 2

• Step-by-step walkthrough of building a Razorpay payment mini app

• Implementation of One-Time URLs for real-time payment status tracking

• Handling external requests and JavaScript functions

• Creating web forms for user data collection

• Managing triggers and workflows for payment and survey processes

• Sources: static and dynamic data fetching

• Best practices for URL expiration and data transfer

Comparison: Mini App Version 1 vs. Version 2

This comparison underscores the significant enhancements in usability, flexibility, and automation in Version 2.

Building a Razorpay Payment Mini App: Step-by-Step

1. Creating and Editing the App

• Navigate to My Contents > My Mini Apps.

• Select "Razorpay by Mini App v1" for reference.

• Click Create New App, name it "Pay by V2", and select Mini App 2.

• Notice the UI change: Gray vs. Green edit buttons indicating different versions.

• Enter basic info: logo, cover video, API scope.

2. Configuring Authentication

• Version 1: Set Key ID and Key Secret in params; use Basic Auth.

• Version 2: Use Inputs section to add Key ID and Key Secret as required fields.

• Define field types (string, number), placeholders, and validation.

3. Setting Up API Requests

• Use External Requests feature to send POST requests.

• Map request payloads with headers (authorization) and body (JSON).

• Example: Sending amount, currency, and customer info.

• Test requests within the mini app environment.

4. Creating Actions

• Add "Get Link" action.

• Define inputs: amount, title, description.

• Map outputs: payment URL (short URL).

• Save and test the action to generate payment links dynamically.

5. Integrating with Flow Builder

• Use Flow Builder to create subflows.

• Example: "Get Link" subflow triggers external requests.

• Use Action steps like External Request, Set Value, JSON Operations.

• Test the flow to ensure correct URL generation and data mapping.

6. Testing Payment Workflow

• Install the mini app in your chatbot.

• Input payment amount and initiate payment.

• The mini app generates a payment URL.

• User completes payment on Razorpay's page.

• System captures payment status via webhook or One-Time URL.

Implementing One-Time URLs for Real-Time Payment Status

1. Concept and Benefits

• Version 1: Relied on webhooks to notify payment status.

• Version 2: Introduces One-Time URLs—a secure, single-use link—to poll payment status in real-time.

• Advantages:

  • Simplifies webhook management.

  • Enables direct status checks within the app.

  • Facilitates web form-based data collection.

2. Creating a One-Time URL

• Navigate to Triggers > One-Time URLs.

• Create a new URL, e.g., "Payment".

• Define parameters: e.g., callback URL, payment ID.

• Use API documentation to set the correct callback URL (e.g., your webhook endpoint).

3. Configuring the Payment Flow

• Generate One-Time URL before initiating payment.

• Pass this URL as callback in Razorpay.

• When user completes payment, Razorpay redirects to the callback URL.

• The callback triggers a workflow that:

  • Retrieves payment status.

  • Fires triggers in the chatbot.

  • Updates user data accordingly.

4. Handling Payment Completion

• Use Webhook or Polling via One-Time URL.

• Map payment status to chatbot triggers.

• Example: If status = paid, send confirmation message.

External Requests and JavaScript Functions

1. External Requests

• Used for server-to-server communication.

• Example: Sending payment details, retrieving tokens.

• Request structure:

  • Method: POST/GET

  • Headers: Authorization, Content-Type

  • Body: JSON payload

• Testing: Built-in test feature to verify responses.

2. JavaScript Functions

• Support custom client-side logic.

• Can be used to modify data, validate inputs, or trigger actions.

• Example: Dynamic calculation of amounts, custom validation.

Creating Web Forms for User Data Collection

1. Building Forms

• Use Web View Forms in Version 2.

• Design forms with various input types: text, select, number.

• Map form inputs to variables or parameters.

2. Integrating Forms with Flows

• Trigger forms via One-Time URLs.

• On form submission:

  • Data is sent back to the chatbot.

  • Trigger workflows like payment confirmation or surveys.

• Example: Collect user info before payment.

3. Example: User Survey

• Create a trigger for survey submission.

• Design a web form with fields like gender, user ID, notes.

• Use JSON variables to store responses.

• Fire workflow upon submission to process data.

Managing Triggers and Workflows

• Best Practice: Always validate payment status before confirming success.

• Tip: Use conditions in workflows to handle different statuses.

Sources: Static and Dynamic Data

Static Sources

• Predefined options (e.g., gender: male, female).

• Created manually in Sources section.

• Use in select fields.

Dynamic Sources

• Fetch real-time data via API requests.

• Example: Fetch user list from an external API.

• Use JSON Path to parse responses.

• Map ID as value and name as label.

Example: Fetching User List

{
  "path": "$.users",
  "value": "$.id",
  "label": "$.name"
}

• Use in select fields for dynamic options.

Best Practices and Final Tips

• URL Expiration: Always set expiration time for One-Time URLs to prevent reuse.

• Data Transfer: Use query parameters or web forms to pass user info.

• Error Handling: Implement conditions to handle failed payments or expired links.

• Testing: Rigorously test each step—request, trigger, workflow, and user flow.

• Security: Protect sensitive data with proper authentication and secure callback URLs.

• Documentation: Keep API and flow documentation updated for maintenance.

Summary

In conclusion, Mini App Version 2 introduces powerful enhancements that streamline payment processing, user data collection, and workflow automation. Its One-Time URL feature simplifies real-time status tracking, while web forms and external requests enable richer user interactions.

By following the structured steps outlined above, developers and chatbot creators can build robust, secure, and user-friendly mini apps that leverage the full potential of Version 2. Embrace these new tools to elevate your chatbot experiences and deliver seamless payment and data collection solutions.