Shopify Crypto Wallet Integration

Project Components

NextJS Frontend:
- Admin dashboard for shop owner to configure eligible contract holders for discounts/custom merch.
NextJS Backend:
- Server to store data.
- Dynamically create promo codes for discounts using Shopify API (research needed).
Widget:
- Connects with crypto wallet.
- Verifies user eligibility for discounts/custom merch.
- Fetches and applies promo code to user's cart.

Requirements

Create a Shopify partner account if you don’t have one.
Create a Development store for app installation and testing.
In the Partner dashboard, create a new app and obtain API credentials.
Sign up for NGROK to host your app in development.

Development Steps

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.
Leave SCOPES as in the example for now.
Start NGROK and replace HOST with your NGROK URL.

Shopify App Settings

Set App URL to NGROK URL.
Set Allowed redirection URL(s) to <NGROK URL>/auth/callback (e.g., https://1231231.ngrok.io/auth/callback).

Update NGROK URL every time it changes.

Run npm run dev.
Click Select store under Test your app in Shopify App settings.
Install the app in your development store and open it in the admin dashboard.

Common error: The redirect URI is not whitelisted. Update NGROK URL in Allowed redirection URL(s).

Theme App Extension

Example: Theme App Extension

Navigate to theme-app-extension and run shopify extension register, choose THEME_APP_EXTENSION type.
Run npm run create-extension-js-bundle to bundle crypto-wallet.js and place it in theme-app-extension/assets.
Run shopify extension push and follow instructions to install the extension on the Shopify theme.

Demo: Loom Video

WIP: [Loom Video](https://www.loom.com/share/9cb9caccd1494387937ae