https://github.com/developer-dao/shopify-crypto-wallet
https://forum.developerdao.com/t/shopify-metamask-app-idea/636/8
https://github.com/developer-dao/shopify-crypto-wallet
Last synced: 10 months ago
JSON representation
https://forum.developerdao.com/t/shopify-metamask-app-idea/636/8
- Host: GitHub
- URL: https://github.com/developer-dao/shopify-crypto-wallet
- Owner: Developer-DAO
- License: mit
- Created: 2021-12-01T17:06:10.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-17T08:11:53.000Z (over 3 years ago)
- Last Synced: 2025-03-24T03:53:07.499Z (11 months ago)
- Language: JavaScript
- Size: 468 KB
- Stars: 32
- Watchers: 12
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Shopify MetaMask (or any crypto wallet?) Integration
[More details here](https://forum.developerdao.com/t/shopify-metamask-app-idea/636)
## 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](https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework#app-embed-blocks) that
- connects with [crypto wallet](https://twitter.com/developer_dao/status/1466080091327369225)
- 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](https://partners.shopify.com/signup).
- If you don’t have one, [create a Development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) where you can install and test your app.
- In the Partner dashboard, [create a new app](https://help.shopify.com/en/api/tools/partner-dashboard/your-apps#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](https://ngrok.com/signup).
## Development
- Clone the project and run `npm install`
- Create `.env` from `.env.example`
- Add `SHOPIFY_API_KEY=` from your Shopify App settings
- Add `SHOPIFY_API_SECRET=`
- Add `SHOP=.myshopify.com`
- `SCOPES` will be updated, for now just leave them as in the example
- Start NGROK and replace `HOST` with your `NGROK URL`
In your Shopify App settings:
- Set `App URL` to `NGROK URL`
- Set `Allowed redirection URL(s)` to `/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` under `Test 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 update `NGROK URL` in `Allowed redirection URL(s)`
## Theme App Extension
Example of a theme app extension: https://github.com/Shopify/theme-extension-getting-started
- `cd theme-app-extension` and `shopify extension register`, choose `THEME_APP_EXTENSION` type
- `npm run create-extension-js-bundle` to bundle the `crypto-wallet.js` file and put it into `theme-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