Making a unique store for your high-value products shouldn't be difficult.

Whether you're offering a service, selling a sports car or sending people to space, creating a store that is unique takes time. Especially if you want that store to have a great checkout experience. Powered by Rapyd, PlutusPay.app solves this problem. A batteries included no-code, store generator with intelligent checkouts.

⚡️ Quick Links:

For example stores, visit the site or scroll down 👇

🔨 Made By:

In this hackathon, we wrote exactly 4324 lines of code. We're hoping 4324 is our new lucky number!

💡 Inspiration

When we read the brief, there was one line that stood out to us... “You do not have to build for the space tourism use-case.” We realised that there are plenty of high-value use cases that could benefit from the virtual account payment system. We also quickly realised that any product this valuable deserves a unique store for taking payment.

But creating a unique store for every product is a time consuming process. Especially one with a great checkout experience. So we asked ourselves the question - What if we built a tool that solves this problem? We used this hackathon to make a customisable, no-code, store generator with intelligent checkouts and of course we wanted to build in Rapyd integration for accepting payments for high-value transactions.

🤩 What it does

The Application first acts as a no-code store creator for store owners.

  • No-code store creation: This includes customising images, theme and text across the site.
  • Funds all Separate: Each store has its own wallet so funds never get confused.
  • Unique website addresses for every created store: That you can share with customers to start accepting payments.
  • Deposit, instalments and one-time payments included: Each customer gets their own virtual account when they start checkout which is configured to handle any required payment strategy.
  • Streamlined refund issuing: Customers can cancel their purchase and input their bank details, once the store owner has accepted. The refund is issued.
  • Stats: View your stores, their funds and performance all in one place:

Secondly as a customer visiting a store the application facilitates purchases:

  • Intelligent Checkout: The checkout uses information supplied by default in requests to save you the hassle of typing in your country and currency. Less forms for customers === win! You can also override this in the rare case we get it wrong!
  • Third-party login: Creating new accounts is a pain, so just sign in with google, twitter or github if you like.
  • Easy to understand flow: As soon as you initiate the checkout flow you know exactly how many steps there are. We break down every step to make it clear what we need from you.
  • Mobile Responsive: On the go? No problem! Purchase right from your phone.

🤘 Example Stores:

💰 Value to Rapyd

Rapyd already has a hosted checkout solution, but it does not integrate with virtual accounts. Our product could be integrated into the Rapyd ecosystem to allow anyone to create a checkout with virtual accounts for high value transactions. But it could also allow users to create more than a checkout but a whole store from your platform.

Not only would this increase the numbers of people using Rapyd but it would also open new avenues for data collection. The more data you have, the more you can identify customer needs and as a result create better products!

🚀 How we built it

The application was built with:

  • Rapyd APIs for all things payments. Programmatic wallet creation and virtual accounts.
  • ReactJS as the de-facto JavaScript library for building user interfaces
  • NextJS as our blazing fast React framework for performance, scalability, security and accessibility
  • Vercel Serverless Functions to bring an entire backend to PlutusPay - without managing a backend
  • Firebase to enable user accounts, SSO, and database.
  • TailwindCSS to leverage the benefits and speed of the utility first CSS framework .

💰 Monetisation Potential & Business Strategy

Our monetisation strategy would be a tier-based subscription model. A free tier might allow you to create 3 stores and then we would offer a membership for unlimited stores.

💪 Hackathon Requirements

  • Use Rapyd’s Virtual Accounts API: Each user created store has a uniquely generated wallet. When a user creates an order via that store, a virtual account is created on that wallet specifically for that users order. Wallets never get confused between stores and virtual accounts never get confused between customers.

  • Accept customers payment in local currency via a local bank: During checkout we intelligently work out the users country and currency without them having to enter anything. This is then passed to rapyd for virtual account creation.

  • Two-Step Payment Process: During checkout the user is first prompted to send the deposit. The app listens for any transactions and progresses the form as soon as the deposit is received. Then the user is prompted to pay any outstanding balance

  • Transaction Reconciliation: Our underlying database keeps track of order states, fund, currencies and more. These are visible to store owners via their dashboard.

Extras

  • A clever and frictionless way to refund the deposit amount: Cancelling is easy for customers! When they ask for a refund, it hooks into the hosted beneficiary page on Rapyd. After the beneficiary has been created its a simple click of approval from store owners. See the flow below:

  • Facilitating other space transport scenarios that are B2B: The white label nature of the created stores means it could facilitate anything! In the future, if the current configuration is not enough we could add options to collect more information from customers during checkout.

  • A great UX: We spent plenty of time ensuring that our sites were easy to use and understand (Regardless of the theme!). We also spent time ensuring that the performance was as fast as possible so customers would be in and out in a flash!

💪 Accomplishments that we're proud of

Over the past few weeks we've turned an idea we thought to be impossible in the time frame into a product we could actually use and potentially even monetise, while also using technology to work towards a better and more unique store experience.

🧐 Challenges we ran into

  • Working with brand new APIs from Rapyd. Rapyd's eco-system was totally new to us. Learning it at pace while trying to use it was challenging but fun!
  • Integrating autosave on our checkout. We wanted to ensure that users would never experience going half-way through the checkout and accidentally losing their progress. Our autosave function merges local form data with the database after every click.
  • Aggregating stats via complex queries. Aggregating stats across multiple tables led to some of the most complex queries we have had to write so far.
  • Making the store customisable via themes. We had to create a custom built a context provider that grabs the store configuration, finds the theme and then appends the correct classname to the body element.
  • Wildcard subdomains. Not knowing what the domains that users would set up was not something we had encountered before. The most challenging thing in this was finding the right thing to google. It turns out the correct term for this is "wildcard subdomains". Vercel made setting these up easy.

🤯 What we learned

Carlota- "Designing checkouts that would feel great even when themed differently was an interesting challenge which really made me focus on perfecting my wireframes. Also loved finding creative ways to reduce the number of form inputs a user needed to complete."

Sam - "Rapyd's API was totally new to me, sandbox mode really helped! Trying to tie in store creation with wallet creation was interesting and ensuring that actions taken in Rapyd always matched what we had in our database was time consuming."

What's next for PlutusPay.app

We've enjoyed working on this project but it is still a long way from perfect. We would love to add:

  • More themes and introduce font customisations
  • More Rapyd webhook use - The webhook offering is super interesting but we didnt have enough time to utilise all the events we would have liked to. By using more webhook functionality we could make our checkouts even more intelligent!

Small Suggestion for Rapyd

There is no way to programmatically add a web-hook when creating a wallet. The only way to do this is via the dashboard. It would be great if we could specify an endpoint when creating a wallet via REST.

🥳 Thanks Rapyd for making this awesome event!

Built With

Share this project:

Updates