Capability Commerce · Stripe Learning Path

From URL Publishing to a Globally Test-Payable Product

Your Runtime: kelvin90.homelinked.tech

Encouragement: You have moved from not understanding Runtime to publishing URLs with images, videos and downloadable files. This is real progress.

The next stage is not to build a complex platform immediately. The next stage is to package your capability into a product page that people can understand, open, test-pay, and preserve as Evidence.

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

1. Three Learning Stages

Stage 1 — Experience Stripe Test Payment

First, experience Stripe Checkout test payment. This is not a real payment. It is Stripe test mode.

Open Stripe Test Checkout

Use Stripe test card:

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

Important: This is test mode. It will not charge real money. Do not use a real bank card.

Stage 2 — Integrate Student Pay API into Your Product Page

You will add a payment button to your own product page. You are not only clicking a demo link.

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 — Later Create Your Own Stripe Account

This is not required today. Later you will learn how to create your own Stripe test account and understand Checkout Session, success_url, cancel_url, webhook and evidence.

Open Stripe Account Guide

2. Minimum Product Page Code

Put the following code into your own product page, for example:

https://kelvin90.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: "kelvin90",
        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. What You Need to Modify

student_id
product_name
amount_cents
currency
project_url

For the first lesson, use:

amount_cents: 500
currency: usd

4. Submission Requirements

1. Your product page URL
2. Screenshot of your product page
3. Screenshot of Stripe Checkout after clicking Pay $5 Test
4. Screenshot of the Payment Success page
5. Short answers to 5 questions

5. Five Questions

1. Which API did your product page call?
2. What is checkout_url used for?
3. Is the Stripe Checkout page hosted by your website or by Stripe?
4. What is session_id?
5. Why should payment success be recorded as JSONL Evidence?

6. Important Boundary

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

中文版

这份 Stripe Learning Path 也有中文版。

打开中文版

HSIMC Student Runtime · Stripe Learning Path · English version · Published 2026-07-09 23:30 HKT