Stripeによるクレジットカード決済、Apple Pay、Google Payの設定

CS-Cartでクレジットカード決済を行う場合、オンライン決済サービスのStripeを使った設定を行うのが簡単です。

Stripeを設定することで、クレジットカード決済だけでなく、Apple PayやGoogle Payの設定も行えます。

ただし、Apple Payについては、Apple端末のSafariユーザーのみが使え、Google Payは、Google Chromeユーザーのみで、クレジットカードがGoogleアカウントにリンクされている場合のみ使えます。

また、事前にStripeとの契約を行ってアカウントを開設しておいてください。

Stripeの設定方法

「アドオン」メニューから「アドオンの管理」をクリック。

Stripe決済
Stripe決済

アドオン画面で「Stripe決済」の「インストール」ボタンをクリックして、Add-on(アドオン)をインストールをします。

次に、上部にある「一般設定」メニューから「支払方法」をクリック。

支払方法
支払方法

Stripeは存在しないので、右上の「+」をクリック。

クレジットカード決済の設定

Stripeで、クレジットカード決済を行っていきます。

Stripeによるクレジットカード決済
Stripeによるクレジットカード決済

支払方法の追加画面で、以下の項目を設定します。

  • 名前(必須):クレジットカード
  • 決済代行業者:Stripe
  • ユーザーグループ:全て、ゲスト、会員登録済のお客様、の中で決済を許可したいもののチェックボックスにチェック。
  • 説明:ブランクで問題ありません。
  • 手数料:銀行振込に対して手数料を設定をしない限りブランクで問題ありません。
  • 手数料名:空欄にすると「支払手数料」と表示されます。
  • 税金:入力はできません。
  • お支払いについて:ブランクで問題ありません。
  • ステータス:表示を有効にするか無効にするかを選択。
  • アイコン:ユーザーが支払方法を選択をするボタンに、画像を表示することができます。

決済代行業者でStripeを選択すると、「カスタマイズ」タブが表示されます。

カスタマイズ
カスタマイズ

「カスタマイズ」での設定項目は、以下のようなStripe管理画面の情報を入れて設定を行います。

Stripe管理画面
Stripe管理画面
  • 公開可能キー:pk_liveから始まるStripe管理画面に表示される公開可能キーを入力します。テストの段階ではテストAPIキーの公開可能キーを、本番では本番APIキーの公開可能キーを入力します。
  • シークレットキー:sk_liveから始まるStripe管理画面に表示される公開可能キーを入力します。テストの段階ではテストAPIキーのシークレットキーを、本番では本番APIキーのシークレットキーを入力します。
  • Stripeアカウントの国Stripeアカウントを作成した国を選択します。
  • 通貨Stripeアカウントの通貨を選択します。CS-CartやMulti-Verdorで設定した通貨が選択できます。
  • 支払いタイプ:支払タイプを選択します。
    Apple Payや Google Pay を選択した場合には、対応機種以外では表示されません。ここでの選択は次のとおりです。
    • クレジットカード
    • Apple Pay
    • Google Pay

ここでは、クレジットカード決済の設定ですのでクレジットカードを選択して「登録」ボタンをクリックします。

Apple PayとGoogle Payの設定

Apple Payの設定を行う場合には、「カスタイマイズの」支払いタイプをApple Payに変更し、Google Payの設定を行う場合には、「カスタイマイズの」支払いタイプをGoogle Payに変更します。

Apple Pay
Apple Pay
Google Pay
Google Pay
  • 商品ページに “Buy with Apple Pay” を表示:支払タイプに Apple Pay を選択した場合のみ表示されます。
  • 商品ページに “Buy with Google Pay” を表示:支払タイプに Google Pay を選択した場合のみ表示されます。

Apple Payボタンは、Apple端末のSafariにのみ表示され、クレジットカードがGoogleアカウントにリンクされている場合、GooglePayボタンはGoogle Chromeにのみ表示されます。

Apple PayやGoogle Payでは、支払方法選択時に正しいアイコンを追加する必要があり、「カスタマイズ」にApple PayやGoogle Payのアイコンが用意されています。

AppleとGoogleはどちらも、アイコンが少なくともストア内の他の支払方法アイコンと同じくらい目立つように表示されることを要求しています。