README update and dev payment link

QUICKSTART.md

@@ -88,13 +88,11 @@ To build the entire repository and run the application, follow these steps:
 
     - Visit SMTP UI at http://localhost:5001/
     - Validate email
-    - Go back to Host and login
+    - Go back to Host http://localhost:4201/ and login
 
-12. Validate email for login
+12. Perform "Setup up Secure Payment Method" flow
 
-    - Visit SMTP UI at http://localhost:5001/
-    - Validate email
-    - Go back to Host http://localhost:4201/ and login
+    - More detailed steps can be found in our [README](README.md) Payment Setup section
 
 13. Run ai bot (Optional):
 

README.md

@@ -10,6 +10,7 @@ For a quickstart, see [here](./QUICKSTART.md)
 - this project uses [volta](https://volta.sh/) for Javascript toolchain version management. Make sure you have the latest verison of volta on your system and have define [the ENV var described here](https://docs.volta.sh/advanced/pnpm).
 - this project uses [pnpm](https://pnpm.io/) for package management. run `pnpm install` to install the project dependencies first.
 - this project uses [docker](https://docker.com). Make sure to install docker on your system.
+- this project uses [stripe-cli](https://stripe.com/docs/stripe-cli) to test payment flows. Make sure to install stripe-cli on your system.
 - Ensure that node_modules/.bin is in your path. e.g. include `export PATH="./node_modules/.bin:$PATH"` in your .zshrc
 
 ## Orientation
@@ -229,6 +230,41 @@ In order to run the boxel-motion demo app:
 2. `pnpm start`
 3. Visit http://localhost:4200 in your browser
 
+## Payment Setup
+
+There is some pre-setup needed to enable free plan on development account:
+
+1. Use stripe cli to listen the webhook
+
+```
+stripe listen --forward-to localhost:4201/_stripe-webhook --api-key sk_test_api_key_from_the_sandbox_account
+```
+
+2. You will get webhook signing secret from stripe cli after Step 1 is done
+
+```
+> Ready! You are using Stripe API Version [x]. Your webhook signing secret is whsec_xxxxx
+```
+
+3. Set STRIPE_WEBHOOK_SECRET environment value in `packages/billing/stripe-webhook-handlers/index.ts` file
+
+```
+process.env.STRIPE_WEBHOOK_SECRET =
+  'whsec_xxxxx';
+```
+
+4. Set Free plan `stripe_plan_id` in database manually
+
+```
+psql -h localhost -p 5435 -U postgres
+\c boxel
+UPDATE plans SET stripe_plan_id = 'prod_{id_from_stripe_product}' WHERE name='Free';
+```
+
+5. Perform "Setup up Secure Payment Method" flow. Subscribe with valid test card [here](https://docs.stripe.com/testing#cards)
+
+You should able to subscribed successfully after you perform the steps above.
+
 ## Running the Tests
 
 There are currently 5 test suites:

packages/host/app/components/matrix/payment-setup.gts

@@ -1,12 +1,12 @@
-import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 import InfoCircleIcon from '@cardstack/boxel-icons/info-circle';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 
 import {
   BoxelButton,

packages/host/config/environment.js

@@ -41,7 +41,8 @@ module.exports = function (environment) {
     minSaveTaskDurationMs: 1000,
     iconsURL: process.env.ICONS_URL || 'https://boxel-icons.boxel.ai',
     stripePaymentLink:
-      process.env.STRIPE_PAYMENT_LINK || 'https://stripe.example.com/payment',
+      process.env.STRIPE_PAYMENT_LINK ||
+      'https://buy.stripe.com/test_4gw01WfWb2c1dBm7sv',
 
     // the fields below may be rewritten by the realm server
     hostsOwnAssets: true,