商品ブロック

今すぐ購入ボタン付きの商品カードです。チェックアウトフィールドで、タップした先の遷移先を選択します。**MailInAppチェックアウト(Stripe)**は、実際の決済フローをそのまま組み込みます — ストアフロントは不要、別のチェックアウトページを作る必要もなく、カード情報がMailInApp自身のサーバーに触れることも一切ありません。外部ストアのチェックアウトへリンクを選ぶと、代わりに購入者を自分が運営するShopify/WooCommerceストアの商品ページへ直接送ります — 販売(そしてその在庫・税・割引)を、すでに運用しているストア側に残しておきたい場合に使います。

MailInAppチェックアウト(Stripe)

このブロックの既定モードで、このセクションの内容はすべてこのモードに特有のものです — もう一方のモードについては下の代わりに自分のストアのチェックアウトへリンクするを参照してください。まず設定 → 決済で自分のStripeアカウントを接続してください(Stripe Connect、Standard/OAuth)。すべての支払いはそのアカウントに直接入金されます。

投票や評価とは異なり、購入はStripe自身のホスティングされたチェックアウトページ上でしか安全に完了できないため、このブロックにはメール内キネティックティアが一切ありません。今すぐ購入はメールを含めどこでも常にリンク先行です。タップすると常にまずホスティングされたライブビューの確認ページ(/v/[token]/act?blockId=...&blockType=product&action=buy)が開き、商品名と価格を改めて表示し、実際に何かを作成する前にもう一度のタップ(「決済に進む」)を求めます。

この「確認してからPOST」という形は意図的なものです — メール内のすべてのリンクをプリフェッチするセキュリティスキャナーや企業プロキシが、単純なGETで実際のStripe Checkout Sessionを発生させてしまうことは絶対に避けなければなりません。確認ページからの明示的なPOSTだけがPOST /api/checkoutに到達します。このルートは、価格・名前・在庫をクライアントから送られた何かからではなく、常にブロック自身のサーバー側に保存された設定から解決します。その後、オーナーが接続したStripeアカウント上にCheckout Sessionを作成し、pending状態の注文を書き込み、303でStripeへリダイレクトします。

pending状態の注文は、この時点では販売として一切カウントされません。注文をpaidへ移行させるのはPOST /api/webhooks/stripeだけです。これはStripe自身の署名で認証されます — カウントダウンや開封トラッキングのエンドポイントのHMAC付きURLと同じ信頼モデルです。購入者のブラウザが着地する成功URLへのリダイレクトはあくまでUXであり、支払いの証明としては信頼できないためです。

このWebhook上で、MailInAppは確定前にトランザクションとして在庫を再チェックします。2人の購入者が最後の1点を競い合い、両方がStripeを通過してしまった場合は、負けた側の請求が自動的に返金され、商品が黙って過剰販売されるのではなく、その購入者に通知メールが送られます。確定した購入はpurchaseインタラクションイベントも書き込むため、他のすべてのブロックの回答が使うのと同じ集計とプロジェクトWebhookのパイプラインに収益が流れます。インタラクションと分析を参照してください。

フルフィルメントはフルフィルメントフィールドによって決まります:

デジタル — 配信するコンテンツ(ダウンロードリンクまたはコード)をブロックに直接入力します。Webhookが支払いを確認した瞬間に、そのコンテンツが購入者へ自動でメール送信されます。
物理 — Stripe Checkoutが決済フローの一部として配送先住所を収集します。注文はプロジェクトの注文テーブルに置かれ、発送済みにするをクリックするまで待機します。クリックすると購入者へ発送通知メールが送られます。

在庫は任意の上限です(0 = 無制限)。メールに送信されるHTMLは送信時点で静的です — これはカウントダウンブロックの期限やミーティングリンクブロックの参加受付時間帯と同じ規則です — そのため、上限付き商品の在庫状況がテキストとして固定されることはありません。代わりにメールには小さなサーバー側レンダリングの在庫ピル画像(「残り3点」/「売り切れ」)が埋め込まれ、開封ごとに再生成されるため、送信から数日経っても古い在庫状況が表示されることはありません。ホスティングされたライブビューでは、在庫はリアルタイムかつ動的にチェックされます — 支払い済みの注文が上限に達すると、今すぐ購入はクリックできるボタンの横にバッジを添えるだけでなく、無効化された「売り切れ」コントロールに完全に置き換わります。いずれの場合でも、実際の権威は支払い時のWebhookによるトランザクションの再チェックにあります。バッジや無効化されたボタンはUX上の便宜であり、強制の仕組みそのものではありません。

ShopifyまたはWooCommerceのストアを接続済みであれば、これらのフィールドの上にストアからインポートの検索ボックスが表示され、そのストア自身のカタログから商品を一覧できます。裏側で自動的に同期され続けるため、押すべき専用ボタンはありません。商品を選ぶと、名前・説明・画像・価格が自動的に入力されます。

その同期済み商品に既知のストアフロントページ(Shopify自身の商品ハンドル、またはWooCommerceのページURL)がある場合、インポートするとチェックアウトも外部ストアのチェックアウトへリンクに切り替わり、そのページが外部商品ページURLとして入力されます。インポートされた商品は、これ以上何も設定しなくても自分のストアで販売できる状態になります。ストア接続がページURLに対応する前に同期された商品は、代わりにMailInAppチェックアウトのままとなり、内部の設定は変わりません。

これは一度だけのコピーであり、ライブで連動するリンクではありません。以降どのフィールドも自由に編集でき、チェックアウト時に実際に請求される価格は常にブロックが現在保持している値であり、ストアから再取得されることはありません。以下のフィールドは、ストアを接続していてもしていなくても同じように動作します — インポートはあくまで近道であり、必須ではありません。

代わりに自分のストアのチェックアウトへリンクする

チェックアウトを外部ストアのチェックアウトへリンクに切り替え、外部商品ページURLを設定します — 自分のShopify商品ページ、カートのパーマリンク、WooCommerceの商品ページ、任意のhttps://リンクなど — これでMailInApp自身の決済フローを完全にスキップします。今すぐ購入は、その後は単純なリンク付きボタンや画像と全く同じように振る舞います: 確認ページも、/api/checkoutも、Stripeもありません。クリック自体は依然として追跡されるため(クリックヒートマップにカウントされます)、購入者は自分のストアに直接着地し、そこで購入を完了します。

MailInAppがその決済に一切関与しないため、上記のMailInAppチェックアウトの仕組みは外部商品には一切適用されません。pending/paidの注文もなく、注文テーブルへの記載もなく、フルフィルメントや返金の操作もなく、在庫の強制やストック状態のバッジもなく、購入を起点としたジャーニーのステップもありません。その収益は、自分のストアでの他の販売と同じ方法で追跡してください。ストア側での購入をそのきっかけとなったメールに紐付ける方法は、Shopify注文・チェックアウト収益トラッキングを参照してください。

チェックアウトが外部に設定されている状態で外部商品ページURLが空欄のまま、または有効なhttps://リンクでない場合、ブロックは動作しないボタンを表示するのではなく、静かにMailInAppチェックアウトモードと全く同じ動作にフォールバックします。

商品ごとの割引

ブロックがストアからインポート経由で入力され(手入力のURLではなく実際のstoreProductIdを持っている)、チェックアウトが外部に設定されている場合、商品ごとの割引トグルが表示されます。オンにして割引タイプ(パーセントまたは固定額)、割引額、有効期限(送信からの日数)を設定します。スタジオのキャンバスは即座に再描画され、受信者が実際に目にするのと同じ割引バッジと取り消し線付きの価格が表示されます — 確認のためにライブビューを開く必要はありません。各受信者のメールがレンダリングされる直前に、MailInAppは接続済みのShopifyまたはWooCommerceストア上に使い捨ての割引コードを発行します — そのコードはその受信者、かつこの商品だけに制限され、ストア全体には適用されません — そして今すぐ購入を、コードが既に適用された状態でこの商品自身のページに購入者を戻す引き換えリンクに書き換えます。これは送信ページの割引オファー(プロジェクトレベル、割引オファーを参照)とは独立しています: プロジェクトはどちらか一方、両方、またはどちらも使わないことができ、それぞれが独自のクールダウンを保持するため、片方が他方をブロックすることはありません。ストアからインポートされていない商品を持つブロックには、トグルが非表示になっている理由を説明する注記が代わりに表示されます。Shopify商品割引コードとWooCommerce商品割引コードで、はじめから終わりまで解説しています。

Shopifyストアの場合、チェックアウトの前にこの同じバッジを実際の商品ページ自体に直接表示できる、任意のアプリブロックも用意されています — 設定手順は商品ページでの割引表示(Shopify)を参照してください。

ある受信者に対してコードの発行が失敗した場合(一致するストアの顧客が見つからない、トークンの再接続が必要、ライブAPIの一時的な不具合など)、そのメール自体は変わらず送信されます。今すぐ購入は、単にブロックのプレーンな、割引なしの商品リンクへフォールバックするだけです。

設定可能なフィールド:

名前、説明、画像 — URLとして入力するのではなく、メディアライブラリから選択します。あるいは上記のストアからインポートで自動入力されます。
価格と通貨(USD、EUR、GBP) — 外部モードでも情報表示としてカードに表示されます。
チェックアウト — MailInAppチェックアウト(Stripe)または外部ストアのチェックアウトへリンク。
外部商品ページURL — 外部モードのみ。今すぐ購入が購入者を送る先です。
商品ごとの割引、割引タイプ、割引額、有効期限(送信からの日数) — 外部モードのみ、かつブロックの商品がストアからインポート経由で入力されている場合のみ。
フルフィルメント — デジタルまたは物理。MailInAppチェックアウトモードのみ。
在庫 — 0で無制限。MailInAppチェックアウトモードのみ。
配信コンテンツ — デジタルのみ。支払い後に送られるダウンロードリンクまたはコード。MailInAppチェックアウトモードのみ。
背景色、パディング、ボーダー、ボーダーの角丸、そして名前と説明のテキストスタイルの上書き。

例

Subject

Back in stock: the Weekender Tote

グッズの数量限定発売や限定プリントには、この形がそのまま合います: 在庫を発売数量に上限設定し、在庫が減っていくにつれて在庫ピルにその稀少性を伝えさせます。プロモーション送信から直接販売し、クリックを別のストアへ回さない、より広いパターンについてはEコマースと商品ドロップを参照してください。デジタルコースやebookのローンチではデジタルフルフィルメントを使い、支払いが確定した瞬間に購入者へダウンロードリンクが届くようにします。手動でのフルフィルメント作業は一切不要です。物理的な追加アイテム(ブランド入りグッズ、季節限定ボックスなど)を販売する地域のビジネスは物理フルフィルメントを使い、注文テーブルを軽量な注文キューのように運用し、発送するたびに完了マークを付けます。住所の確認が必要な場合は購入者に連絡を使ってサポートチケットを開いてください。

静的フォールバックの見え方

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <img src="https://mailinapp.com/api/product-status?p=proj123&b=prod-1&s=..."
       width="180" height="30" alt="" style="display:block;margin-bottom:8px" />
  <a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=prod-1&blockType=product&action=buy"
     style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
            color:#ffffff;border-radius:6px;text-decoration:none;
            font-size:14px;font-weight:600">
    Buy now
  </a>
</div>

在庫状態の画像は在庫上限が設定されているときだけレンダリングされます。今すぐ購入は、メール内から直接支払いをPOSTするのではなく、常に確認ページを開きます。

外部チェックアウトモードでは、確認ページも在庫バッジも一切ありません — 今すぐ購入は外部商品ページURLへ直接向かう、単純なクリック追跡付きリンクです:

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <a href="https://mailinapp.com/v/eyJhbGci.../click?blockId=prod-1&blockType=product&dest=https%3A%2F%2Fshop.example.com%2Fproducts%2Ftote-bag"
     style="display:inline-block;border:none;border-radius:6px;
            background-color:#4f46e5;color:#ffffff;padding:10px 20px;
            font-size:14px;font-weight:600;text-decoration:none">
    Buy now
  </a>
</div>

商品ブロック

MailInAppチェックアウト(Stripe)

代わりに自分のストアのチェックアウトへリンクする

商品ごとの割引

例

静的フォールバックの見え方

関連ページ