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

**URL:** <https://community.shopify.com/t/topic/30946>\
**Category:** 技術的なQ＆A\
**Created:** [January 8, 2021, 9:01am UTC](https://community.shopify.com/t/topic/30946 "2021-01-08T09:01:16Z")\
**Posts on this page:** 11\
**Page:** 1

## AI-generated summary

Shopify非Plus環境で、カート画面から会員ポイントを使い、チェックアウト時に購入金額へ反映できるかが主題です。checkout.liquidは編集できないため、標準機能だけでの直接実装は難しく、実際にはポイントをディスカウントコードへ変換する方式が提案されました。

主な提案内容:
- ポイント分をDiscount APIでクーポン化し、`/discount/XXXX` のURLで適用する。
- Webhookでも可能だが、到達遅延や未達の可能性があるため非推奨。
- 代替としてApp Proxy（ショップ配下のURL経由でアプリ処理を呼ぶ仕組み）を使う。
- フロント側UIはScriptTag APIで挿入し、ポイント管理データはmetafieldsや独自DBで保持する。

途中で `checkouts/create` Webhook が422エラーで登録できない問題も共有されましたが、最終的にはWebhook案ではなくApp Proxy案へ移行しました。

最終報告では、以下で実装成功しています。
- App Proxy設定
- ScriptTag APIでタグ挿入
- スクリプトからApp Proxy経由でDiscount APIを実行
- `/discount/XXXX` でカートへリダイレクト

結論として、議論は解決済みで、ポイント利用はディスカウントコード方式で実現できたと報告されています。

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [January 8, 2021, 9:01am UTC](https://community.shopify.com/t/topic/30946/1 "2021-01-08T09:01:16Z")

</div>

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

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

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [January 12, 2021, 6:39pm UTC](https://community.shopify.com/t/topic/30946/2 "2021-01-12T18:39:06Z")

</div>

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

[https://help.shopify.com/ja/manual/discounts/managing-discount-codes](https://help.shopify.com/ja/manual/discounts/managing-discount-codes)

> **[GraphQL Admin API reference](https://shopify.dev/docs/api/admin-graphql)**
>
> The Admin API lets you build apps and integrations that extend and enhance the Shopify admin. Learn how to get started using efficient GraphQL queries.

[https://shopify.dev/docs/admin-api/rest/reference/discounts](https://shopify.dev/docs/admin-api/rest/reference/discounts)

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

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

---

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [January 13, 2021, 3:31am UTC](https://community.shopify.com/t/topic/30946/3 "2021-01-13T03:31:52Z")

</div>

junichiokamura様

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

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

・リンクについて  
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「[https://shopify.dev/docs/admin-a…」のリンクがページ遷移できませんでした。](https://shopify.dev/docs/admin-a...%E3%80%8D%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%A7%E3%81%97%E3%81%9F%E3%80%82)  
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について  
頂いたリンク確認いたしました。  
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成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](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」はエラーなくインストールされて、商品作成時にデータを取得できます。  
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

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

---

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [January 13, 2021, 7:53am UTC](https://community.shopify.com/t/topic/30946/4 "2021-01-13T07:53:09Z")

</div>

junichiokamura様

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

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

・リンクについて  
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「[https://shopify.dev/docs/admin-a…」のリンクがページ遷移できませんでした。](https://shopify.dev/docs/admin-a...%E3%80%8D%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%A7%E3%81%97%E3%81%9F%E3%80%82)  
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について  
頂いたリンク確認いたしました。  
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成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](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」はエラーなくインストールされて、商品作成時にデータを取得できます。  
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

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

---

<div class="post-metadata">

**Author:** ![j\_park\_1](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@j\_park\_1](https://community.shopify.com/u/j_park_1)\
**Post date:** [January 13, 2021, 8:51am UTC](https://community.shopify.com/t/topic/30946/5 "2021-01-13T08:51:27Z")

</div>

junichiokamura様

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

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

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

・リンクについて  
「APIでディスカウントコード」に関するリンクを教えていただきましたが、「[https://shopify.dev/docs/admin-a…」のリンクがページ遷移できませんでした。](https://shopify.dev/docs/admin-a...%E3%80%8D%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8C%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%A7%E3%81%97%E3%81%9F%E3%80%82)  
こちら今一度リンクを貼っていただいてもよろしいでしょうか？

・ポイント利用について  
頂いたリンク確認いたしました。  
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成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](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」はエラーなくインストールされて、商品作成時にデータを取得できます。  
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

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

---

<div class="post-metadata">

**Author:** ![j\_park\_1](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@j\_park\_1](https://community.shopify.com/u/j_park_1)\
**Post date:** [January 13, 2021, 9:01am UTC](https://community.shopify.com/t/topic/30946/6 "2021-01-13T09:01:22Z")

</div>

junichiokamura様

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

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

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

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

> 「[https://shopify.dev/docs/admin-a…」](https://shopify.dev/docs/admin-a...%E3%80%8D)

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

・ポイント利用について  
頂いたリンク確認いたしました。  
カート画面にて、「ご購入手続き」ボタン押下、チェックアウト画面に遷移時にチェックアウト作成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](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」はエラーなくインストールされて、商品作成時にデータを取得できます。  
チェックアウトは、別で設定値などあるのでしょうか？また別のプランでないと登録できないのでしょうか。

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

---

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [January 13, 2021, 10:05am UTC](https://community.shopify.com/t/topic/30946/7 "2021-01-13T10:05:41Z")

</div>

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

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

 ![ご返信内容](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/0/0031bff5f2e3082588aa5d62fc009ec3b5030855.jpeg)

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

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [January 13, 2021, 10:46am UTC](https://community.shopify.com/t/topic/30946/8 "2021-01-13T10:46:49Z")

</div>

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

[https://help.shopify.com/ja/manual/discounts/managing-discount-codes](https://help.shopify.com/ja/manual/discounts/managing-discount-codes)

[https://shopify.dev/docs/admin-api/rest/reference/discounts/discountcode](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-extension](https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension)

私の実装のイメージは、

まず、ストアフロント（テーマ側）にだす会員向け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)

[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](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/topic/390170](https://community.shopify.com/topic/390170)

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

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

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

[https://www.shopify.jp/blog/partner-app-store-publishing-guide](https://www.shopify.jp/blog/partner-app-store-publishing-guide)

---

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [January 14, 2021, 6:13am UTC](https://community.shopify.com/t/topic/30946/9 "2021-01-14T06:13:33Z")

</div>

junichiokamura様

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![shira1](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@shira1](https://community.shopify.com/u/shira1)\
**Post date:** [February 5, 2021, 2:57am UTC](https://community.shopify.com/t/topic/30946/10 "2021-02-05T02:57:14Z")

</div>

junichiokamura様

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [February 5, 2021, 3:58am UTC](https://community.shopify.com/t/topic/30946/11 "2021-02-05T03:58:50Z")

</div>

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

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