---
title: "Subscription Commerce with Stripe | 星源 Web Studio"
description: "A cross-border subscription site with Stripe Checkout, webhook order sync, admin operations, customer self-service and transactional email notifications."
url: "https://studio.i17i.com/en/work/subscription-commerce"
---

Cross-border business services / subscription commerce

# Subscription Commerce Site with Stripe Payments

A subscription sales site for cross-border business users, delivered solo from planning and design through implementation and production operations: Stripe Checkout payments, webhook-driven order sync, an admin panel, a customer self-service page and email notifications throughout.

[Visit website](https://tn.i17i.com/)

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

## Screenshots

tn.i17i.com

tn.i17i.com

tn.i17i.com

## Background & challenge

The full purchase flow — plan selection, online payment, activation and notifications — had to run automatically, while the operator needed an admin panel for orders and customers. Payment status had to be synchronized reliably through webhooks, never trusting front-end redirects alone.

## Solution

Built on Next.js App Router, Prisma and PostgreSQL: Stripe Checkout hosts the payment page so no card data touches the app, signature-verified webhooks update order status and trigger email notifications, the admin panel covers orders, fulfillment and customers, and a self-service page lets customers check their own subscription status.

## Outcomes

- Complete online payment loop with Stripe Checkout and webhooks

- Admin panel covering orders, fulfillment and customer management

- Customer self-service page reduces manual support workload

- Vitest test suite and Docker Compose environment for maintainability

## Key features

- Plan display with Stripe Checkout payments

- Automatic order status sync via Stripe webhooks

- Admin panel for orders, fulfillment and customers

- Customer self-service page

- Email notifications at every stage

- Vitest tests and Docker Compose environment

## Tech stack

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

[Get a Quote](https://studio.i17i.com/en/contact)

## Related service

[Corporate Website A multi-page company website with products, news and contact From $1,000, depending on page count and language needs Learn More](https://studio.i17i.com/en/services/corporate-site)

## Related work

[yaofengxny.com Machine-made charcoal manufacturing / new energy fuel Yaofeng New Energy — Charcoal Manufacturer Trade Site An international corporate and catalog website for a machine-made charcoal manufacturer, serving buyers in English, Chinese, Arabic (RTL) and Russian, with a filterable product catalog, an OEM page and a complete inquiry flow. - Next.js - TypeScript - Prisma - PostgreSQL Learn More](https://studio.i17i.com/en/work/yaofeng-new-energy)
[juns.i17i.com Furniture and architectural hardware manufacturing Junsheng Hardware — B2B Furniture Hardware Catalog A B2B product catalog website for a furniture and architectural hardware manufacturer: catalog, category pages, product details with MOQ, a catalog request form and an inquiry form, with multilingual switching. - Next.js - TypeScript - Prisma - PostgreSQL Learn More](https://studio.i17i.com/en/work/junsheng-hardware)
[chromewebstore.google.com Browser Extension / Own Product Ladybird No-code Web Automation Chrome Extension A self-developed browser extension published on the Chrome Web Store: add no-code buttons, links and tooltips to any webpage, build automation with a visual flow editor, and keep credentials in a locally encrypted vault. Trilingual UI (English/Japanese/Chinese), under active iteration. - Chrome Extension - Manifest V3 - WXT - React Learn More](https://studio.i17i.com/en/work/ladybird-extension)

## Related articles

- [What Is PHP2Shell? A Practical Guide to Checking and Fixing PHP WebsitesUnderstand PHP2Shell, CVE-2026-109618 and CVE-2026-109619. Check the PHP runtime behind your website, install security updates, restart workers and verify the fix.Learn More](https://studio.i17i.com/en/blog/php2shell-security-fix)

- [Multilingual Website SEO: A Practical Guide to hreflang, URLs and RTLHow to get multilingual website SEO right: URL structure, hreflang without the classic errors, Arabic RTL layout, translation quality and a checklist.Learn More](https://studio.i17i.com/en/blog/multilingual-website-seo)

- [B2B Manufacturer Website Guide: What Actually Generates InquiriesA practical guide to B2B manufacturer websites that generate inquiries: the pages buyers expect, catalog and spec design, inquiry flow, and budgets.Learn More](https://studio.i17i.com/en/blog/b2b-website-for-manufacturers)

## Ready to build a website that wins overseas buyers?

Free consultation with a reply within one business day, including practical advice for your industry

[Free Consultation](https://studio.i17i.com/en/contact)
[View Portfolio](https://studio.i17i.com/en/work)