サムネイル

Shopify ストアの決済方法(支払い方法)を条件に応じて非表示にするカスタマイズ方法を徹底解説!

目次

はじめに

今回の記事では、Shopify ストアの決済方法(支払い方法)カスタマイズについてや Shopify ストアの決済方法(支払い方法)を条件に応じて非表示にするカスタマイズ方法を解説します。

参考記事

Shopify ストアの決済方法(支払い方法)カスタマイズについて

Shopify ストアの決済方法(支払い方法)カスタマイズとは、顧客に表示される決済オプションを調整できる機能です。決済方法(支払い方法)の並び順、表示・非表示、決済方法名を条件に応じてカスタマイズすることができます。

要件として、 Shopify ストアの決済方法(支払い方法)をカスタマイズ(表示・非表示など)するには、ベーシックプラン、スタンダード、プレミアム、Plus のいずれかのプランを契約する必要があります。

決済方法(支払い方法)を条件に応じて非表示にするメリット

トラブルを未然に防ぐことができる

特定の商品に対して適切な決済方法を提供することで、購入プロセスを最適化し、トラブルを未然に防ぐことが可能です。例えば、高価な商品には分割払いを推奨するなど、商品特性に合った決済方法を提示できます。

支払いリスクを最小限に抑えることができる

注文金額に応じて決済方法を制限することで、高額な取引に適した決済方法を選択させ、支払いリスクを最小限に抑えることができます。例えば、少額の購入には手数料の低い決済方法を、大口注文には信頼性の高い決済方法を設定することが可能です。

地域や国に基づく制限ができる

地域や国によって利用可能な決済方法を制限することで、顧客が使用できない支払い方法を非表示にし、チェックアウトプロセスをスムーズに進行させます。これにより、地域ごとの規制や通貨に対応しやすくなり、トラブルを避けることができます。

カスタマーエクスペリエンスを向上できる

顧客にとって利用可能な決済方法を整理し、わかりやすい支払いオプションを提供することで、カスタマーエクスペリエンスが向上します。複雑な選択肢を排除し、簡単でストレスのない購入体験を提供することができます。

キャンペーンやプロモーションの効果を最大化できる

特定のキャンペーンやプロモーションに合わせて決済方法を変更することで、販売戦略を強化できます。例えば、特定の期間中に特定の決済方法のみを利用可能にすることで、プロモーションの効果を最大化できます。

決済方法(支払い方法)を条件に応じて非表示にする方法

決済方法(支払い方法)を条件に応じて非表示にする方法は、「決済方法(支払い方法)を非表示にできる Shopify アプリをインストールする」方法と「Shopify Plus を契約して決済方法(支払い方法)を非表示にできるカスタムアプリを作成する」方法の 2 パターンがあります。

決済方法(支払い方法)を非表示にできる Shopify アプリをインストールする

決済方法(支払い方法)を条件に応じて非表示にするために、Shopify アプリをインストールする方法があります。この方法は、コードの編集やプログラミングの知識を必要とすることなく、決済方法(支払い方法)を非表示にすることができます。普段、プログラミングをされていない方におすすめの方法です。

以下の手順で決済方法(支払い方法)を非表示にします。

  1. 決済方法(支払い方法)を非表示できるアプリのインストール
  2. 決済方法(支払い方法)を非表示できるアプリの設定

今回は、「シンプル決済カスタマイズ|お手軽条件ごとの決済方法」を使用して決済方法(支払い方法)を非表示にします。
シンプル決済カスタマイズ|お手軽条件ごとの決済方法

1. 決済方法(支払い方法)をカスタマイズできるアプリのインストール

Shopify App Store から「シンプル決済カスタマイズ|お手軽条件ごとの決済方法」をインストールします。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法をインストール

Shopify ストアでアプリのインストールポップアップが表示されるので、「インストール」ボタンをクリックします。
インストールボタンをクリック

以下の画面が表示されれば、アプリのインストールは完了です。
アプリのインストールは完了

2. 決済方法(支払い方法)を非表示できるアプリの設定

「Shopify で指定した条件下で特定の決済方法を非表示にできるアプリについて徹底解説|ご利用ガイド」を参考にアプリの設定を行います。

「決済カスタマイズ設定を追加」をクリックします。

「決済カスタマイズ設定を追加」をクリック

決済方法(支払い方法)非表示の設定名を入力します。

決済方法(支払い方法)非表示の設定名を入力

決済方法(支払い方法)を非表示にする条件を設定します。

決済方法(支払い方法)を非表示にする条件は、特定の商品、顧客タグ、注文金額、注文累計額、注文累計回数があるので、ストアにあった条件を設定してください。

決済方法(支払い方法)を非表示にする条件を設定

非表示にする決済方法(支払い方法)を選択します。

非表示にする決済方法(支払い方法)を選択

非表示にする決済方法(支払い方法)の表示

保存すると決済カスタマイズ設定管理に、決済方法(支払い方法)非表示設定が追加されます。

非表示設定一覧

決済方法(支払い方法)を非表示できるアプリの設定は完了です。

Shopify Plus を契約して決済方法(支払い方法)を非表示にできるカスタムアプリを作成する

Shopify Plus を契約している方は、クレジットカードの表示・非表示を直接カスタマイズする追加機能を利用できます。しかし、特定の商品や顧客タグなどの条件をつけて表示・非表示をすることができません。

特定の条件に応じて、決済方法(支払い方法)を非表示にするには、カスタムアプリを作成する必要があります。

カスタムアプリの作成は、Shopify の知識やプログラミングの知識が必要なため、普段、プログラミングをされていない方にはおすすめしません。

カスタムアプリの作成

公式ドキュメントを参考にカスタムアプリを作成します。

カスタムアプリの機能作成

Shopify から提供されている、Payment Customization API を使用して、機能を作成する必要があります。

Payment Customization API についての詳細は下記の記事をご覧ください。

Payment Customization API を使用した extensions を作成します。

extensions のファイルを作成できたら、各ファイルを条件によって決済方法(支払い方法)を非表示できるよう編集します。

公式ドキュメントの例)

input.graphql

query Input {
  cart {
    cost {
      subtotalAmount {
        amount
        currencyCode
      }
    }
  }
  paymentMethods {
    id
  }
}

output.json

{
  "operations": {
    "hide": {
      "paymentMethodId": "gid://shopify/PaymentCustomizationPaymentMethod/1"
    }
  }
}

extensions の実装が完了したら、Vercel や Heroku にアプリをデプロイします。

アプリとストアを紐づければ実装完了です。

まとめ

今回の記事では、Shopify ストアの決済方法(支払い方法)カスタマイズについてや Shopify ストアの決済方法(支払い方法)を条件に応じて非表示にするカスタマイズ方法を解説しました。現状、Shopify アプリをインストールする方法がベストプラクティスかと思います。

「シンプル決済カスタマイズ|お手軽条件ごとの決済方法」を使用して決済方法(支払い方法)を非表示にします。
シンプル決済カスタマイズ|お手軽条件ごとの決済方法

参考記事

おすすめ Shopify アプリ

シンプル関連商品レコメンド|よく一緒に購入されている商品のアイコン

シンプル関連商品レコメンド|よく一緒に購入されている商品

インストール

関連商品を一覧からまとめて設定。買い手はセットをワンクリックでカートに入れられます。

シンプル税込税抜併記|消費税込み・税別表示・軽減税率にも対応のアイコン

シンプル税込税抜併記|消費税込み・税別表示・軽減税率にも対応

商品価格に、税込と税抜のもう一方を並べて表示できます。軽減税率が混ざるお店でも、商品ごとに正しく計算します。

シンプル原産国表示|お手軽製造国・原産地ラベルのアイコン

シンプル原産国表示|お手軽製造国・原産地ラベル

商品ごとの原産国を、国旗つきのバッジで商品ページに表示できます。国はリストから選ぶだけなので表記ゆれもありません。

シンプル商品単価表示|お手軽単位価格表示のアイコン

シンプル商品単価表示|お手軽単位価格表示

「100gあたりいくら?」を、販売する国ごとに見慣れた単位で表示できます。商品ページ・商品カード・カートで、お客様が価格を比べやすくなります。

シンプル追従電話ボタン|お手軽お問い合わせ・電話サポートのアイコン

シンプル追従電話ボタン|お手軽お問い合わせ・電話サポート

電話・LINE・WhatsAppのボタンをストアの全ページに置けます。「買う前にちょっと聞きたい」お客様をそのまま逃しません。

シンプルメガメニュー|お手軽ヘッダー階層ナビゲーションのアイコン

シンプルメガメニュー|お手軽ヘッダー階層ナビゲーション

画像つきの複数カラムのドロップダウンナビゲーションを、コードに触れずに作成・編集できます。

シンプル商品画像透かし|お手軽ウォーターマークのアイコン

シンプル商品画像透かし|お手軽ウォーターマーク

商品画像にロゴやテキストの透かしを焼き込み、どこに転載されても出どころが分かるようにします。

シンプルマイページバナー|お手軽顧客アカウント画像のアイコン

シンプルマイページバナー|お手軽顧客アカウント画像

顧客アカウントページにバナーを表示。画像をアップロードして URL を貼るだけで表示されます。

関連記事