Application to show how PubNub can add real-time features to your FinTech solution and improve the user experience.
Peer-to-peer payments can be enhanced using PubNub in a variety of ways:
- Real-time chat so users do not have to leave your app to send messages
- Chat history that can also hold receipt and payment history, so everything is in the same place
- Emoji / reactions can be added to both chat messages and payment notifications
- Read receipts so you know when messages have been read, or payment notifications seen.
- Seamless integration with Push Notifications (GCM for Android and APNS for iOS) so users always see your messages, even when your app is closed.
- File sharing: enhance your payment notifications with custom images or templates
- Typing indicators & message moderation
Real-time: <30ms global delivery, regardless of concurrency.
Scale: We handle 3 Trillion real-time API calls every month.
Stability: 99.999% SLA provided for all customers
Compliance: We support compliance for regulatory environments that include ISO 27001, HIPAA, GDPR, SOC2 Type 2, and CCPA
This demo will give you an impression of the kind of real-time features you could add to your P2P payment app using PubNub. The demo is written in our TypeScript Chat SDK to make hosting easier but we also cater to native mobile apps with our Chat SDKs for Android / Kotlin and iOS / Swift. All the real-time messaging features are real, except for the push notifications for obvious reasons. In production, your P2P payment app will be speaking to a dedicated backend, but this demo is designed to run locally within the browser.
A hosted version of this demo can be found at https://pubnub-fintech-demo.netlify.app
This demo is for educational purposes only, and contains only minimal error checking.
This application is written with NextJS, so be sure to have a copy of Node.js 18.17 or later installed.
To run this project yourself you will need a PubNub account
-
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Developer Portal.
-
Sign in to your PubNub Dashboard.
-
Click Apps, then Create New App.
-
Give your app a name, and click Create.
-
Click your new app to open its settings, then click its keyset.
-
Enable the Stream Controller feature on your keyset (this should be enabled by default after you created the keyset)
-
Enable the Message Persistence feature on your keyset and choose a duration
-
Enable the App Context feature. Important: It is recommended to also uncheck the
Disallow Get All User Metadataoption for this demo. -
Enable the File Sharing feature.
-
Copy the Publish and Subscribe keys and paste them into your app as specified in the next step.
-
Clone the repository
-
Replace the
.env.samplefile with a.envfile and populate it with the publish and subscribe keys you generated in the previous step. -
yarn install -
yarn dev -
You can now navigate to
localhost:3000in your browser. The first time you run the application on a new keyset it will have to first do some initialization, which will take a few seconds.
The demo simulates two mobile devices allowing you to log in and communicate between two users without launching a separate tab.
Your P2P payment application will already have a login screen for registered users, as well as some way for new users to sign up for your app (probably using their mobile number).
For simplicity this demo allows you to choose two users to log in as.
This demo uses direct (or 1:1) channels, which are designed for two participants to engage in a private conversation. Learn more about private conversations in our documentation for channel creation.
PubNub also supports public and group channels, though they are not used in this demo.
This demo uses PubNub for all message exchange with messages being sent using the channel.sendText() API.
You can send messages securely to users:
- To notify them when they receive a new payment
- When a payment status changes
- When a bill is due
- Receipt details
- To notify them there is a problem with the payment
- To send a (non-payment) chat message.
- etc.
You can't have a payment demo without the ability to send or request money, but since PubNub does not offer financial backend services, this portion of the application is fully mocked. Although the balance will be affected when you transfer payments, you can easily 'Top Up' that balance or just log out and in again, to return the balance to the default amount.
All PubNub messages are backed on the server, so you can quickly retrieve all historic messages in any chat. See our documentation on Message Persistence for more information, which also explains how to configure the duration messages are stored for - if you have specific questions around security or compliance, our PubNub solution architects are happy to assist.
The PubNub Chat SDK supports Message Reactions allowing you to easily add a reaction to any message, and be notified when others have added a message reaction in real-time. You can customize the solution to use any emoji you like, as long as it is supported by the platform (i.e. browser or mobile device)
PubNub guarantees message delivery. One way we do this is through read receipts, so users can see when their messages have been read.
The Chat SDK workflow for Read Receipts is as follows:
- A message is sent
- That message is received
- The recipient marks the message as read
- The sender receives notification that the message is read.
Liven up your payment transfers by associating images:
- Paying your friends for a holiday? Use a beach image.
- Paying your grandparents back for that zero-interest loan? Use a car image.
PubNub allows you to easily exchange images along with any message (including payment notifications)
The PubNub Chat SDK Typing Indicator makes it trivial to implement an indicator without worrying about timeouts and resetting timers.
PubNub supports Mobile Push Notifications, i.e. GCM on Android and APNS on iOS.
For this demo, I did not want to use real push notifications as that requires either a real iOS device, or an Android emulator - and that makes it more difficult to run the demo. I wanted to at least simulate push messages however to make it easier to imagine the workflow.
We do have a hosted push demo for Android, if you want to see something real - that uses a cloud-based emulator rendered within the browser.
This demo will always show users as online, but for more information about how PubNub allows you to see the online or offline status for each of your users, either globally or at the channel level, please see our Presence documentation.
This demo will allow you to see a rudimentary receipt screen. Receipt data can be sent to users when a transaction status changes, or when a payment is completed.
Please fork the repository if you'd like to contribute. Pull requests are always welcome.