RCJ Stack — User Manual

An all-in-one "build site + collect payment + customer support + analytics" system on Cloudflare Pages, ready to use out of the box.

0. What is this

RCJ Stack is an integrated system based on Cloudflare Pages for "site building + payment + customer support + data analytics", ready to use out of the box:

• Sell: PayPal-hosted checkout, supports deposit / full payment, auto-archiving.
• Support: bottom-right chat widget, visitor messages pushed to Telegram in real time + backend tickets.
• Analyze: D1 stores orders & support data; the /admin dashboard shows revenue, trends, conversations.
• Admin: order management, analytics, support replies, lead follow-up — one password to log in.

The whole stack runs on Cloudflare — no ICP filing, global CDN, generous free quota, no server of your own needed.

1. Deploy

Method A: Direct Upload (recommended, simplest)

Prerequisites: Node.js and wrangler installed.

npm i -g wrangler          # or: npx wrangler
wrangler login             # first time: bind your Cloudflare account (browser auth)
cd project-dir
wrangler pages deploy . --project-name <your-project>

Note: wrangler.toml sets pages_build_output_dir = "." — no build step, just upload static files + Functions.

Method B: Git auto-deploy

Cloudflare Console → Workers & Pages → Create → Connect Git repo → pick repo & branch → Save. Every git push then deploys automatically.

Multi-account tip: to deploy to a non-default Cloudflare account, override with env vars: CLOUDFLARE_API_TOKEN=<token> CLOUDFLARE_ACCOUNT_ID=<id> wrangler pages deploy . --project-name <name>

2. Bind a D1 database (data storage)

1. Create the database:

   wrangler d1 create <db-name>
   # get database_id from the output

2. Write it into wrangler.toml:

   [[d1_databases]]
   binding = "DB"
   database_name = "<db-name>"
   database_id = "<database_id>"

3. Table schemas (orders / support_threads / support_messages) are created automatically on first run — no manual table creation needed.

3. Configure products & pricing

Edit ITEMS at the top of functions/api/paypal/_lib.js:

export const ITEMS = {
  'consulting': {
    name: 'Consulting', price: 39,
    desc: 'A 1:1 consulting session.',
    i18n: { zh: { name: '咨询服务', desc: '一对一咨询。' },
            ja: { name: 'コンサルティング', desc: '1:1 コンサル。' } },
  },
  // ...
};

Field	Meaning
price	List price (your settlement currency, USD by default)
deposit	Deposit charged online now; omit to auto-calc by DEPOSIT_RATE
balance	Balance charged on delivery (auto = price − deposit)
i18n	Chinese / Japanese display names & descriptions

Other tunable constants (same file):

• DEPOSIT_RATE = 0.10: default deposit ratio.
• CNY_PER_USD = 7.2: reference exchange rate used to show ¥ on the frontend.
• BRAND = 'RCJ Stack': brand name shown in orders / notifications.

After editing, re-run wrangler pages deploy . — the storefront and admin read the new list live.

4. Configure secrets

Set via Cloudflare Console (Settings → Environment variables) or command line:

wrangler pages secret put PAYPAL_CLIENT_ID
wrangler pages secret put PAYPAL_CLIENT_SECRET
wrangler pages secret put PAYPAL_MODE        # sandbox or live
wrangler pages secret put TG_BOT_TOKEN        # optional: Telegram notifications
wrangler pages secret put TG_CHAT_ID
wrangler pages secret put ADMIN_PASSWORD      # /admin login password (required)

Variable	Required	Description
PAYPAL_CLIENT_ID	Yes	PayPal app Client ID
PAYPAL_CLIENT_SECRET	Yes	PayPal app Secret
PAYPAL_SANDBOX_CLIENT_ID	No	Sandbox-only ID (falls back to above if blank)
PAYPAL_SANDBOX_CLIENT_SECRET	No	Sandbox-only Secret
PAYPAL_MODE	Yes	sandbox (test) / live (production)
PAYPAL_CURRENCY	No	Force settlement currency, e.g. CNY
PAYPAL_CNY_ENABLED	No	true to enable RMB (requires PayPal account supporting RMB)
TG_BOT_TOKEN	No	Telegram Bot Token — new orders / new messages push in real time
TG_CHAT_ID	No	Telegram chat ID to receive notifications
ADMIN_PASSWORD	Yes	Admin dashboard login password
ADMIN_KEY	No	Backup API Key
RESEND_API_KEY	No	Email notifications (Resend)
NOTIFY_EMAIL	No	Email to receive notifications
EMAIL_FROM	No	From address

To switch test / production, only change the PAYPAL_MODE variable.

5. PayPal payment config

• Sandbox test: PAYPAL_MODE=sandbox, order with PayPal Developer sandbox accounts (virtual buyers) — no real charge.
• Production: PAYPAL_MODE=live, fill in live Client ID / Secret.
• RMB settlement: if your PayPal account supports RMB, set PAYPAL_CNY_ENABLED=true (settles in CNY); otherwise USD, and ¥ on the frontend is reference only.
• Deposit flow: order first deducts deposit online, balance collected offline via WeChat / Alipay on delivery (system only handles online deposit / full payment).

6. Telegram support notifications

1. Find @BotFather to create a Bot, get the Token → fill TG_BOT_TOKEN.
2. Send a message to @userinfobot, get your chat_id → fill TG_CHAT_ID.
3. After setup: every new order, every new support message is pushed to your Telegram in real time.

Important: use your own Bot, don't mix with the demo Bot; before going live be sure to swap in your own credentials.

7. Admin dashboard /admin

• Visit <your-domain>/admin, enter ADMIN_PASSWORD to log in.
• Modules:
  • Orders: all orders, status (paid / deposit / pending / lead), deposit / balance.
  • Analytics: revenue, order count, 14-day trend, support overview (see §8).
  • Support: view conversations, reply to visitors as "support".
  • Leads: lead list, can mark "contacted / rejected".
• Logout: the dashboard has a logout button that clears the login state.

8. Analytics metrics explained

The dashboard (endpoint /api/analytics/data) aggregates from D1:

Metric	Meaning
Revenue	sum of cny_amount for orders with status = paid or deposit
Orders	all orders (incl. leads, pending)
Pending	count of orders with status=pending
Leads	count of rows with source='lead'
Open / Closed sessions	open / closed count of support conversations
14-day trend	orders & revenue per day, to see the growth curve

Traffic analytics (PV / UV) is tracked separately by Cloudflare Web Analytics, not in D1.

9. Support system

• The bottom-right chat widget (widget.js): visitors send messages directly → stored in D1 + pushed to Telegram.
• You reply in the /admin support panel; replies are written to the same conversation as the "support" role; visitors see them on refresh (polling, no WebSocket needed).
• Session status: new messages auto-mark open; you can manually close after replying.

10. Email notifications (optional)

After setting RESEND_API_KEY + NOTIFY_EMAIL, new orders / leads also send email.

Note: Resend's free quota is limited and easy to land in spam — important notifications should rely on Telegram.

11. FAQ

• /admin says Unauthorized? → ADMIN_PASSWORD not set, or wrong password.
• Order errors NO_CRED? → PayPal secrets not set, or PAYPAL_MODE doesn't match the credential environment (sandbox / live mixed up).
• No Telegram notifications? → Bot Token / Chat ID wrong, or Bot banned; use @userinfobot to confirm chat_id first.
• Where is the data? → All in the bound D1: Cloudflare Console → D1 → pick the database to inspect.
• Want to reset demo data?

  wrangler d1 execute <db-name> --remote \
    --command "DELETE FROM orders; DELETE FROM support_threads; DELETE FROM support_messages;"

  Then re-seed sample or real data.

12. Upgrade & maintenance

• Change products / prices: only edit ITEMS in _lib.js, re-run wrangler pages deploy ..
• Code update: git pull latest then redeploy.
• Data backup: D1 has automatic backups; important data can be periodically wrangler d1 export to disk.

Demo instance and real customers must each use a separate D1 + separate secrets, to avoid data cross-talk.