On button click, a dialog with payment form opens up. Consumers can also verify price in realtime by clicking "verify price" link in form
Pay button fetches real time price in EUR for given OCEAN token
Payment form recognises your card type (Visa or Mastercard)
Once Payment is successful, Consumer can ask for equivalent OCEAN tokens
Once consumer clicks "Send me OCEAN" button, delivery of OCEAN token is initiated
Once OCEAN tokens are successfully delivered, success message is displayed to the user and on clicking close button, dialog box is closed.
Tweets and blogposts
Here's my tweets and medium post describing my journey building PayFiat https://twitter.com/akshay_acp/status/1215953355656187904
I have been operating in fintech for most part of my yet short ongoing career. So, naturally idea of blockchain and cryptocurrency has been fascinating to me. Though I am relatively new to this industry my fintech background has been very helpful. One of my favourite projects in this industry is Ocean Protocol for reason being my inclination towards data, AI and cryptocurrency. Most obvious app that you can build on Ocean Protocol is data marketplace. But, I didn't wanted to build just another data marketplace. Instead, I wanted to build something that all other marketplaces can use and leverage to add value to themselves and improve their value proposition. Also, I wanted to build something that would improve web2.0 users' on-boarding and adoption to crypto world.
What it does
Currently, to pay for data assets on Ocean Protocol, one requires OCEAN tokens in their wallet which is obvious utility of OCEAN token and cool feature of cryptocurrency. But, this feature also create barriers to many non-crypto users who genuinely wants to utilise Ocean Protocol. So, to onboard such non-crypto crowd and to increase adoption and improve value proposition, I built PayFiat as part of ongoing data economy challenge and hopefully with the long future. With PayFiat consumers can pay for Ocean Protocol's data assets with their credit card in fiat currency like USD, EUR etc.
How I built it
PayFiat is available as a simple React component (and in future vanilla html plugin) for any marketplace or other Oapps (Ocean Dapps ) which requires OCEAN token as a means of payment. Flow of interactivity in PayFiat - 1) Marketplace plugs in PayFiat UI component on the checkout page (or Consume page as in Commons marketplace) 2) PayFiat UI component receives payment details from marketplace (for e.g.) price of data asset is 500 OCEANs, current ethereum account of user (metamask, burner wallet etc). 3) PayFiat UI component then sends these details to PayFiat backend service, which discovers real time fiat equivalent price of 500 OCEANs (approx 16,5 EUR at time of writing this post). PayFiat uses Coingecko to determine current prices since it is also preferred by Ocean Protocol. 4) Once payment is successful, PayFiat transfers equivalent OCEAN tokens to user's ethereum account, which they can use to purchase data asset.
Challenges I ran into
My goal is to make PayFiat as simple and as flexible as possible so it can be used by a wide range of data marketplaces within Ocean Protocol ecosystem. For this reason, PayFiat UI component and server had to be fully configurable. What it means is, developers should be able to define look and feel, token addresses, networks (in demo I have used rinkeby for testnet, but network can be easily changed to Pacific, Nile or Mainnet in the config file without changing a single line of code).
Accomplishments that I'm proud of
With PayFiat, I feel I have contributed a nice utility to improve Ocean tech adoption for non-crypto userbase and improved value proposition for the marketplaces. Also, PayFiat server can be configured to transfer OCEAN token directly to PACIFIC network, meaning it saves you a transaction cost by removing use of Token bridge.
What I learned
There is a huge number of Oapps (Ocean Dapps) that can be built around this tech. Ocean Protocol is an amazing project and ready to get adopted. I have some other nice ideas of what can be build on this tech stack and hopefully I will be able to contribute more towards this project in the future.
What's next for PayFiat
Next and most obvious feature that I wanted to build was to add another service (with just a button) to pay using any ERC20 token. Just like PayFiat, this service would then convert your selected token to equivalent OCEAN token for best price match across DEXes and does an internal transfer transaction to update OCEAN balance.