カード入力画面PCIDSS環境利用フラグ利用時のreCAPTCHA認証の設定方法

目次

1.機能概要
2.導入手順


1.機能概要

カード入力画面PCIDSS環境利用フラグを利用すると、
ユーザーは、クレジットカード情報入力ページ（URL：card_input.html）でクレジットカード情報を登録します。

カード入力画面PCIDSS環境利用フラグと、以下いずれかのreCAPTCHA認証を利用する店舗様は、
クレジットカード情報入力ページ（URL：card_input.html）に、reCAPTCHA認証を導入する必要があります。

・reCAPTCHA認証（注文情報入力）
・reCAPTCHA認証（カード登録）
・reCAPTCHA認証（定期注文情報変更）

本ページでは、クレジットカード情報入力ページ（URL：card_input.html）に、reCAPTCHA認証を導入する手順についてご紹介します。


2.導入手順

以下の順で、対応してください。

1.Google社提供のreCAPTCHAお申込みサイトにて登録
2.クレジットカード情報入力ページに追記
3.修正したテンプレートファイルを反映（店舗様でテンプレートファイルを修正した場合のみ）


1.Google社提供のreCAPTCHAお申込みサイトにて登録

クレジットカード情報入力ページのドメインとして、
「securecard.jp（デモ環境：demo.securecard.jp）」など、サービスURLのサブドメイン以外を利用している店舗様のみ
本項目を実施してください。


Google社提供のreCAPTCHAお申込みサイトにて、ご希望のreCAPTCHAタイプを選択し、登録してください。

2.クレジットカード情報入力ページに追記

店舗様側でクレジットカード情報入力ページ（URL：card_input.html）のテンプレートファイルを作成する場合のみ、
本項目を実施してください。

弊社にテンプレートファイルの編集を依頼する場合は、サポート窓口までご連絡ください。


利用しているreCAPTCHA認証のバージョンを確認し、以下をクレジットカード情報入力ページ（URL：card_input.html）に追記してください。

対象のファイルは、店舗様によって異なります。
カード入力画面PCIDSS環境利用フラグの導入手順にあるテンプレートファイルの作成を実施した際に、
作成したテンプレートファイルのうち、利用しているreCAPTCHA認証に対応しているテンプレートファイルに追記してください。

利用しているreCAPTCHA認証 追記対象のテンプレートファイル
reCAPTCHA認証（注文情報入力） 「cart_confirm」が先頭にあるテンプレートファイル
例）cart_confirm.html、cart_confirm_1.html、cart_confirm_2_smartphone.html　など
reCAPTCHA認証（カード登録） 「member_credit_entry」が先頭にあるテンプレートファイル
例）member_credit_entry.html、member_credit_entry_1.html、
　　member_credit_entry_2_smartphone.html　など
reCAPTCHA認証（定期注文情報変更）
※定期販売オプション利用時のみ 		「teiki_renew」が先頭にあるテンプレートファイル
例）teiki_renew.html、teiki_renew_1.html、teiki_renew_2_smartphone.html　など


v2を利用している場合

<form></from>内に、以下を記載してください。

「サイトキー」には
1.Google社提供のreCAPTCHAお申込みサイトにて登録 を実施した場合は、このときに登録された「サイトキー」、
実施していない場合は、初期設定「reCAPTCHA設定SiteKey」に登録している値を記載してください。 

		
<div id="reCAPTCHA">
 <div>
  <script src="https://www.google.com/recaptcha/api.js"></script>
  <div class="g-recaptcha" data-sitekey="サイトキー" data-size="compact"></div>
 </div>
</div>


v3を利用している場合

<form></from>内に、以下を記載してください。

「サイトキー」には
1.Google社提供のreCAPTCHAお申込みサイトにて登録 を実施した場合は、このときに登録された「サイトキー」、
実施していない場合は、初期設定「reCAPTCHA設定SiteKey（v3用）」に登録している値を記載してください。

「テンプレートファイル名」には、記載するテンプレートファイルの「.html」より前のファイル名を記載してください。
以下は例です。作成したテンプレートファイルに合わせて、記載してください。

テンプレートファイル 記載する内容
cart_confirm.html cart_confirm
member_credit_entry_1.html member_credit_entry_1
teiki_renew_1_smartphone.html teiki_renew_1_smartphone 
		
<div id="reCAPTCHA">
 <div>
  <!-- v3使用時 -->
  <script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
  <script type="text/javascript">
   //<![CDATA[
   eb$(function(){
    grc();
    // reCAPTCHA 2分間隔でトークン再取得
    setInterval(grc, 2 * 60 * 1000);

    function grc(){
     grecaptcha.ready(function() {
      grecaptcha.execute('サイトキー', {action:'/テンプレートファイル名'}).then(function(token) {
       eb$('#googleRecaptchaToken').val(token);
      });
     });
    }
   });
   //]]>
  </script>
  <input type="hidden" name="googleRecaptchaToken" id="googleRecaptchaToken" value="">
 </div>
</div>



3.修正したテンプレートファイルを反映（店舗様でテンプレートファイルを修正した場合のみ）

テンプレートファイルの追記完了後、本番環境とデモ環境とで対応内容が異なります。

デモ環境の場合

「コンテンツ管理 > ファイル管理」の「/WEB-INF/pcidss/」配下に、テンプレートファイルを追加してください。


本番環境の場合

弊社に修正したテンプレートファイルを共有してください。
弊社にてテンプレートファイルをPCI DSSに準拠した環境（サーバ）に配置します。