Shopifyでサブスクリプション機能を実装してみよう(APIを用いた実装) Part1

Shopifyへの登録~アプリ作成まで

まずはこちらの記事を参考に、アプリの作成まで進めてほしい。

サブスクリプションAPIの利用申請

アプリ設定を押下する。

スクロールしていくと、「サブスクリプション」の項目にたどり着く。

「アクセスをリクエストする」からAPIの利用申請を行おう。

申請理由は開発目的に則した内容を記載しよう。

ストアフロントAPIを有効にする

併せて、ストアフロントAPIを有効にしておこう。

サブスクリプション実装後、購入画面を編集する必要があるためだ。

サブスクリプションAPIについて詳しく知りたい方へ

こちらのKeisuke Inaba氏の記事に詳しい。

スコープについても言及されているため、申請を待っている間に目を通しておくことをおすすめする。

商品を出品しよう

こちらの記事を参考に、商品を出品しておこう。

今回はこちらの商品にサブスク購入を付与していく。

販売計画の作成

サブスク契約の前段階として、販売計画(SellingPlan)を作成する必要がある。

下記のAPIを実行しよう。

mutation {
      sellingPlanGroupCreate(
        input: {
          name: "商品を購入する"
          merchantCode: "subscribe-and-save"
          options: ["毎日課金型"]
          position: 1
          sellingPlansToCreate: [
            {
              name: "毎日課金するプラン"
              options: "毎日課金"
              position: 1
              billingPolicy: { recurring: { interval: DAY, intervalCount: 1 } }
              deliveryPolicy: { recurring: { interval: DAY, intervalCount: 1 } }
            }
          ]
        }
        resources: { productIds: [], productVariantIds: [] }
      ) {
        sellingPlanGroup {
          id
        }
        userErrors {
          field
          message
        }
      }
    }

すると、このようなログが表示される。

#<GraphQL::Client::Response:0x0000aaaafaxxxxxx @original_hash={"data"=>{"sellingPlanGroupCreate"=>
{"sellingPlanGroup"=>{"id"=>"gid://shopify/SellingPlanGroup/xxxxxxxxxxxx"}, 
"userErrors"=>[]}}, 
"extensions"=>{"cost"=>{"requestedQueryCost"=>10,....
throttleStatus"=>{"maximumAvailable"=>1000.0,...,
 @data=#< sellingPlanGroupCreate=...>, 
@errors=#<GraphQL::Client::Errors @messages={} @details={}>, 
@extensions={"cost"=>{"requestedQueryCost"=>10, ...
 "throttleStatus"=>{"maximumAvailable"=>1000.0, ...>

sellingPlanGroupのidは後ほど使用するのでコピーしておこう。

"gid://shopify/SellingPlanGroup/xxxxxxxxxxxx"

商品のidの確認

商品編集ページのURLには商品のidが含まれている。

こちらも後ほど使用するのでどこかにコピーしておこう。

https://{ストア名}.myshopify.com/admin/products/xxxxxxxxxx(この数字部がid)

販売計画と商品の紐付け

下記APIで販売計画と商品を紐付けよう。

mutation {
      productJoinSellingPlanGroups(
        id: "gid://shopify/Product/商品のid"
        sellingPlanGroupIds: [
          "gid://shopify/SellingPlanGroup/販売計画のid"
        ]
      ) {
        product {
          id
        }
        userErrors {
          field
          message
        }
      }
    }

サブスクリプション契約が追加されていることの確認

商品編集ページに戻り、下の方までスクロールしてみる。

「オプション」の下に「サブスクリプション」が追加されていることが確認できる。

これで商品をサブスクリプション販売できるようになった。