Onboarding the mainstream: Metapass + Web2.5

Inspiration

Metapass has been the only fully functioning permissionless, decentralised ticketing platform built on the Theta Network, for more than 1.5 years. However, one main struggle we face when pitching the platform to potential clients is that while the new features enabled by our smart contracts are interesting and powerful, they worry about the friction new users will encounter when signing up for and purchasing tickets on the platform. Indeed, when non-crypto users initially use our platform, they may be intimidated by the unfamiliar interface of Metamask, which when fuelled by the plethora of scams that happen throughout the crypto space, may very much turn them off the idea of using Metapass althogether right away. And not just that, they will also have to figure out how to fund their wallet with TFUEL (which may be hard to get in certain regions), understand what adding a chain does on Metamask, as well as click through all the transaction approvals for each purchase they wish to make. That is certainly a rather tiring process for the uninitiated.

This is why figuring out ways to onboard our Web2 friends away from their familiar ticketing platform of choice has been on the top of our priority list. Our goal is to build an easy and seamless onboarding process, as well as a frictionless payment pipeline for non-crypto saavy users. This project will explore the first part of the infrastructure we intend to develop to enable this vision.

What it does

As mentioned before, using Metamask to log in and pay for tickets is one of the main points of friction affecting our user flow right now. As such, we built a sleeker and cleaner login portal, with the option to sign up for a Metapass account using email and password instead of using Metamask. This then automatically creates and stores a custodial wallet for the user on our servers, which we can control and mint tickets into. In addition, we integrated the Stripe payment pipeline directly into our checkout process for users logged in via their Metapass account. Users can simply select which tickets they wish to purchase, and our backend will calculate in real time how much in USD to charge the user, based on the current price of TFUEL. The backend then redirects the user to a Stripe checkout process, where the user can pay using their favourite fiat method - credit card, Apple Pay, etc. This eliminates the need for the user to handle TFUEL at all, and allows for direct card payments without needing to deposit cash or crypto into the platform first. This is also a first for any platform running on Theta Network right now, which is a great achievement on its own.

How we built it

To implement the email login process, we integrated Firebase into the Metapass sign in process, similar to most Web2 platforms nowadays. This allows for easy storage of user credentials, as well as management of access tokens with its seamless integration with React Typescript, which is what our frontend is built on. Then, once the user has successfully authenticated themselves, they will query our backend for a custodial wallet address that we generate. Our backend will then register any new user ID and generate a random private key and wallet address for them, or look up the existing wallet address for any previously signed up user. The private key generated by our server is also stored securely on AWS databases, and we make sure that it does not leave our backend at all.

Next, to implement the Stripe payment process, we first had to create a REST API endpoint that receives an order for a particular user. This order is an array with objects in the following format:

{
    address: 0x1111111111111111111111111111111111111111111111111111111,
    quantity: 3
}

Then, the backend looks up the prices of each ticket in TFUEL at the corresponding smart contract address via our Graph node. It also queries the current price of TFUEL using our CoinGecko API, and makes use of that for the payment calculation in fiat dollars. Finally, the backend calculates the updated prices of each ticket along with the quantity, and generates a Stripe payment session along with the relevant redirect to the client to bring him to the checkout page. Once the user completes his payment, a WebHook then notifies our server about any incoming payments. Then, and this is not implemented yet, the server will mint the corresponding ticket into the user's wallet.

This Stripe checkout pipeline also complements the existing Gasless Mint feature that we have to allow free tickets to be minted by anyone with a Metamask wallet, without having to pay gas fees or send a transaction.

Challenges we ran into

One of the challenges we ran into was actually minting the tickets into the user wallet after payment has been completed. As the current smart contract requires there to be the correct amount of TFUEL paid into the contract in order for a ticket to be minted, this will mean that each Stripe payment with fiat will need to be converted into TFUEL and sent to the smart contract, before a ticket can be minted. This is highly inefficient and difficult to implement, and therefore we have planned to redesign the smart contract as well, in order to feature a whitelisted "admin" wallet that can mint any ticket they want into any wallet. This reduces the level of decentralisation, at the benefit of being able to more easily mint tickets into user wallets with more efficient usage of TFUEL.

Another challenge we faced was the Stripe minimum order of $0.50 for each ticket. As a result, for tickets that are cheaper than $0.50, we have to revert back to the minimum set by Stripe in order to take the payment. We also charge a 6% handling fee to account for the fees charged by Stripe, as well as the spread that could happen between the time the price is updated on CoinGecko.

Accomplishments that we're proud of

We are proud that we are now not only the first decentralised NFT ticketing platform built on Theta Network, but also the first platform of any kind on Theta Network that accepts card payments for digital goods in the form of NFT tickets. We hope that our efforts in simplifying the onboarding process will not only bring more users to Metapass, but also increase the level of adoption for Theta Network as a whole.

What we learned

Through this project, we learnt that while creating cool new concepts using our Web3 knowledge is fun and exciting, we still need to accomodate for the rest of society who may not share the same passion for blockchain technologies. As such, sometimes it is wise to scale back on how technically impressive a product can be, and rather focus on the features that most users really want and care about, even if it goes against some of your own principles and visions about how a product should be in a ideal world with perfect technical knowledge.

What's next for Metapass

The next steps for us are quite clear now. We need to redesign some of our ticket smart contracts, in order to firstly store the ticket prices directly in USD and not TFUEL, and also allow for a master minter wallet to directly mint tickets into the user's wallet without needing to pay TFUEL. Rather, payments are settled via Stripe directly, and for such cases the blockchain is only used to track ownership information rather than payment settlement. Finally, we still want to enable users who care about Web3 to use its best features, such as true ownership of their tickets, as well as crypto payments. Therefore, we also intend to create a centralised price oracle for TFUEL, which is periodically updated by our backend.This will then be used by our ticket smart contract to calculate how much is needed to be paid in TFUEL for the stored USD price, enabling dynamic calculation of onchain payment settlement without the volatility of cryptocurrencies.

Finally, Metapass is also currently organising a 3 month long event called BEACONS, where we encourage the community to engage with our platform and showcase their own best talent and events on Theta Network. We already have several key events lined up for this, such as a Secret Pineapple Society meetup, Camp Theta, as well as a virtual fitness gym jam! It will be an exciting competition for sure, with a $2000 prize pool (and some juicy special prizes) up for grabs across multiple categories. If you have time, do check out the event page too, and possibly submit some of your own events!

Built With

• django
• firebase
• infura
• ipfs
• material-ui
• react
• stripe
• typescript