Step 1: Getting Ready
During onboarding receive the following details from Paytm team:
- Developer Mini App QR Code
- App ID
- Auth client ID and Client secret
- PG MID and Key
Note: PG MID and Key are required for collecting payment inside the mini app and will only be available after signing up as an unlimited merchant. The option to sign up as an unlimited merchant will be available on Mini Apps Details page.
Step 2: Configure your Mini App
- Scan the QR code present on the Mini App details page on the Business Dashboard using the Paytm android app. This will open the developer mini app.
- Tap on 'Configure your App' to configure your following mini app details.
- App Name: The name of your Mini App
- App description: A brief description of your Mini App which would be displayed on Mini App listings
- App Base URL: The base URL of your Mini App
- App URL Path (optional): The path of your Mini App
- Query Param (optional): Any additional query parameters which are to be appended to your mini app URL
- App Category: Choose the relevant category for your mini app. You mini app will be listed in the same category in Mini App listings
- Support email: Customer support email of your business/app
- Support contact: Customer support contact number of your business/app
Step 3: Detect if Mini Apps is running inside the Paytm App
Merchant can detect if the app is running inside the Paytm App or not in the following ways:
- userAgent:- Paytm will return userAgent value"AppContainer"
const ua = window.navigator.userAgent; return/AppContainer/i.test(ua);
- queryString:- Merchant can append queryString in URL to identify the source
Step 4: Whitelist users to access Developer Mini App
Tap on Manage Access to manage who can access the Developer Mini App. Only the phone numbers whitelisted here will be able to open the Developer Mini App by scanning the QR code.
Step 5: Open your Mini App in Debug mode
- Tap on 'Open Mini App' to open your mini app in debug mode to test and complete your integration.
Step 6: Essentials for Integration
To onboard as Mini Apps, there are only two essential integration merchants need to implement:
There are few optional integrations merchants can do to make the user experience more seamless:
Step 7: Login Integration
Mini Apps platform require merchants to mandatorily use the Paytm SSO if their Mini App has login functionality. For the same when a merchant needs user credentials for proceeding with the flow, the merchant needs to call the paytmFetchAuthCode JS API to get the required details. Paytm will show a popup where users can explicitly provide their consent to proceed with the flow. The flow for the same works like this:
- User clicks on merchant's Mini Apps Icon and lands on the landing page.
- User browses the catalogue/ adds items to their cart.
- When user details are required call paytmFetchAuthCode JS API and post user consent, login the user seamlessly.
- Once the user is logged into merchant's system, they should manage their session by dropping/managing a secure HTTPS cookie so that there is no need for the authentication steps each time the user opens the Mini Apps.
Note: The consent will only come once and for returning users, the merchant can seamlessly access user details to facilitate login. Detailed Login steps can be found here.
You can walkthrough the Paytm Mini App Login integration in the video below.