Centralize sample storefront configuration

Author: kyle-schellen

.env.example

@@ -0,0 +1,32 @@
+# Checkout Kit sample storefront configuration.
+# Copy this file to .env, fill in local values, then run:
+# scripts/setup_storefront_env
+# Optional Apple Pay and Customer Account API values can stay blank.
+#
+# Do not commit real values from .env or generated platform config files.
+
+# Storefront details
+STOREFRONT_DOMAIN=your-store.myshopify.com
+STOREFRONT_ACCESS_TOKEN=your-public-storefront-access-token
+STOREFRONT_MERCHANT_IDENTIFIER=
+
+# Storefront API version
+API_VERSION=2025-07
+
+# Customer Account API (optional)
+CUSTOMER_ACCOUNT_API_CLIENT_ID=
+CUSTOMER_ACCOUNT_API_SHOP_ID=
+CUSTOMER_ACCOUNT_API_VERSION=unstable
+
+# Buyer identity defaults used by sample apps
+EMAIL=checkout-kit@example.com
+ADDRESS_1=650 King Street
+ADDRESS_2=Shopify HQ
+CITY=Toronto
+COMPANY=Shopify
+COUNTRY=CA
+FIRST_NAME=Evelyn
+LAST_NAME=Hartley
+PROVINCE=ON
+ZIP=M5V 1M7
+PHONE=+14165550100

.github/workflows/android-test.yml

@@ -47,8 +47,10 @@ jobs:
           cache: 'gradle'
 
       - name: Setup sample app environment
-        run: cp .env.example .env
-        working-directory: platforms/android/samples/MobileBuyIntegration
+        run: ${{ github.workspace }}/scripts/setup_storefront_env --skip-optional-prompts
+        env:
+          STOREFRONT_DOMAIN: example.myshopify.com
+          STOREFRONT_ACCESS_TOKEN: test-token
 
       - name: Build Sample App
         run: ./gradlew assembleDebug

.github/workflows/rn-test-android.yml

@@ -58,10 +58,12 @@ jobs:
         env:
           GRADLE_OPTS: -Xmx4g -XX:MaxMetaspaceSize=768m
           JAVA_HOME: ${{ steps.setup-java.outputs.path }}
+          STOREFRONT_DOMAIN: example.myshopify.com
+          STOREFRONT_ACCESS_TOKEN: test-token
         run: |
           echo "JAVA_HOME: $JAVA_HOME"
           java -version
           javac -version
-          echo "STOREFRONT_DOMAIN=myshopify.com" > sample/.env
+          ${{ github.workspace }}/scripts/setup_storefront_env --skip-optional-prompts
           pnpm module build
           pnpm sample test:android --no-daemon

.github/workflows/swift-build-samples.yml

@@ -13,3 +13,4 @@ jobs:
     with:
       test-path: ./Scripts/build_samples
       job-name: Build Sample Apps
+      setup-storefront-env: true

.github/workflows/swift-test-workflow.yml

@@ -8,6 +8,10 @@ on:
         required: false
         type: string
         default: Run
+      setup-storefront-env:
+        required: false
+        type: boolean
+        default: false
 
 permissions:
   contents: read
@@ -68,5 +72,12 @@ jobs:
           echo "CURRENT_SIMULATOR_UUID=$CURRENT_SIMULATOR_UUID" >> $GITHUB_ENV
           echo ""
 
+      - name: Setup sample app storefront configuration
+        if: ${{ inputs.setup-storefront-env }}
+        env:
+          STOREFRONT_DOMAIN: example.myshopify.com
+          STOREFRONT_ACCESS_TOKEN: test-token
+        run: ${{ github.workspace }}/scripts/setup_storefront_env --skip-optional-prompts
+
       - name: Run Tests
         run: ${{ inputs.test-path }}

platforms/android/samples/MobileBuyIntegration/.env.example

@@ -1,14 +1,15 @@
+# Platform-local example for the Android sample. Prefer the repo-root
+# .env.example for shared setup, then run scripts/setup_storefront_env.
 STOREFRONT_DOMAIN=<yourdomainhere.myshopify.com>
 STOREFRONT_ACCESS_TOKEN=<storefront access token>
 API_VERSION=2025-07
 
 CUSTOMER_ACCOUNT_API_CLIENT_ID=<configured customer account api client id>
-CUSTOMER_ACCOUNT_API_REDIRECT_URI=shop.<shop id>.app://callback
-
-CUSTOMER_ACCOUNT_API_GRAPHQL_BASE_URL=https://shopify.com/<shop id>/account/customer/api/<api version>/graphql
-CUSTOMER_ACCOUNT_API_AUTH_BASE_URL=https://shopify.com/authentication/<shop id>
+# Android derives Customer Account redirect and API URLs from the shop ID and version.
+CUSTOMER_ACCOUNT_API_SHOP_ID=<shop id>
+CUSTOMER_ACCOUNT_API_VERSION=unstable
 
 # Demo buyer identity used when the "Prefill checkout" toggle is enabled in Settings.
 # Phone must be in E.164 format (+1XXXXXXXXXX for Canada).
-PREFILL_EMAIL=test.buyer@example.com
-PREFILL_PHONE=+16135550123
+EMAIL=checkout-kit@example.com
+PHONE=+14165550100

platforms/android/samples/MobileBuyIntegration/app/build.gradle

@@ -20,21 +20,40 @@ def loadProperties() {
 
 def properties = loadProperties()
 
+def propertyOrDefault = { String key, String defaultValue ->
+    def value = properties.getProperty(key)
+    return value?.trim() ? value.trim() : defaultValue
+}
+
 // Storefront API
 def storefrontDomain = properties.getProperty("STOREFRONT_DOMAIN")
 def accessToken = properties.getProperty("STOREFRONT_ACCESS_TOKEN")
 def apiVersion = properties.getProperty("API_VERSION", "2025-07")
 
 // Customer Account API
 def customerAccountApiClientId = properties.getProperty("CUSTOMER_ACCOUNT_API_CLIENT_ID")
+def customerAccountApiShopId = properties.getProperty("CUSTOMER_ACCOUNT_API_SHOP_ID")
+def customerAccountApiVersion = propertyOrDefault("CUSTOMER_ACCOUNT_API_VERSION", "unstable")
 def customerAccountApiRedirectUri = properties.getProperty("CUSTOMER_ACCOUNT_API_REDIRECT_URI")
 
 def customerAccountApiGraphQLBaseUrl = properties.getProperty("CUSTOMER_ACCOUNT_API_GRAPHQL_BASE_URL")
 def customerAccountApiAuthBaseUrl = properties.getProperty("CUSTOMER_ACCOUNT_API_AUTH_BASE_URL")
 
+if (!customerAccountApiRedirectUri && customerAccountApiShopId) {
+    customerAccountApiRedirectUri = "shop.${customerAccountApiShopId}.app://callback"
+}
+
+if (!customerAccountApiGraphQLBaseUrl && customerAccountApiShopId) {
+    customerAccountApiGraphQLBaseUrl = "https://shopify.com/${customerAccountApiShopId}/account/customer/api/${customerAccountApiVersion}/graphql"
+}
+
+if (!customerAccountApiAuthBaseUrl && customerAccountApiShopId) {
+    customerAccountApiAuthBaseUrl = "https://shopify.com/authentication/${customerAccountApiShopId}"
+}
+
 // Demo buyer identity (prefill toggle in Settings)
-def prefillEmail = properties.getProperty("PREFILL_EMAIL", "test.buyer@example.com")
-def prefillPhone = properties.getProperty("PREFILL_PHONE", "+16135550123")
+def prefillEmail = properties.getProperty("EMAIL", properties.getProperty("PREFILL_EMAIL", "test.buyer@example.com"))
+def prefillPhone = properties.getProperty("PHONE", properties.getProperty("PREFILL_PHONE", "+14165550100"))
 
 if (!storefrontDomain || !accessToken) {
     println("**** Please add a .env file with STOREFRONT_DOMAIN and STOREFRONT_ACCESS_TOKEN set *****")

platforms/android/scripts/apollo_download_schema

@@ -3,44 +3,66 @@ set -euo pipefail
 
 cd samples/MobileBuyIntegration
 
-if [ ! -f ".env" ]; then
+ENV_FILE=".env"
+
+if [ ! -f "$ENV_FILE" ]; then
   echo "❌ .env file not found in samples/MobileBuyIntegration/"
-  echo "   Run 'cp .env.example .env' and fill in your credentials."
+  echo "   Run scripts/setup_storefront_env from the repo root."
   exit 1
 fi
 
-npx -y dotenv-cli -e .env -- sh -c '
-  DOMAIN="$STOREFRONT_DOMAIN"
-  TOKEN="$STOREFRONT_ACCESS_TOKEN"
-  VERSION="$API_VERSION"
-
-  if [ -z "$DOMAIN" ]; then
-    echo "❌ STOREFRONT_DOMAIN is not set. Check your .env file."
-    exit 1
-  fi
-  if [ -z "$TOKEN" ]; then
-    echo "❌ STOREFRONT_ACCESS_TOKEN is not set. Check your .env file."
-    exit 1
-  fi
-  if [ -z "$VERSION" ]; then
-    echo "❌ API_VERSION is not set. Check your .env file."
-    echo "   Add API_VERSION=2025-07 to your .env"
-    exit 1
-  fi
-
-  echo "📡 Downloading schema for MobileBuyIntegration..."
-  echo "   Domain: $DOMAIN"
-  echo "   API Version: $VERSION"
-
-  rover graph introspect \
-    "https://$DOMAIN/api/$VERSION/graphql" \
-    --header="X-Shopify-Storefront-Access-Token: $TOKEN" \
-    --output "app/src/main/graphql/schema.graphqls"
-
-  if [ $? -eq 0 ]; then
-    echo "✅ Schema downloaded to app/src/main/graphql/schema.graphqls"
-  else
-    echo "❌ Schema download failed. Check your network connection and credentials."
-    exit 1
-  fi
-'
+read_env_value() {
+  local key="$1"
+  awk -v key="$key" '
+    /^[[:space:]]*#/ || /^[[:space:]]*\/\// || /^[[:space:]]*$/ { next }
+    $0 !~ /=/ { next }
+    {
+      line = $0
+      sub(/^[[:space:]]*/, "", line)
+      candidate = line
+      sub(/=.*/, "", candidate)
+      sub(/[[:space:]]*$/, "", candidate)
+      if (candidate == key) {
+        value = substr(line, index(line, "=") + 1)
+        gsub(/^[[:space:]]+|[[:space:]]+$/, "", value)
+        if (value ~ /^".*"$/ || value ~ /^'\''.*'\''$/) {
+          value = substr(value, 2, length(value) - 2)
+        }
+        print value
+        exit
+      }
+    }
+  ' "$ENV_FILE"
+}
+
+DOMAIN="$(read_env_value STOREFRONT_DOMAIN)"
+TOKEN="$(read_env_value STOREFRONT_ACCESS_TOKEN)"
+VERSION="$(read_env_value API_VERSION)"
+
+if [ -z "$DOMAIN" ]; then
+  echo "❌ STOREFRONT_DOMAIN is not set. Check your .env file."
+  exit 1
+fi
+if [ -z "$TOKEN" ]; then
+  echo "❌ STOREFRONT_ACCESS_TOKEN is not set. Check your .env file."
+  exit 1
+fi
+if [ -z "$VERSION" ]; then
+  echo "❌ API_VERSION is not set. Check your .env file."
+  echo "   Add API_VERSION=2025-07 to your .env"
+  exit 1
+fi
+
+echo "📡 Downloading schema for MobileBuyIntegration..."
+echo "   Domain: $DOMAIN"
+echo "   API Version: $VERSION"
+
+if rover graph introspect \
+  "https://$DOMAIN/api/$VERSION/graphql" \
+  --header="X-Shopify-Storefront-Access-Token: $TOKEN" \
+  --output "app/src/main/graphql/schema.graphqls"; then
+  echo "✅ Schema downloaded to app/src/main/graphql/schema.graphqls"
+else
+  echo "❌ Schema download failed. Check your network connection and credentials."
+  exit 1
+fi

platforms/android/scripts/setup_env.sh

@@ -1,57 +1,7 @@
 #!/bin/bash
 
-# Function to create .env file for a sample app
-create_env_file() {
-	local app_name="$1"
-	local env_path="./samples/${app_name}/.env"
+set -e
 
-	if [ ! -f "$env_path" ]; then
-		echo "Creating ${app_name} .env file..."
-		cat >"$env_path" <<EOF
-STOREFRONT_DOMAIN=${STOREFRONT_DOMAIN}
-STOREFRONT_ACCESS_TOKEN=${STOREFRONT_ACCESS_TOKEN}
-EOF
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
-		# Add optional authentication configuration if provided
-		if [ -n "$SHOP_ID" ] && [ -n "$CUSTOMER_ACCOUNT_API_CLIENT_ID" ]; then
-			cat >>"$env_path" <<EOF
-
-CUSTOMER_ACCOUNT_API_CLIENT_ID=${CUSTOMER_ACCOUNT_API_CLIENT_ID}
-CUSTOMER_ACCOUNT_API_REDIRECT_URI=shop.${SHOP_ID}.app://callback
-
-CUSTOMER_ACCOUNT_API_GRAPHQL_BASE_URL=https://shopify.com/${SHOP_ID}/account/customer/api/${CUSTOMER_ACCOUNT_API_VERSION}/graphql
-CUSTOMER_ACCOUNT_API_AUTH_BASE_URL=https://shopify.com/authentication/${SHOP_ID}
-EOF
-		fi
-		echo "✓ Created ${app_name} .env file"
-	fi
-}
-
-# Prompt for Shopify credentials
-echo "Setting up .env files for sample apps..."
-echo "Please provide your Shopify storefront credentials:"
-read -p "Storefront Domain (e.g., yourstore.myshopify.com): " STOREFRONT_DOMAIN
-read -p "Storefront Access Token: " STOREFRONT_ACCESS_TOKEN
-
-if [ -z "$STOREFRONT_DOMAIN" ] || [ -z "$STOREFRONT_ACCESS_TOKEN" ]; then
-	echo "Error: Both storefront domain and access token are required."
-	exit 1
-fi
-
-# Optional authentication configuration
-echo ""
-echo "Optional: Customer Account API configuration (needed for authentication features)"
-echo "Press Enter to skip if you don't need authentication features."
-read -p "Shop ID (optional): " SHOP_ID
-read -p "Customer Account API Client ID (optional): " CUSTOMER_ACCOUNT_API_CLIENT_ID
-read -p "Customer Account API Version (default: unstable): " CUSTOMER_ACCOUNT_API_VERSION
-
-# Set default API version if not provided
-if [ -z "$CUSTOMER_ACCOUNT_API_VERSION" ]; then
-	CUSTOMER_ACCOUNT_API_VERSION="unstable"
-fi
-
-# Create .env files for both sample apps
-create_env_file "MobileBuyIntegration"
-
-echo "✓ Sample app .env files are ready!"
+exec "$SCRIPT_DIR/../../../scripts/setup_storefront_env" "$@"

platforms/react-native/README.md

@@ -212,11 +212,11 @@ Here's an example of how to get started with Apollo:
 
 ```tsx
 import {ApolloClient, gql, ApolloProvider} from '@apollo/client';
-import {STOREFRONT_NAME, STOREFRONT_ACCESS_TOKEN} from '@env';
+import {API_VERSION, STOREFRONT_DOMAIN, STOREFRONT_ACCESS_TOKEN} from '@env';
 
 // Create a new instance of the ApolloClient
 const client = new ApolloClient({
-  uri: `https://${STOREFRONT_NAME}.myshopify.com/api/2025-07/graphql.json`,
+  uri: `https://${STOREFRONT_DOMAIN}/api/${API_VERSION}/graphql.json`,
   headers: {
     'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
   },