ヘッドレス側の実装と請求書払い

はじめに

Shopify側でタグ・セグメント・クーポンを用意したら、次はウェブサイト(ヘッドレス)側の番です。ここでの仕事は、ログインしたユーザーが誰なのかをタグで見分け、会員価格を表示し、決済のときに割引を確実に引き渡すこと。この記事では、コードの中身には踏み込まず、どんな部品がどの順番で動いているのかという流れを解説します。

やることは大きく5つです。ログイン時のタグ取得、タグからの割引率算出、会員価格の表示、決済時のクーポン自動適用、そして請求書払いへの対応。順番に見ていきます。

ログインしたユーザーのタグを読み取る

Storefront APIでタグを取得する

ユーザーがログインしたら、Storefront API(ウェブサイトからShopifyのデータを読み取るための窓口)に問い合わせて、そのユーザーに付いているタグの一覧を受け取ります。たとえば standard-35 と premium-25 の2つが返ってきたら、「この人は標準カテゴリ35%OFF、プレミアムカテゴリ25%OFFの取引先だ」と分かる仕組みです。

タグはShopify管理画面で付けたものがそのまま返ってくるので、ウェブサイト側に取引先ごとの設定を持つ必要はありません。判断材料はすべてタグの中にある、という状態です。

タグ名から割引率を読み取る

受け取ったタグは「カテゴリ名-数字」という決まった形式なので、末尾の数字を割引率として読み取ります。standard-35 なら35%OFF。この「タグ名の形式ルール」さえ守られていれば、新しいタグが増えてもウェブサイト側は変更なしで対応できます。

ウェブサイト側で持っておくのは、「standardタグは標準カテゴリのコレクションに対応する」といったカテゴリとコレクションの対応関係だけ。この対応表に1行足せば新カテゴリを追加できる作りにしてあります。このあたりの組み立ては、設計方針を言葉で固めたうえでAIエージェント(AIによる開発支援)に指示しながら進めました。

会員価格を計算して表示する

計算の考え方

商品ページやカートでは、「この商品は割引対象のコレクションに入っているか」「ユーザーは対応するタグを持っているか」の2つを確認し、両方当てはまれば通常価格から割引率ぶんを引いた会員価格を表示します。どちらかが当てはまらなければ通常価格のまま。判定はこれだけです。

カート画面での見え方

カートでは、通常価格と会員価格を並べて表示し、いくら安くなっているのかが一目で分かるようにしました。

カテゴリの違う商品が混在していても、それぞれに正しい割引率が適用されているのが分かります。割引額を明示しておくと、取引先にとっても「契約どおりの条件で買えている」という確認になるんですよね。

決済時にクーポンを自動適用する

タグ名をそのままクーポン名として使う

「購入手続きへ」ボタンが押されたら、ウェブサイトはユーザーのタグとカートの中身を照合し、適用すべきクーポンを特定してカートに付けてから、Shopifyの決済画面へ引き渡します。

ボタンを押した裏側で「タグ名と同じ名前のクーポンを探して付ける」という橋渡しが行われている、という図です。

画面の表示と決済の金額を一致させる

ウェブサイト側で会員価格を表示するだけでは、決済に進んだ瞬間に通常価格へ戻ってしまいます。画面の見せ方とShopify側の割引が同じルールで動いてはじめて、表示どおりの金額で支払いが完了します。タグ名＝クーポン名という設計は、この「表示と決済の一致」を名前の対応だけで保証するための工夫でもあります。ユーザーから見れば、コードを知る必要も入力する必要もなく、ログインしているだけで割引が付いてくる体験です。

請求書払い(掛け売り)に対応する

ドラフトオーダーで注文を受け付ける

B2Bでは、クレジットカードではなく請求書払いを求められることが多くあります。そこで決済画面へ進む通常の流れとは別に、「請求書払いで注文」という選択肢を用意しました。

こちらが選ばれた場合は、Admin API(Shopifyの裏側を操作するための窓口)を使って、ドラフトオーダー(下書き注文)を作成します。ドラフトオーダーには会員価格適用後の商品情報、割引率と割引額、ユーザー情報が記録されるので、注文内容の控えとしてそのまま使えます。

注文後は担当者へ自動通知

ドラフトオーダーが作られると同時に、販売担当へメールで通知が飛びます。担当者は内容を確認し、問題なければ請求書を発行する、という流れです。注文の受付そのものは自動で、金額の確定と請求だけを人が確認する。全自動にしないことで、掛け売り特有の与信の判断を人の手に残しています。

複数ルールの優先順位とまとめ

同じ商品に複数の割引ルールが当てはまる場合に備えて、ルールには優先順位を持たせてあります。優先度の高いルールが先に当てはまったら、それを適用して終わり。「VIP向け割引があれば標準割引より優先する」といった制御が、順番の設定だけでできます。

最後に、ウェブサイト側の役割を整理します。

新しい取引先やカテゴリの追加はShopify設定だけで完結し、ユーザーはログインするだけで会員価格が適用される。Shopify Plusを契約せずに、標準プランのままここまでのB2B対応ができる設計です。