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

目次

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


1.機能概要

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

カード入力画面PCIDSS環境利用フラグと、以下いずれかのreCAPTCHA認証を利用する店舗様は、
クレジットカード情報入力ページ(URL:card_input.html)に、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_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 など


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
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に準拠した環境(サーバ)に配置します。

当ページの記載内容は、標準機能に関するものです。
機能に関するカスタマイズをされている場合にはこの限りではありません。