ARKA：コンフィギュレーターと本物のチェックアウトを1ページに

ARKAは、削り出したウォルナットに50mmのソリッドスフィアを収めた受注生産のオブジェクトで、初回ロットは12点です。Urbano DXがプロダクトを設計し、ページを構築し、注文を運用しています。購入者の選択はその場で仕様と価格に反映され、小さなAPIが配送先の国を含む構成全体を再検証してから、はじめてStripeの決済ページを生成します。

ARKAを開く

1つのフォームと1つの主張で始まるプロダクトページ。画像にはレンダリングであることを明記

プロダクト概要

物理プロダクトを1ページで販売するサイトです。9つのフォーム、3種類のスフィア数、4通りのスフィア素材、任意の刻印を選べます。すべて受注生産で、初回ロットは12点、6週間以内に発送します。画像は写真ではなくレンダリングであり、その事実をすべての画像の横に明記しています。

横長の一枚ものから自立する彫刻まで9つのフォーム
銅・スチール・セラミック、または混成セットのスフィア
寸法、スフィア単体の質量、総質量をその場で表示
各画像は全画面で開き、レンダリングしたフレームで回転

構築したもの

プリレンダリングした静的ページの背後に、小さなFastAPIサービスを置いています。カタログは単一のデータソースで、質量は入力値ではなく素材の密度から計算し、サーバーは検証に必要な範囲だけをミラーします。両者がずれた瞬間にテストがビルドを落とします。予約時は構成をAPIに送り、フォーム・素材・刻印・配送先の国を再検証したうえでStripeのCheckout Sessionを構成情報付きで生成し、スタジオに通知メールを送ります。決済確定のWebhookは冪等なので、Stripeの再送で注文が二重になることはありません。

リロードなしで質量と価格を更新するコンフィギュレーター
決済前にすべての組み合わせをサーバー側で検証
構成をメタデータとして保持するStripe Checkout Session
冪等な決済Webhookとスタジオ向け通知メール
技術構成：Vite、React、TypeScript、FastAPI、Stripe、nginx

この事例が示すこと

決済リンクとECの違いがここにあります。決済リンクでは配送できない国を拒否できず、ページと決済の内容を一致させ続けることもできず、支払い前に購入者を把握することもできません。これらのルールをサーバーに移すのは1日の作業ですが、問い合わせの一群がまるごと消えます。同じ構造は、見積フロー、予約フロー、構成可能な製品にそのまま応用できます。

プロダクトのルールはボタンではなくサーバーに置く
カタログのずれは顧客からの指摘ではなくビルド失敗で気づく
JavaScriptを止めても読めて買えるページ
「選んでから支払う」あらゆるフローに使える型