---
title: "Stripe決済サブスク | 星源 Web Studio"
description: "越境ビジネス向けに、Stripe Checkout、Webhook注文同期、管理画面、顧客セルフサービス、メール通知を備えた販売サイトを開発しました。"
url: "https://studio.i17i.com/ja/work/subscription-commerce"
---

越境ビジネス向けサービス・サブスクリプション

# サブスクリプション販売サイト（Stripe決済）

越境ビジネス事業者向けのサブスクリプション販売サイトを、企画・設計から実装・本番運用まで一人で担当しました。Stripe Checkoutによるオンライン決済、Webhookでの注文状態同期、管理画面、顧客向けセルフサービスページ、メール通知を実装しています。

[サイトを見る](https://tn.i17i.com/)

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

## スクリーンショット

tn.i17i.com

tn.i17i.com

tn.i17i.com

## 背景と課題

プラン選択からオンライン決済、開通案内までを自動化しつつ、運営側は管理画面で注文と顧客を管理できる仕組みが必要でした。決済状態はフロントの画面遷移に頼らず、Webhookで確実に同期することが求められました。

## ソリューション

Next.js App Router・Prisma・PostgreSQLで構築し、Stripe Checkoutのホスト型決済ページでカード情報を扱わない安全な決済を実現。Webhookの署名検証後に注文状態を更新してメール通知を送信し、管理画面で注文・交付・顧客を一元管理、顧客はセルフサービスページで自身の状況を確認できます。

## 成果物

- Stripe Checkout＋Webhookによるオンライン決済フローを完結

- 管理画面で注文・交付・顧客管理までカバー

- 顧客向けセルフサービスページで問い合わせ対応の負担を軽減

- Vitestによるテストと Docker Compose 環境で保守性を確保

## 主な機能

- プラン表示とStripe Checkoutによるオンライン決済

- Stripe Webhookでの注文状態の自動同期

- 管理画面（注文・交付・顧客管理）

- 顧客向けセルフサービスページ

- 各段階でのメール通知

- VitestテストとDocker Compose環境

## 技術スタック

- Next.js

- TypeScript

- Prisma

- PostgreSQL

- Tailwind CSS

- Docker

[お見積り依頼](https://studio.i17i.com/ja/contact)

## 関連サービス

[コーポレートサイト制作 会社案内・事業紹介・お問い合わせを備えた複数ページのサイト 150,000円〜。ページ数・多言語対応の有無によりお見積りします 詳しく見る](https://studio.i17i.com/ja/services/corporate-site)

## 関連する制作実績

[yaofengxny.com 成型炭製造・新エネルギー燃料 Yaofeng New Energy 成型炭メーカー海外向けサイト 成型炭メーカーの海外向けコーポレート・製品カタログサイトです。英語・中国語・アラビア語（RTL）・ロシア語の4言語に対応し、製品カタログ、OEM紹介ページ、問い合わせ導線までを設計から実装・公開まで一貫して担当しました。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/yaofeng-new-energy)
[juns.i17i.com 家具・建築金物製造 Junsheng Hardware 金物メーカーB2Bカタログサイト 家具・建築金物メーカーのB2B向け製品カタログサイトです。製品カタログ、カテゴリ別ページ、製品詳細、カタログ請求フォーム、問い合わせフォームを備え、MOQ（最小ロット）表示など、B2Bの商習慣に合わせて設計しました。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/junsheng-hardware)
[chromewebstore.google.com ブラウザ拡張 / 自社プロダクト Ladybird ノーコードWeb自動化Chrome拡張 自社開発しChrome Web Storeで公開中のブラウザ拡張機能。ノーコードで任意のWebページにボタン・リンク・ツールチップを追加でき、ビジュアルフローエディタで自動化操作を構築。認証情報はローカル暗号化保管庫に保存、UIは日/英/中の3言語対応で継続的にアップデート中。 - Chrome Extension - Manifest V3 - WXT - React 詳しく見る](https://studio.i17i.com/ja/work/ladybird-extension)

## 関連記事

- [ホームページ制作の流れを6ステップで解説｜発注前に知っておきたいポイントホームページ制作の流れを、ヒアリングから提案・見積り、デザイン確認、開発、検収・公開、保守まで6つのステップに分けて制作者の視点で解説します。各段階で発注者が確認すべきポイント、事前に用意しておくと進行がスムーズになる素材、制作期間の目安もあわせてご紹介します。詳しく見る](https://studio.i17i.com/ja/blog/homepage-seisaku-nagare)

- [ホームページを閉鎖する順番：サーバー・ドメインを解約する前にやること6ステップ閉店や活動終了でホームページ（WordPressサイト）を閉じるときに、サーバーやドメインを先に解約して困らないための順番をまとめました。ログイン情報の確認、保存版、写真の元ファイルの見分け方、解約で何が消えるかの一覧、よくある質問まで解説します。詳しく見る](https://studio.i17i.com/ja/blog/homepage-heisa-junban)

- [WordPressサイトを閉鎖前に保存する方法：HTTrackで崩れる理由とオフラインで見られる静的化閉鎖するWordPressサイトを、サーバーを止めたあとも見返せる形で残したい方へ。HTTrackなどの保存ソフト、ブラウザの保存機能、静的化プラグイン、バックアッププラグインの違いを比べ、画像が出ない・崩れる5つの原因と見分け方・対処、保存できたかを確かめる方法を解説します。詳しく見る](https://studio.i17i.com/ja/blog/wordpress-heisa-hozon)

## ホームページ制作のご相談はお気軽に

無料相談・お見積りは1営業日以内にご返信します。要件が固まっていない段階でも歓迎です

[無料相談](https://studio.i17i.com/ja/contact)
[実績を見る](https://studio.i17i.com/ja/work)