NEAR Extension for Shopify

One-Click Solution for Decentralized Payments & Proof of Purchase NFTs on Shopify

Comment

Inspiration

💥Challenge 1: Lack of Decentralized Payment Solution for Merchants

Shopify is an e-commerce platform that powers over 1.7 million merchants to sell goods online to people around the world. Especially, small and medium business owners rely on Shopify each day to serve their customers. Although Shopify processed more than 79.5 billion US Dollars in sales in 2021, it has no good way of processing crypto transactions without going through a centralized exchange, and even then, payments are settled in US Dollars.

💥Challenge 2: Risk of Fraud for Consumers in E-Commerce

From the consumer's perspective, there is no guarantee that goods purchased through a Shopify store will be authentic and will actually arrive at the doorstep. If something goes wrong, the consumer has very little power of claiming fraud.

What it does

The NEAR Extension for Shopify provides an easy-to-use drag & drop solution for these two challenges. This is how it works:

⚡ NEAR Payments for Shopify Merchants

Through the NEAR extension for Shopify, merchants now have the ability to quickly configure a way to process payments through a NEAR wallet and settle transactions in NEAR tokens, which can be extended to any kind of cryptocurrency.

⚡ Proof of Purchase NFTs for Shopify Merchants

Inspired by the several challenges of fraud in e-commerce, the NEAR extension for Shopify also automatically mints and transfers one NFT for each item bought on Shopify. This ensures that there is an immutable digital signature of your purchase, and proof that the merchant is not a scammer.

How I built it

♻️ Shopify Checkout UI Extension: Shopify recently introduced a new way of injecting a custom React app into the Checkout Experience for all Shopify consumers. I developed a React app that a merchant can install with just one click to their Shopify store. Once installed, this extension will automatically create a UI through the checkout experiencing that will prompt the user to purchase the product through their NEAR wallet.

♻️ Shopify API: I utilized the Shopify API to fetch information about the Shopify user - such as Shipping Address - as well as to fetch the items in the cart. Once obtained, I passed this information to the frontend app.

♻️ Frontend Application: The frontend application acts as a bridge between Shopify and the NEAR ecosystem. It receives information about the user and items in the cart through the Shopify API. It also fetches the most recent NEAR <> USD conversion rate from Coingecko's API. Then, it prompts the user to complete the transaction. If the user is not signed in, it also prompts the user to sign in. Once the transaction is complete, the frontend makes calls to the NFT Smart Contract deployed on the NEAR blockchain (currently testnet) to mint Proof of Purchase NFTs for all items purchased.

♻️ Smart Contract: The NFT Smart Contract provides a Proof of Purchase to the consumer upon a successful payment transaction for all products purchased. This is accomplished by calling the Smart Contract's Mint function asynchronously for each item on the list and automatically minting the NFTs into the wallet of the Shopify consumer. The cost of the minting transaction is borne by the smart contract account.

Challenges we ran into

  • Permission challenges with requesting user information on Shopify
  • An hour before my submission deadline, the NEAR testnet stopped working. This meant that my project video was impossible to record at the time.
  • Working under a time constraint because I found out about the hackathon a couple of days before submissions were due
  • Finding help with questions specific to the NEAR protocol proved to be difficult. Thankfully, I got a chance to attend office hours
  • Deciding the dynamics of the smart contract through the minting process: where should the smart contract be deployed, where does the mint method need to be called, who will receive the NFT and who will bear the costs of the minting process

Accomplishments that I'm proud of

At a tech talk at TikTok, I was inspired by Illia's inspiration as the founder of the NEAR Ecosystem, and I took that inspiration to build this app. As a person who is focused on large-scale adoption at my tech job, I am proud of the implementation of the NEAR Extension for Shopify because it solves a problem that I have personally faced with e-commerce i.e. the risk of fraud and the lack of diversity in payment options. I am also very proud of the fact that I built two front-end applications and deployed a smart contract working individually. I am also very thankful to the NEAR team that helped me with my questions during office hours.

What I learned

  • How to write a smart contract in Javascript
  • How to interact with the NEAR blockchain through the Javascript SDK
  • How to mint NFTs on the fly to a wallet that is not the wallet responsible for the minting process
  • How to use the Shopify Checkout UI API and the Shopify API
  • How to deploy smart contracts to a NEAR account

What's next for the NEAR Extension for Shopify

  • With the help of the NEAR and Aurora teams, I want to continue developing and maintaining this project for any Shopify merchant that might be interested in using a decentralized crypto gateway for payments.
  • I want to improve the NFT Smart Contract to add a method to batch mint NFTs and make the transactions more optimized
  • Due to time constraints, I was unable to explore the ecosystem in Shopify in even more depth. I want to give merchants the ability to select their own wallet as the transaction wallet and customize the look and feel of the extension

Note: Password to access Shopify Store is near_hackathon

Built With

Share this project:

Updates