shopify-crypto-wallet
shopify-crypto-wallet copied to clipboard
https://forum.developerdao.com/t/shopify-metamask-app-idea/636/8
Shopify MetaMask (or any crypto wallet?) Integration
Project will consist of 3 parts:
- NextJS frontend:
- An admin dashboard where shop owner configures which contract holder is eligible for discounts/custom merch
- NextJS backend:
- Server that stores the data
- Dynamically create promo codes for discounts using Shopify API (?) - need to do some research on that
-
A widget that
- connects with crypto wallet
- talks to server to verify if user is eligible for discounts/custom merch
- fetches promo code from server and applies it to the user's cart
Requirements
- If you don’t have one, create a Shopify partner account.
- If you don’t have one, create a Development store where you can install and test your app.
- In the Partner dashboard, create a new app. You’ll need this app’s API credentials during the setup process.
- Download
NGROK
- is a free service that makes it easy to host your app in development. Sign up for NGROK.
Development
- Clone the project and run
npm install
- Create
.env
from.env.example
- Add
SHOPIFY_API_KEY=<your API key>
from your Shopify App settings - Add
SHOPIFY_API_SECRET=<your API secret>
- Add
SHOP=<your shop>.myshopify.com
-
SCOPES
will be updated, for now just leave them as in the example - Start NGROK and replace
HOST
with yourNGROK URL
In your Shopify App settings:
- Set
App URL
toNGROK URL
- Set
Allowed redirection URL(s)
to<NGROK URL>/auth/callback
, for example: https://1231231.ngrok.io/auth/callback*
You will need to update it every time you change
NGROK URL
-
npm run dev
- Click
Select store
underTest your app
in Shopify App settings - This should prompt you to install the app in your development store and open it in an admin dashboard. Common error is
The redirect URI is not whitelisted
, in that case you need to updateNGROK URL
inAllowed redirection URL(s)
Theme App Extension
Example of a theme app extension: https://github.com/Shopify/theme-extension-getting-started
-
cd theme-app-extension
andshopify extension register
, chooseTHEME_APP_EXTENSION
type -
npm run create-extension-js-bundle
to bundle thecrypto-wallet.js
file and put it intotheme-app-extension/assets
folder -
shopify extension push
and follow the instructions to install extension on the shopify theme or look at the Demo: https://www.loom.com/share/9c21c12fc567417e9f3e6e910b65f874 - My demo shopify page: https://sergey-metamask-test.myshopify.com, store password:
rubado
WIP: https://www.loom.com/share/9cb9caccd1494387937ae0ce6b614d66