Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ①

Webエンジニアの茄子です。
前回の記事では、Post-Purchaseの機能の概要について紹介しました。（ https://techlab.q-co.jp/articles/68/ ）
今回は、公式ドキュメントにあるサンプル作成の準備をしていきます。

前提

本記事では、以下を前提としています。

・Shopfiyパートナーアカウントを持っている。
・テスト決済可能な開発ストアがある。
・ngrokのアカウントを作ってある。
・Typescript及びReactの基本的な書き方を理解している。

Shopifyの管理画面やストアの基本的な部分についての解説は、他の記事や公式ドキュメントをご覧ください。
また、shopifyアプリの言語にはNode.jsを使います。

※ 後述の開発用拡張機能が必要なため、開発中のブラウザはGoogle Chromeを使用してください。
※ 本記事では Typescript & React で解説しますが、Javascript & React、Javascript & バニラJS(非React) での開発も可能です。
※ ngrok セットアップの参考記事： https://techlab.q-co.jp/articles/47/#ngrokのインストールと設定（未設定の場合）

環境

Node.js 18.12.1
@shopify/app 3.22.1 (React 17)

セットアップ

記事内では、以下の名称と仮定して進めます。適宜読み替えてください。

プロジェクト名: tutorial-post-purchase-01
開発ストア: https://my-dev-store.myshopify.com

プロジェクト作成

Post-Purchase Checkout Extension はShopifyアプリの一部として作成されますので、まずはベースとなるShopifyアプリを作成します。作業をしたいディレクトリ(任意)で下記のコマンドを実行します。

npm init @shopify/app@latest

プロジェクト名と言語を聞かれますので、プロジェクト（フォルダ）名はtutorial-post-purchase-01 (任意のものに変えて構いません)、言語は node を選びます。

次にextensionを作成します。プロジェクト内の extensions/ に作成されます。

npm run shopify app generate extension

Press any key to open the login page on your browser

というメッセージが出ます。適当にキーを押すとブラウザでShopifyへのログインを要求されますので、そのままログインしてください。

Create this project as a new app on Shopify?

今度は、上記のメッセージが出ます。現在はデフォルトの作成方法がCLIなのですが、もしパートナー画面からUIを通して既に作成したアプリとして開発する場合、Noを選んでください。今回はCLIで新規に作成しているのでYesを選びます。以降、下記の選択・入力をします。

App Name
　→ パートナー画面でのShopifyアプリの登録名になる名前です。ローカルのプロジェクト（フォルダ）名と別の名前にすることも可能です。未入力ならプロジェクト名と同じになります。
Type of extension?
　→  Post-purchsae UI を選択します。
Your extension's working name?
　→ extensionにも登録名を付けます。今回は tutorial-post-purchase-01-ext としました。
What would you like to work in?
　→ Typescript React を選択します。本記事ではこちらを使用しますが、Javascript & React、Javascript & Vanilla も選択可能です。

初回起動

npm run dev

どのストアで開発するかを聞かれるので使用するストアを選びます。すると

Have Shopify automatically update your app's URL in order to create a preview experience?

と聞かれるので、一番上の Always by default を選択します。これは、Shopifyがアプリを管理画面の中で表示する時に接続する先のURLを自動で更新するためのものです。

そしてこのような案内、その下に開発ログが表示されます。

Success! The tunnel is running and you can now view your app.
✔ URL updated


Shareable app URL

  https://82fd-61-45-222-174.ngrok.io?shop=my-dev-store.myshopify.com&host=dGVzdC1uaXNoaW11cmEtMDAxLm15c2hvcGlmeS5jb20vYWRtaW4

Shopify extension dev console URL

  https://82fd-61-45-222-174.ngrok.io/extensions/dev-console

tutorial-post-purchase-01-ext (Post-purchase UI)
To view this extension:
  1. Install Shopify’s post-purchase Chrome extension (​https://chrome.google.com/webstore/detail/shopify-post-purchase-dev/nenmcifhoegealiiblnpihbnjenleong​)
  2. Open the Chrome extension and paste this URL into it: https://82fd-61-45-222-174.ngrok.io/extensions/dev-0599eed7-77d5-4782-b1fe-8e38ebf8dfa3
  3. Run a test purchase on your store to view your extension

アプリのストアへのインストール

後ほどストアのAPIにアクセスするためのトークンが必要になるので、先程のログの Sharable app URL にアクセスしてアプリをインストールしておきます。
このような画面が出るので「アプリをインストール」ボタンでインストールします。

Chrome拡張機能

Post-Purchase Checkout Extensionの開発は、npm run dev でビルドされたスクリプトを開発ストアに読み込ませることで行います。そのためのChrome拡張機能が提供されていますので先程のログの To view this extension: 1. のリンクからインストールします。

インストールしたら、拡張機能の「オプション」から開かれる設定画面の Extension root URL 欄に 2. のURLを貼ります。

ストア内で確認

（テスト決済の設定が済んでいない方はこちら https://help.shopify.com/ja/partners/dashboard/managing-stores/test-orders-in-dev-stores ）
ここで一旦購入フローを進み、Post-Purchaseページが表示されるか確認してみます。
開発ストアページを開き、カード情報入力画面の次にこの画面が出れば成功です。

初期状態では商品を実際に追加する処理は入っておらず、ボタンを押してもコンソールにログが出るだけです。
npm run devはホットリロードになっているので開発時はこの状態で変更をしていきます。
一旦ここで初期状態をコミットしておきます。

.envの準備

Extension内で商品情報を取得するなどの際に、API keyやストアの情報が必要になるため、 .env ファイルを作成します。プロジェクトのルートディレクトリに置きます。

内容は以下。

SHOPIFY_API_KEY=後述のクライアントID
SHOPIFY_API_SECRET=後述のクライアントシークレット
SHOPIFY_ACCESS_TOKEN=
DEV_STORE=my-dev-store
PRODUCT_ID=後述の商品ID

SHOPIFY_API_KEY, SHOPIFY_API_SECRET

SHOPIFY_API_KEY, SHOPIFY_API_SECRET は下の画像のように、パートナー画面の「アプリ管理」から今回のアプリ名を開いたページから取得できます。（名前が "クライアントID" ですが問題ありません。）

PRODUCT_ID

ストア管理画面の商品管理から適当な商品を一つ選び、そのURLの最後の部分の番号を取ってきます。

終わりに

今回は公式のドキュメントにある Upsell Example 作成に向けたセットアップを解説しました。
次回は、実際に動く部分と商品情報を返すサーバーを作成し、追加購入できるようにします。