Using Mkcert for local wallets testing in demo app (#525)

Author: nicfix

examples/webbilling-demo/README.md

@@ -47,3 +47,32 @@ With a UI
 ```bash
 npm run test:e2e-ui
 ```
+
+### Testing Apple Pay and Google Pay with local certs
+
+To test Apple Pay and Google Pay we have to fake an https setup for the Apple Pay/Google Pay authorized domains locally.
+The following instructions allow you to do it just using this repo but require you to play with your `/etc/hosts` and won't work on windows.
+
+> [!WARNING]  
+> This setup will install local certificates for somedomain.com in your machine using the vite-plugin-mkcert, therefore, you need to run this
+> command as superuser. Make sure to pick a domain (or add one) that you don't want to mess up on your machine or you'll
+> have to fix your certificates manually.
+
+Check the enabled domains in the Stripe config for the Apple Pay/Google Pay Payment method.
+Say the domain `somedomain.com` exists in that list.
+
+Add this line to your `/etc/hosts` file.
+
+```
+127.0.0.1 somedomain.com
+```
+
+This will resolve `somedomain.com` to localhost.
+
+Now you can run the webserver forcing the usage of that domain and the 443 port (for full https support).
+
+```
+sudo npm run dev-fake-https -- --host somedomain.com --port 443
+```
+
+Now you should be able to run safari with Apple Pay just by visiting `somedomain.com`.

examples/webbilling-demo/package-lock.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-fake-https": "vite ",
     "build": "tsc && vite build",
     "lint": "eslint \"**/*.{ts,tsx}\" --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -42,14 +43,15 @@
     "eslint-plugin-n": "^17.15.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-storybook": "^0.11.1",
-    "eslint-plugin-svelte": "^2.46.1",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.13.0",
     "prettier": "^3.4.2",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
     "typescript-eslint": "^8.18.0",
-    "globals": "^15.13.0"
+    "vite": "^6.0.3",
+    "vite-plugin-mkcert": "^1.17.8"
   }
 }

examples/webbilling-demo/package.json

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import mkcert from "vite-plugin-mkcert";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), mkcert()],
+  server: {
+    port: 443,
+  },
+});