Shopifyで決済方法（支払い方法）を非表示にする方法を考察
はじめに
今回は、Shopify で決済方法（支払い方法）を非表示にする方法を考察してみました。
メタフィールドを利用する方法や、Shopify の Function を利用する方法について調べました。
それでは、頑張っていきましょう。
決済方法の非表示の定義
まずは、決済方法の非表示の定義からです。
決済方法の非表示とは、顧客がチェックアウト時に選択できる支払いオプションの中から特定の決済方法を除外することを指します。これにより、特定の条件に基づいて顧客に提供する決済オプションを制限し、ビジネスニーズに応じた柔軟な支払い体験を提供することが可能になります。
具体的に書くと、合計金額が 3000 円未満のお客様に代引き決済を非表示にしたり、特定のタグを持つ顧客に特定の決済方法のみを表示させる、等を指します。
決済方法を非表示にするメリット
次に、決済方法を非表示にするメリットについてです。
決済方法を非表示にするうえで、ある程度のメリットが必要ですからね。
1. 地域や国に基づく制限
特定の国や地域では利用できない決済方法を非表示にすることで、顧客の混乱を防ぎ、スムーズなチェックアウトプロセスを提供できます。
2. キャンペーンやプロモーションの一環
特定の期間中にのみ利用可能な支払い方法を制限することで、特定のキャンペーンやプロモーションの効果を高めることができます。
3. カスタマーエクスペリエンスの向上
顧客に対して利用可能な決済方法を整理し、わかりやすい支払いオプションを提供することで、カスタマーエクスペリエンスを向上させることができます。
決済方法の非表示の実装方法
それではここから、決済方法の非表示方法について考察していきます。
Shopify の公式ドキュメントから、方法を模索していきましょう。
恐らく、Shopify の Function APIs を用いれば実装できると思うので、以下のドキュメントを確認します。
下記が、Shopify の Functions API の一覧です。
Shopify の Functions API について、ざっくりと解説します。
Shopifyの拡張機能API解説
Shopifyは、オンラインストアの機能を拡張するためのさまざまなAPIを提供しています。これらのAPIを利用することで、カートやチェックアウトのプロセスをカスタマイズし、顧客体験を向上させることができます。以下に、主要な拡張機能APIとその機能について詳しく解説します。
Delivery Customization API
説明: チェックアウト時に利用可能な配送オプションの名前変更、並べ替え、ソートを行うAPIです。
拡張ターゲット: purchase.delivery-customization.run
マーチャントインターフェース: Embedded app pages
Order Discount API
説明: カート内のすべての商品に適用される新しい種類の割引を作成するAPIです。
拡張ターゲット: purchase.order-discount.run
マーチャントインターフェース: Embedded app pages
Product Discount API
説明: カート内の特定の商品または商品バリアントに適用される新しい種類の割引を作成するAPIです。
拡張ターゲット: purchase.product-discount.run
マーチャントインターフェース: Embedded app pages
Shipping Discount API
説明: チェックアウト時に1つ以上の配送料金に適用される新しい種類の割引を作成するAPIです。
拡張ターゲット: purchase.shipping-discount.run
マーチャントインターフェース: Embedded app pages
Payment Customization API
説明: チェックアウト時に利用可能な支払い方法の名前変更、並べ替え、ソートを行うAPIです。
拡張ターゲット: purchase.payment-customization.run
マーチャントインターフェース: Embedded app pages
Cart Transform API
説明: カート内のラインアイテムを拡張し、ラインアイテムの表示を更新するAPIです。
拡張ターゲット: purchase.cart-transform.run
マーチャントインターフェース: なし
Cart and Checkout Validation API
説明: カートおよびチェックアウトの独自のバリデーションを提供するAPIです。
拡張ターゲット: purchase.validation.run
マーチャントインターフェース: Admin UI extensions
Fulfillment Constraints API
説明: 注文のフルフィルメントおよび割り当て方法に関する独自のロジックを提供するAPIです。
拡張ターゲット: purchase.fulfillment-constraint-rule.run
マーチャントインターフェース: なし
Local Pickup Delivery Option Generator API
説明: チェックアウト時に利用可能なカスタムのローカルピックアップオプションを生成するAPIです。
拡張ターゲット: purchase.local-pickup-delivery-option-generator.run
マーチャントインターフェース: なし
Pickup Point Delivery Option Generator API
説明: チェックアウト時に利用可能なカスタムのピックアップポイントオプションを生成するAPIです。
拡張ターゲット: purchase.pickup-point-delivery-option-generator.run
マーチャントインターフェース: なし
上記の内、Payment customization APIを用いれば、決済方法の非表示を実装できそうです。
次は、こちらのPayment customization APIについてドキュメントを見ていきましょう。
Payment Customization API について
以下の記事が参考になりました。
それでは、以下の公式ドキュメントを見ていきましょう。
以下に、こちらのドキュメントの情報をざっくりとまとめます。
Shopify Payment Customization APIの概要
ShopifyのPayment Customization APIは、チェックアウト時に表示される支払い方法をリネーム、並べ替え、ソートするための強力なツールです。このAPIを利用することで、ユーザーのニーズやビジネス要件に合わせた柔軟な支払いオプションのカスタマイズが可能になります。
具体的な利用例
Payment Customization APIを使用することで、以下のようなカスタマイズが可能です：
-
カート合計金額に基づく支払い方法の非表示
- 一定の金額以上または以下のカートに対して特定の支払い方法を非表示にする。
-
ユーザーの好みに応じた支払い方法の並べ替え
- 顧客の利用頻度や好みに応じて支払い方法を並べ替える。
-
顧客タグや国に基づく支払い方法の非表示
- 特定の顧客タグや居住国に基づいて支払い方法を制限する。
開発者向けツールとリソース
-
Shopify CLI
- Shopifyアプリの構築に使用するコマンドラインツールです。
-
Payment Customization APIリファレンス
- Payment Customization APIに関するGraphQLリファレンスを参照して、詳細なAPIの使用方法を確認できます。
スクリプトから関数への移行
既存の支払いスクリプトをShopify Functionsに移行する場合、以下のマッピングを利用できます：
| Shopify Scriptsメソッド | 説明 | Shopify Functionsオブジェクト | 追加情報 |
|---|---|---|---|
| change_name | 支払いオプションの名前を変更する | RenameOperation | |
| sort | 支払いオプションを並べ替える | MoveOperation | 並べ替えの代わりに個々の支払い方法を移動可能 |
| delete_if | 支払いオプションをチェックアウトから削除する | HideOperation |
制限事項と考慮事項
-
プランおよび地理的制限
- 使用にはプランおよび地域に応じた制限が適用されます。詳細は公式サイトで確認してください。
-
機能制限
- Payment Customization APIの使用が制限されている場合でも、関数入力にはすべての支払い方法が含まれますが、制限対象の支払い方法をターゲットとする操作はチェックアウトで反映されません。
- 現在、ドラフト注文には対応していません。
- Shop Pay、Apple Pay、Google Payなど、ロゴが名前になっている支払い方法はリネームできません。これにはすべてのウォレットが含まれます。
- ウォレットはチェックアウトのエクスプレスや支払い方法セクションから削除できますが、並べ替えることはできません。
ここまでで、なんとなくPayment Customization Function APIについて理解できたかと思います。
ここからは、決済方法の非表示を行うための具体的なコードを見ていきましょう。
決済方法の非表示を行う際の具体的なコード
それでは、決済方法の非表示を行う具体的なコードを見ていきましょう。
以下のドキュメントを調査していきましょう。
input.graphqlのサンプルです。
query Input {
cart {
cost {
subtotalAmount {
amount
currencyCode
}
}
}
paymentMethods {
id
}
}
上記のサンプルにある通り、paymentMethodsのidを取得できます。
また、output.jsonのサンプルも記載が有りました。
{
"operations": {
"hide": {
"paymentMethodId": "gid://shopify/PaymentCustomizationPaymentMethod/1"
}
}
}
上記のドキュメントにある通り、operationsのhideに該当のpaymentMethodsのidを渡せば、任意の決済方法の非表示が行えそうです。
恐らく、Payment Customization のオブジェクトのメタフィールドに値を渡せば、input.graphqlから取得できるので、その値を利用して条件に一致する paymentMethodsのidを渡すだけで実装できそうですね。
Payment Customization のオブジェクトのメタフィールドは、Shopify の管理画面から更新することができないので、metafieldSet の Graphql API を利用する必要が有るかと思います。
mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
metafieldsSet(metafields: $metafields) {
metafields {
key
namespace
value
createdAt
updatedAt
}
userErrors {
field
message
code
}
}
}
ここまでで、Shopify で決済方法の非表示を行う方法の解説は終了です
後は、カスタムアプリを使って Function API を実装して、Payment Customization オブジェクトのメタフィールドに値を入れていけば実装できます。
しかし、非エンジニアの方には難しいかと思いますので、念のためShopifyアプリで決済方法の非表示を行う方法も紹介します。
Shopify アプリを使って決済方法を非表示にする方法
それでは、Shopify アプリを使って決済方法を非表示にする方法を紹介します。
今回紹介するのは、シンプル決済カスタマイズ｜お手軽条件ごとの決済方法というアプリです。
以下の記事を参考にしています。
以下が、Shopify 公式のアプリストアです。
それでは、こちらのアプリについて紹介していきます。
シンプル決済カスタマイズ｜お手軽条件ごとの決済方法の機能について
シンプル決済カスタマイズ｜お手軽条件ごとの決済方法は、様々な条件で決済方法の非表示を行えるアプリです。
条件を満たす場合に、指定した決済方法が非表示になります。
お買い物金額の合計や、これまでのお買い物累計金額、お買い物累計回数や特定の顧客タグを含む・含まない、特定の商品を含む・含まないなど、様々な条件での決済方法の非表示を行えます。
恐らく、実装としては Shopify アプリの管理画面で設定した値を Payment Customization オブジェクトのメタフィールドに持っておいて、それをrun.graphql内で使用していると思われます。
かなり明快で使いやすいので、カスタムアプリを自作するのが難しい場合は選択肢の一つに入ってくるかと思います。
最後に
今回は、カスタムアプリを作成して Shopify の決済方法の非表示を行う方法と、Shopify の決済方法非表示アプリを用いる方法の二つを紹介しました。
お疲れさまでした。
Discussion