Shopify Post-Purchase Extensionでレジ前販売を実装する 概要編

Webエンジニアの茄子です。

2021年にリリースされた Post-Purchase Checkout Extensionを解説します。

機能の概要

公式ドキュメント：https://shopify.dev/apps/checkout/post-purchase

Post-Purchase Checkout Extensionは、Shopifyストアの決済情報入力画面とThank youページの間にページを追加することができる機能です。Shopifyアプリの拡張機能として提供されています。
「Post-Purchase」という言葉は英単語の直訳では、購入後ページという意味になります。しかし「購入後ページ」というと元々あるThank youページをイメージする方も多いと思います。ここでの「Purchase」というのは「決済」という意味合いで、購入フロー全体ではありません。ユーザーにとっての購入フローから見てThank youページを「購入完了」とするならば、この機能は "Post-" という名前とは裏腹に購入完了前ページにあたります。

Thank youページにもおすすめ商品やメッセージを出すことができますが、このページの最大の利点は決済情報を引き継げる点です。
Thank youページでおすすめなどを出しても、改めてカートからの決済フローを通る必要がありますが、この機能ではその必要無しに決済内容に商品を追加できます。

最大の利点は上述の決済に関してですが、単に挟み込むページとして使うこともできます。公式ドキュメントではこれらの用途が挙げられています。

• 追加購入
• アンケート
• ストアについてなどのフィードバックの投稿
•  寄付のお願い
• クーポンの提示
• 重要な告知
• プレミア会員などへの勧誘

ストアでの購入の流れは以下のようになります

カート投入 、チェックアウトフローへ
↓
購入者情報入力画面
↓
配送方法選択画面
↓
決済情報入力画面（ここで Post-Purchaseページを出すかどうかの判定がされます）
↓
決済完了
↓
Post-Purchase画面（上記の判定で出さない条件だった場合は出ずに、そのままThank youへ）
↓
Thank youページ

実際の画像

実際のチェックアウト画面の見た目を交えて紹介していきます。

購入者情報入力画面・配送方法選択までは通常と変わりません。

ここの支払画面へ遷移するタイミングで、Post-Purchase用のフックが呼ばれます。
購入した商品の情報がとれるので、それに基づいてPost-Purchase画面を出すかスキップするかを判定するなどが可能です。

Post-Purchase画面がこちら
用意されたコンポーネントを使って目的に合わせた画面を作る事ができます。
続編の記事で解説しますが、自由なHTML/CSSで組むことはできません。

今回の典型的な例では購入ボタンですが、決済確定やページ遷移のトリガーはボタン以外のアクションでも可能です。

購入ボタンを押すとThank youページに進みます。
右の購入情報に商品が追加されています。

終わりに

次回は公式の用意しているサンプルを使いながら、開発方法を解説します。