Shopifyの決済画面カスタマイズ - Shopify Functionsをストアにデプロイする

こんにちは。
ディレクターの田辺です。

先日、 Shopify Plus以外でも、Shopifyの決済画面をカスタマイズする方法 (Shopify Functions) という記事で、Shopify Functionsを利用して、決済画面にロジックを追加する方法をご紹介しました。

本記事では、Shopify Plusストアに、カスタムアプリを使用して、Shopify Functionsを追加する方法をご紹介します。

前提知識

App extensionsについて

Shopify Functionsは、Shopifyの括りで言うと、App extensionsというものに分類されます。
App extensionsは、その名の通り、アプリの拡張機能です。
まず、アプリがあり、そのアプリに拡張機能が属します。
したがって、Shopify Functionsをストアに導入するには、依代となるアプリが必要です。

参考: https://shopify.dev/docs/apps/app-extensions

Shopifyアプリについて

Shopifyのアプリは大きく2種類に分類されます。

1. 公開アプリ: 複数のストアにインストール可能なアプリ
2. カスタムアプリ: 1つのストアにのみインストール可能なアプリ※

※例外があり、Shopify Plusであれば、同一組織内で運用される複数のストアに、1つのカスタムアプリをインストールできます。

今回は、カスタムアプリを使用します。

参考: https://help.shopify.com/ja/manual/apps/app-types

カスタムアプリのストアへのインストールについて

従来、アプリをストアにインストールするには、アプリが稼働している必要がありました。アプリインストール時に、アプリとストアの間で認証情報をやり取りするためです。

しかし、7月下旬の Shopify Editions 23年夏 において、下図のアップデートが発表されました。

拡張機能のみの組織レベルのカスタムアプリのご紹介
Functionsやチェックアウト用の拡張機能があるカスタムアプリを構築しているだけの場合は、Shopifyが拡張機能をホストするのでウェブアプリを用意する必要がなくなりました。

このアップデートによって、拡張機能(App extensions)のみを提供するアプリの場合、アプリが稼働していなくてもストアにインストール可能になりました。
従来より手軽にShopify FunctionsなどのApp extensionsをストアに導入できるようになったわけです。

参考: https://shopify.dev/docs/apps/app-extensions/extension-only-apps

Shopify Functionsをストアに追加してみる

ここからは、実際にShopify Functionsを、稼働しているShopify Plusストアに追加する流れを実践していきます。

準備するもの

• Shopify パートナーアカウント
  
• Shopify Plus ストア、もしくは、開発ストア
  
• Node.js バージョン16以上
• Nodeパッケージマネージャー (今回はnpmで進めます)
• Git バージョン2.28以上
• Rust および cargo-wasi

参考:
https://shopify.dev/docs/apps/getting-started/create
https://shopify.dev/docs/apps/checkout/payment-customizations/getting-started

なお筆者の環境はMacOSです。
Windowsの方は参考ページをご参照ください。

全体の流れ

下記のページの参考に、
https://shopify.dev/docs/apps/app-extensions/extension-only-apps
前回紹介したShopify FunctionsによるPayment Customizationを
下記の流れでデプロイするところまで進めます。

1. アプリを作成する
2. Shopify Functionsを作成する
3. カスタムアプリとしてストアにインストールする
4. Shopify Functionsを前回紹介した内容で編集する
5. Shopify Functionsをデプロイする
6. Shopify Functionsをストアにおいて有効にする

1. アプリを作成する

下記のコマンドを実行します。

npm init @shopify/app@latest

下図のようなメッセージが出ることがあります。yを入力して進めます。

project nameの入力を促されます。
今回、筆者は extension-only-app-test としましたが、任意の文字列で問題ありません。

次に、どのタイプのアプリを作成するかを入力します。
ここが重要なポイントで、必ず Start by adding your first extension を選択します。

下図のような表示が出力されればアプリの作成は成功です。

ただし、この時点では、ローカル(自身のパソコン)にアプリの開発環境が作成された、と言った方が正しい状態です。
この後の手順で、Shopify パートナーアカウント上にアプリを作成します。

2. Shopify Functionsを作成する

下記のコマンドを実行します。
今回は、前回紹介したShopify FunctionsのPayment Customizationを作成します。

cd extension-only-app-test
npm run shopify app generate extension -- --template payment_customization --name payment-customization

下図のように、Shopify パートナーアカウントに新しくアプリを作成するか、それとも、既存のアプリとローカルの開発環境を紐づけるかを聞かれます。
今回は、 (y) Yes, create it as a new app を選択し新しくアプリを作成します。

App name (Shopify パートナーアカウント上でのアプリの名称)の入力を促されますが、筆者はApp nameとproject nameを同じにしたかったので、何も入力せずEnterを押して次に進みます。
App nameとproject nameを異なったものにしたい場合は、任意の文字列を入力してください。

次に、開発言語の入力を促されます。今回は、 JavaScript で進めます。

Shopify Functionsの作成に成功した場合、下図の表示が出力されます。

3. カスタムアプリとしてストアにインストールする

Shopify パートナーアカウントにアクセスします。
パートナーアカウント > アプリ管理 に進むと、下図のように、先ほど作成した extension-only-app-test というアプリが見つかるはずです。

上図の extension-only-app-test をクリックし、「配布」に進み、下図の画面を開きます。

上図のように、「カスタム配布」を選び、「選択」ボタンをクリックします。
下図のようなポップアップが開きます。「カスタム配布を選択」ボタンをクリックします。

下図の画面で、Shopify Plusストアのドメインを入力します。
１つのPlus組織に対して複数ストアのインストールを許可する が表示されている場合、今回は必要ないのでチェックボックスを外します。
そして、「リンクを生成」ボタンをクリックします。

下図のポップアップが開くので、「リンクを生成」ボタンをクリックします。

下図のようにインストールリンクが表示されるので、「コピー」ボタンをクリックしURLをコピーします。

上図でコピーしたURLをブラウザのアドレスバーにペーストします。
下図のように、ストアのアプリインストール画面が開くので、「アプリをインストール」をクリックします。

これで、カスタムアプリのShopify Plusストアへのインストールは完了です。

従来は、アプリインストールのためだけに、アプリを稼働させる必要がありましたが、App extensionsのみのアプリのインストールには、アプリを稼働させる必要がなくなり、格段に楽になりました。

4. Shopify Functionsを前回紹介した内容で編集する

https://techlab.q-co.jp/articles/107/ で紹介した内容で、下記2ファイルを編集します。

1. extensions/payment-customization/input.graphql
   
2. extensions/payment-customization/src/index.js

また、前回記事にも記載の通り下記を実行しておきます。

cd extensions/payment-customization
npm run shopify app function typegen
cd ../../

5. Shopify Functionsをデプロイする

下記を実行します。

npm run deploy

デプロイする拡張機能(Shopify Functions)をリリースするかどうか聞かれます。
(y) Yes, release this new version を選択します。

下図のような表示が出力されればデプロイは成功です。

Shopify パートナーアカウントでも確認してみます。
パートナーアカウント > アプリ管理 > extension-only-app-test > 拡張機能 にアクセスすると、先ほどデプロイしたShopify Functionsが表示されます。

これでShopify Functionsのデプロイは完了ですが、Shopify Functionsはまだストアにおいて有効になっていません。
有効にするには、APIを使用してストアに登録する必要があります。

Shopify Functionsをストアにおいて有効にする

下記のページに記載の手順を実行します。
https://shopify.dev/docs/apps/checkout/payment-customizations/getting-started#step-3-create-the-payment-customization-with-graphiql

まず、ストアに、下記のアプリをインストールします。
https://shopify-graphiql-app.shopifycloud.com/login
下図のように、全権限を付与してインストールします。
※詳しい方は必要な権限だけでも大丈夫です。

インストールした「Shopify GraphQL App」にアクセスします。

上図の下記の部分を、

{
	shop {
		name
	}
}

下記に入れ替えます。

mutation {
  paymentCustomizationCreate(paymentCustomization: {
    title: "Hide payment method by prodcut metafield",
    enabled: true,
    functionId: "YOUR_FUNCTION_ID_HERE",
  }) {
    paymentCustomization {
      id
    }
    userErrors {
      message
    }
  }
}

実行する前に、 "YOUR_FUNCTION_ID_HERE" を実際のShopify FunctionsのIDに変更する必要があります。
なお、titleは任意の文字列で大丈夫です。今回は Hide payment method by prodcut metafield としました。

Shopify FunctionsのIDは下記のように確認できます。
パートナーアカウント > アプリ管理 > extension-only-app-test > 拡張機能 > Payment Customization にアクセスし、下図の画面を開き、「ID」の項目に記載されているのが、Shopify FunctionsのIDです。

必要な情報が揃ったら、Shopify GraphQL Appアプリで下図のようにクエリを実行します。

最後に、 ストア管理画面 > 設定 > 決済 にアクセスし、下図のようになっていることを確認できれば、デプロイしたShopify Functionsがストアで有効になっています。

まとめ

Shopify Functionsを、カスタムアプリを利用して導入するには、Shopify Plus ストアが必要になるのは、非常に残念な仕様です。

もし、今後、Shopify Plus以外の通常プランのストアにもカスタムアプリによるShopify Functionsの導入が許可されるようになれば、カスタマイズの幅が大きく広がります。

しかし、Checkout UI ExtensionsがShopify Plus ストアでしか利用できない現状を鑑みると、実現は遠い未来かもしれません。

それでは。