Capability Commerce · Stripe Learning Path

从 URL 能力发布，到可全球测试交易的商品

你的 Runtime： jayho80.homelinked.tech

鼓励：你们已经从“不理解 Runtime”，走到可以发布 URL、图片、视频和下载附件。这是很大的进步。

下一阶段，不是马上做复杂平台，而是让你的能力可以被封装成一个别人能理解、能打开、能测试支付、能留下 Evidence 的商品页面。

Capability
↓
Product Page
↓
Stripe Test Payment
↓
Success
↓
JSONL Evidence
↓
Capability Commerce

1. 三个阶段

Stage 1 — 体验 Stripe 测试支付

先体验一次 Stripe Checkout 测试支付。你不是在真实付款，这是 test mode。

Open Stripe Test Checkout / 打开 Stripe 测试支付

测试卡：

Card number: 4242 4242 4242 4242
Expiry date: any future date
CVC: any 3 digits
ZIP / Postal code: any acceptable value

注意：这是 Stripe test mode，不会真实扣款。不要使用真实银行卡。

Stage 2 — 用 Student Pay API 集成到自己的商品页

Your Product Page
↓
Student Pay API
↓
Stripe Checkout Session
↓
Stripe Test Payment
↓
Success Page
↓
JSONL Evidence

API Base:

https://pay.makehere.tech/api/student

Health:

GET https://pay.makehere.tech/api/student/health

Create Checkout:

POST https://pay.makehere.tech/api/student/create-checkout

Stage 3 — 以后创建自己的 Stripe Account

第三阶段不是今天完成。以后你会学习如何创建自己的 Stripe test account，并理解 Checkout Session、success_url、cancel_url、webhook 和 evidence。

打开 Stripe Account 创建指引 / Open Stripe Account Guide

2. 学生商品页最小代码

把下面代码放进你自己的商品页面，例如：

https://jayho80.homelinked.tech/products/my-first-paid-product/
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First Paid Product</title>
</head>
<body>
  <h1>My First Paid Product</h1>
  <p>This is my first product connected to Stripe Checkout.</p>

  <button onclick="pay()">Pay $5 Test</button>

  <pre id="result"></pre>

  <script>
  async function pay() {
    const res = await fetch("https://pay.makehere.tech/api/student/create-checkout", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({
        student_id: "jayho80",
        product_name: "My First Paid Product",
        amount_cents: 500,
        currency: "usd",
        project_url: window.location.href
      })
    });

    const data = await res.json();
    document.getElementById("result").textContent = JSON.stringify(data, null, 2);

    if (data.ok && data.checkout_url) {
      window.location.href = data.checkout_url;
    }
  }
  </script>
</body>
</html>

3. 提交要求

1. 自己的商品页面 URL
2. 商品页面截图
3. 点击 Pay $5 Test 后的 Stripe Checkout 截图
4. Payment Success 页面截图
5. 简短回答 5 个问题

4. 五个问题

1. 你的商品页面调用了哪个 API？
2. API 返回的 checkout_url 是什么作用？
3. Stripe Checkout 页面是在你的网站，还是 Stripe 的网站？
4. session_id 是什么？
5. 为什么支付成功后还要写入 JSONL Evidence？

5. 重要边界

Students use:
fetch("https://pay.makehere.tech/api/student/create-checkout")

Students do NOT use:
STRIPE_SECRET_KEY
sk_test
sk_live
.env
server SSH for payment backend

HSIMC Student Runtime · Stripe Learning Path · Published 2026-07-09 23:21 HKT

English Version

This Stripe Learning Path is also available in English.

Open English Version