The idea came when we were brainstorming around a poster of a top that was really good but why do I need to search the store when I can just scan a QR code to buy from the brand's website directly?
What it does
A platform to make your marketing campaigns more accessible and interactive
- Create buttons, payment pages, and QR codes.
- These capabilities can be used at different spots in a campaign.
- Directly pay when you see the product in front of you.
- Provides detailed analysis of performance.
- Increases the rate at which products are bought.
- Provides a gateway for all brands to become omnichannel in a seamless manner.
A brand comes on the platform, gives us its details, and creates a component depending on its need. Monitors the performance of the app itself and enhances the experience for its users.
This eliminates the need to setup heavy payment infrastructure for brands, which enables them to focus on business and conversion.
How we built it
Our platform is divided into 3 pieces:
Entropay Frontend - This is the client-side application where businesses can configure and generate different kinds of payment methods like Hosted payment pages, QR codes, and embeddable payment buttons. This is a web application built using ReactJS which interacts with our backend to provide various payment methods and show analytics. Hosted payment pages and QR code payment pages also open up on the web app.
Entropay Backend - This is where we interact with the rapyd checkout APIs. We have a create-checkout API that generates checkout pages on the fly for the various payment methods and returns the checkout code to be fed to the checkout toolkit which then generates the checkout iFrame. The backend is a Nodejs application and we use firebase firestore as our database.
Entropay payment button widget - This is our coolest feature! The embeddable payment button can be included in existing code bases just by copy-pasting 3 lines of code we generate for you. It is a ReactJs application bundled using parcel. The links to the bundled js and css files need to be included along with an empty div tag, and the payment button gets embedded. We use react-helmet in order to use the checkout toolkit.
Challenges we ran into
Since we have the option of various payment methods like payment buttons and QR codes, we need to generate a unique embedded checkout iframe on every such request. Manually generating a checkout page and entering the code is out of question here. So we built an API that generates rapyd checkout pages on the fly and feeds them to the Pages/Buttons where a unique embedded checkout experience is generated for the user.
We also faced issues while dynamically trying to modify the checkout toolkit code in the document head so we solved that problem using react-helmet.
Accomplishments that we're proud of
Building a full-fledged payments solution that can benefit a lot of small-scale businesses that do not have the technical bandwidth to build payment infrastructure for themselves.
What we learned
We learned how to build an embeddable widget using ReactJs and optimize its performance by using various tricks while bundling it. We also learned how to use Rapyd APIs in innovative ways.
What's next for Entropay
Providing various customization options and ways to interlink the various payment methods we have.