カード入力画面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お申込みサイトにて登録

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

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

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

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

利用しているreCAPTCHA認証	追記対象のテンプレートファイル
reCAPTCHA認証（注文情報入力）	「cart_confirm」が先頭にあるテンプレートファイル 例）cart_confirm.html、cart_confirm_1_ja.html、cart_confirm_2_en_smartphone.html　など
	「member_estimate_order」が先頭にあるテンプレートファイル（見積管理オプション利用時のみ） 例）member_estimate_order.html、member_estimate_order_1_ja.html、 　　member_estimate_order_2_en_smartphone.html　など
reCAPTCHA認証（カード登録）	「member_credit_entry」が先頭にあるテンプレートファイル 例）member_credit_entry.html、member_credit_entry_1_ja.html、 　　member_credit_entry_2_en_smartphone.html　など
reCAPTCHA認証（定期注文情報変更） ※定期販売オプション利用時のみ	「teiki_renew」が先頭にあるテンプレートファイル 例）teiki_renew.html、teiki_renew_1_ja.html、teiki_renew_2_en_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_ja_smartphone.html	teiki_renew_ja_smartphone
cart_confirm_2_en_smartphone.html	cart_confirm_2_en_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に準拠した環境（サーバ）に配置します。