Step by Step Integration Guide

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

1. 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.
2. 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:

• Login Integration
• Payment Integration

There are few optional integrations merchants can do to make the user experience more seamless:

• Notification Integration
• Additional API Integration

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:

1. User clicks on merchant's Mini Apps Icon and lands on the landing page.
2. User browses the catalogue/ adds items to their cart.
3. When user details are required call paytmFetchAuthCode JS API and post user consent, login the user seamlessly.
4. 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.

Step 8: Payment Integration

Mini Apps platform require merchants to mandatorily use the Paytm payments if their Mini App has payments functionality. Payment happens with Paytm app with all linked payment mode available for users. This creates a seamless payment checkout experience for the end-user along with ensuring high success rates.

The Payment flow works like this:

1. User adds items to merchants cart and clicks on Proceed to Pay by calling.
2. User is then shown a popout of Paytm PG right within Paytm App, where all configured payment modes are visible.
3. User completes payment and is landed back seamlessly to merchant Mini Apps.

Detailed Payment Integration steps can be found here.

You can walkthrough the Paytm Mini App Payment integration in the video below.

Step 9: Notification Integration (Optional)

Paytm also provides the functionality to send Order related notifications to MiniProgram users. For the same merchant needs to submit their requirements of Notification Templates. Once approved, notifications can be sent via an S2S hit to Paytm server.

There are few conditions merchant need to ensure while sending Notifications:

• Only whitelisted templates are allowed
• Merchant can only send Order related Notifications to the user
• There is a limit on the number of Notification allowed per order ( By default it is 3 notifications within 7 days from the date of order for each unique order placed through Mini Apps

Note: Do not send any promotional messages as part of this functionality. Violating this might lead to blacklisting of your Mini Apps Detailed Notification Flow can be found here.

Step 10: Additional JSAPI Integrations

Paytm also provides a rich catalogue of Additional JS APIs for you to match Native like experience for your Mini Apps. For the same, the detailed list of JS APIs can be found here.

Note: Do not send any promotional messages as part of this functionality. Violating this might lead to blacklisting of your Mini Apps Detailed Notification Flow can be found here.

Step 12: Going Live

1. Tap on 'Take your app live'.
2. A summary screen with your mini app details will be shown.
3. Tap on 'Submit your app for Go-live'.
4. Congrats! Your go-live request is registered. Your app will be made post a final sanity test by the Paytm team in the next 1-2 working days.

Note: No further changes in app configuration will be allowed post submitting the go-live request. Once your app is live, you can resubmit any changes as outlined in Step 11 above.