カート画面でポイントを利用する方法

[shira1]

お世話になっております。

ポイント管理をするshopifyアプリを開発しておりまして、ポイントを利用について質問がございます。

会員が保有しているポイントをカート画面にて、利用するポイントを設定し、決済の画面で合計金額からポイント分引かれてる機能を実現したいと考えております。

チェックアウト（checkout.liquid）で実現したかったのですがshopify plusではないため、Liquid編集ができませんでした。

ですので、カートにてポイントを設定し、購入合計から引くことはshopify標準で可能でしょうか？

方法がございましたら、お教えいただければ助かります。

よろしくお願いいたします。

[junichiokamura]

通常のポイントアプリは、内部でポイントをディスカウントに変換して、APIでディスカウントコードを発行してその共有リンクに遷移させることでポイント割引を実現しています。

https://help.shopify.com/ja/manual/discounts/managing-discount-codes

https://shopify.dev/docs/admin-a...

https://shopify.dev/docs/admin-api/rest/reference/discounts

この辺りのアプリの挙動を参考にしてみてください。

https://apps.shopify.com/collections/improve-your-store?locale=ja&page=1

[shira1]

junichiokamura様

ご返信していただき、大変助かりました。

確認したところ、いくつか質問がございます。

・リンクについて
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「https://shopify.dev/docs/admin-a...」のリンクがページ遷移できませんでした。
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について
頂いたリンク確認いたしました。
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成webhook（'topic'：'checkouts/create'）にて、PriceRule作成とDiscountCodeを生成し、生成したクーポンコードをチェックアウトの購入額に適用することでポイント割引とする認識でよろしいでしょうか？

・チェックアウト作成webhook（'topic'：'checkouts/create'）について
プラン：Developer Preview
shopify API version：2021-01
scope：read_checkouts,write_checkouts
topic：checkouts/create
にて、webhook登録をしましたが、アプリインストール時に500エラーとなりました。
こちらエラーのログです。

Client error: `POST https://XXXXXXXX.myshopify.com/admin/webhooks.json` resulted in a `422 Unprocessable Entity` response:
{\"errors\":{\"topic\":[\"Invalid topic specified: checkouts\\/create. Topics allowed: app\\/uninstalled, collections\\/create, (truncated...)

scopeの設定はしているのですが、無効なtopicとなり登録ができませんでした。別のwebhook「products/create」「customers/create」はエラーなくインストールされて、商品作成時にデータを取得できます。
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

ご回答いただければ幸いでございます。
よろしくお願いいたします。

[shira1]

junichiokamura様

ご返信していただき、大変助かりました。

確認したところ、いくつか質問がございます。

・リンクについて
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「https://shopify.dev/docs/admin-a...」のリンクがページ遷移できませんでした。
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について
頂いたリンク確認いたしました。
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成webhook（'topic'：'checkouts/create'）にて、PriceRule作成とDiscountCodeを生成し、生成したクーポンコードをチェックアウトの購入額に適用することでポイント割引とする認識でよろしいでしょうか？

・チェックアウト作成webhook（'topic'：'checkouts/create'）について
プラン：Developer Preview
shopify API version：2021-01
scope：read_checkouts,write_checkouts
topic：checkouts/create
にて、webhook登録をしましたが、アプリインストール時に500エラーとなりました。
こちらエラーのログです。

Client error: `POST https://XXXXXXXX.myshopify.com/admin/webhooks.json` resulted in a `422 Unprocessable Entity` response:
{\"errors\":{\"topic\":[\"Invalid topic specified: checkouts\\/create. Topics allowed: app\\/uninstalled, collections\\/create, (truncated...)

scopeの設定はしているのですが、無効なtopicとなり登録ができませんでした。別のwebhook「products/create」「customers/create」はエラーなくインストールされて、商品作成時にデータを取得できます。
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

ご回答いただければ幸いでございます。
よろしくお願いいたします。

[j_park]

junichiokamura様

ご返信していただき、大変助かりました。

shira1に代わりまして、ご返信いたします。

確認したところ、いくつか質問がございます。

・リンクについて
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「https://shopify.dev/docs/admin-a...」のリンクがページ遷移できませんでした。
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について
頂いたリンク確認いたしました。
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成webhook（‘topic’：‘checkouts/create’）にて、PriceRule作成とDiscountCodeを生成し、生成したクーポンコードをチェックアウトの購入額に適用することでポイント割引とする認識でよろしいでしょうか？

・チェックアウト作成webhook（‘topic’：‘checkouts/create’）について
プラン：Developer Preview
shopify API version：2021-01
scope：read_checkouts,write_checkouts
topic：checkouts/create
にて、webhook登録をしましたが、アプリインストール時に500エラーとなりました。
こちらエラーのログです。

Client error: `POST https://XXXXXXXX.myshopify.com/admin/webhooks.json` resulted in a `422 Unprocessable Entity` response:
{\“errors\“:{\“topic\“:[\“Invalid topic specified: checkouts\\/create. Topics allowed: app\\/uninstalled, collections\\/create, (truncated...)

scopeの設定はしているのですが、無効なtopicとなり登録ができませんでした。別のwebhook「products/create」「customers/create」はエラーなくインストールされて、商品作成時にデータを取得できます。
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

ご回答いただければ幸いでございます。
よろしくお願いいたします。

[j_park]

junichiokamura様

ご返信していただき、大変助かりました。

shira1に代わりまして、ご返信いたします。

確認したところ、いくつか質問がございます。

・リンクについて
「APIでディスカウントコード」に関するリンクを教えていただきましたが、

「https://shopify.dev/docs/admin-a...」

のリンクがページ遷移できませんでした。
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について
頂いたリンク確認いたしました。
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成webhook（‘topic’：‘checkouts/create’）にて、PriceRule作成とDiscountCodeを生成し、生成したクーポンコードをチェックアウトの購入額に適用することでポイント割引とする認識でよろしいでしょうか？

・チェックアウト作成webhook（‘topic’：‘checkouts/create’）について
プラン：Developer Preview
shopify API version：2021-01
scope：read_checkouts,write_checkouts
topic：checkouts/create
にて、webhook登録をしましたが、アプリインストール時に500エラーとなりました。
こちらエラーのログです。

Client error: `POST https://XXXXXXXX.myshopify.com/admin/webhooks.json` resulted in a `422 Unprocessable Entity` response:
{\“errors\“:{\“topic\“:[\“Invalid topic specified: checkouts\\/create. Topics allowed: app\\/uninstalled, collections\\/create, (truncated...)

scopeの設定はしているのですが、無効なtopicとなり登録ができませんでした。別のwebhook「products/create」「customers/create」はエラーなくインストールされて、商品作成時にデータを取得できます。
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

ご回答いただければ幸いでございます。
よろしくお願いいたします。

[shira1]

申し訳ないのですが、こちらの返信で何度投稿しても「この返信はスパムとしてマークされて削除されました」となり、投稿できなかったので、

大変失礼ながら画像で返信いたします。

ご返信内容

ご回答いただけますと幸いでございます。

よろしくお願いいたします。

[junichiokamura · Accepted solution]

リンクはこちらになります。

https://help.shopify.com/ja/manual/discounts/managing-discount-codes

https://shopify.dev/docs/admin-api/rest/reference/discounts/discountcode

Webhookでも実現できますが、Webhookはタイムラグがあるのと到達は100%保証されない（通信の問題でリトライなども発生します）ので、個人的にはApp proxyを推奨します。

https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...

私の実装のイメージは、

まず、ストアフロント（テーマ側）にだす会員向けUI（大抵は画面のフッターから浮かび上がるポップアップ的なもの）をJavaScriptで実装して、ScriptTag APIでアプリインストール時にタグ挿入（こうするとテーマファイルを汚すことがありません）

https://shopify.dev/docs/admin-api/graphql/reference/online-store/scripttag

https://shopify.dev/docs/admin-api/graphql/reference/online-store/scripttag

このUIを経由してポイントの出し入れを行う（ポイントデータの管理は、Shopify のmetafieldsを使ってcusomter objectを使ってもいいですし、ご自身のデータベースでもいいかと思いますが、metafiledsだとLiquidからも参照できます）。
https://shopify.dev/docs/admin-api/graphql/reference/metafields

実際にカートへの反映＝ディスカウントの処理は、上記のApp proxyを使って、ショップURL/apps/xxxx   のようなショップドメイン内のサブパスにAjax 通信をして、通信先でDiscountのAPIを呼んでクーポン（ディスカウントコード）発行。発行されたディスカウントコードをショップURL/discount/XXXX のような形で埋め込んでJSで購入者をそのURLにリダイレクトする。

以下で書かれているように戻り先も指定できるので、一旦ディスカウントを読ませてからカート画面に戻すことも可能です。
https://community.shopify.com/c/Shopify-Design/How-to-insert-discount-code-into-URL-so-discount-is-a...

このままチェックアウトに進めば、ポイントに対応する金額がディスカントされて購入される。

マーチャント向けのポイント管理画面は埋め込みアプリとして別開発することになるかと思います。

下記のブログに上記で説明していることをまとめていますので、ご参照ください。リンク先で動画での説明もしています。

https://www.shopify.jp/blog/partner-app-store-publishing-guide

[shira1]

junichiokamura様

リンク及び実装のイメージありがとうございます。

参考にさせていただきます。

webhookにつきまして、ご教授ありがとうございます。100%保証されないこと存じしておりませんでした。

App proxyついて、今一度You Tube「Shopify ストアフロントの開発」を拝見しまして、開発方法を考察していく所存です。

ありがとうございました。

[shira1]

junichiokamura様

お世話になっております。

ご教授していただきました実装イメージにつきまして、こちらでも実現できました。

実装した内容といたしましては
１．App proxyの設定
２．ScriptTag API タグ挿入
３．２のscriptにてApp proxyを中継しクーポン（ディスカウントコード）発行（Discount APIs）
４．/discount/XXXX でcartにリダイレクト

上記を実装し、カートのLiquidにボタンを配置して、指定した金額のディスカウントクーポンを適用することができました。

ありがとうございました。助かりました。

[junichiokamura]

ご連絡いただきありがとうございます！

ポイント実装は日本でよく聞かれますので、実際に動作した事例は他の方にも参考になるかと思います！