PCIDSS

目次

1.機能概要
2.本オプション利用におけるショップ管理ツールの変更内容
3.導入手順
4.テンプレートファイルの記述


1.機能概要

本オプションでは、クレジットカード情報を安全に扱うための国際セキュリティ基準「PCI DSS」に準拠した決済連携を行います。

クレジットカードの不正利用被害額が年々増加している中、
クレジット取引セキュリティ対策協議会より「クレジットカード・セキュリティガイドライン」が発表されました。

ガイドラインにおいて、ECサイトには、以下のどちらかを対応するように求められています。
・クレジットカード情報の非保持化
・クレジットカード情報を保持する場合、「PCI DSS」に準拠する

「PCI DSS」の準拠が必要である、詳しい理由については、下記をご覧ください。
https://www.ebisumart.com/blog/pcidss/

本オプションに対応している決済方法は以下の通りです。

決済代行会社名 決済種別
DGフィナンシャルテクノロジー（VeriTrans3G） クレジットカード(都度課金)
GMOペイメントゲートウェイ クレジットカード(都度課金)
りそなPayResort（3Dセキュア対応） クレジットカード(都度課金)

オプション導入にあたってのご留意事項

・店舗様ごとのカスタマイズ内容や利用オプションとの併用可否については、導入時に影響調査が必要です。

・対応しているブラウザは、TLS1.2以上に対応しているブラウザのみです。
　TLS1.1以下のブラウザは、クレジットカードを使用した決済ができません。

・以下の機能は、本オプションと併用できません。
　- ユーザーウェブ多言語対応
　- 見積管理

・マルチドメインで運用している店舗様の場合、
　「クレジットカード情報入力ページ（表示URL：card_input.html）」は1ドメインに統一する必要があります。
　詳細はこちら。

・ASUKA連携併用時は、株式会社アクルへ提出する「設定シート」に、
　「クレジットカード情報入力ページ（表示URL：card_input.html）」のドメインをご記入ください。
　また、本ページの内容とあわせて別途テンプレートの追記、修正が必要となります。
　詳細は、ASUKA連携の導入手順をご参照ください。

PCI DSSの要件で求められる資料をご用意しています。
必要に応じて、フッターにある「PCI DSS資料」というリンクをクリックして、資料をダウンロードしてください。


2.本オプション利用におけるショップ管理ツールの変更内容

本オプションを利用した際、受注登録画面と受注一括アップロードにて、クレジットカードに関する項目が表示されません。
2画面の差異についてご紹介します。



受注新規登録画面

ショップ管理ツールにて、受注を新規登録する際の、クレジットカードに関する項目の表示有無が異なります。

支払い方法にクレジットカードを選択した際、
本オプションを利用しない場合は、クレジットカードに関する項目が表示されますが、
本オプションを利用する場合は、クレジットカードに関する項目が表示されません。

■クレジットカードに関する項目
・お支払い回数
・カード名義
・カード番号
・有効期限

受注登録画面



受注一括アップロード画面

受注一括アップロード画面を表示した際の、クレジットカードに関する項目の表示有無が異なります。

本オプションを利用しない場合は、クレジットカードに関する項目が表示されますが、
本オプションを利用する場合は、クレジットカードに関する項目が表示されません。

■クレジットカードに関する項目
・カード種別
・カード名義
・カード番号
・有効期限
・分割回数

受注一括アップロード画面


3.導入手順

導入手順をご紹介します。
導入手順は必ずデモ環境→本番環境の順に実施してください。



導入手順（デモ環境）

No 担当者 内容
1 店舗様 本オプション利用の申し込みの旨を、弊社担当営業またはサポート窓口までご連絡ください。
機能一覧からの導入相談も受け付けています。
2 弊社 影響確認をします。
3 弊社 PCIDSSアプリを店舗にインストールします。
4 店舗様 テンプレートファイルの記述を参考に、テンプレートファイルを修正してください。
5 店舗様 以下、3つの動作確認をしてください。
※上記テンプレートファイルの修正をしても、今までと動作が変わっていないことをご確認ください。

1.カートフローにて、以下4つの確認をしてください。
　・カートの各画面のデザインが変更されていないこと

　・クレジットカードでの決済ができること

　・注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）⇒「戻る」ボタン押下
　　⇒注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）の遷移ができること

　・注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）⇒「部分変更」リンク押下
　　⇒注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）の遷移ができること

2.【会員クレジットカード情報保存利用時】
　クレジットカード情報登録ページ（member_credit_entry_input.xhtml）にて、以下2つの確認をしてください。
　・画面デザインが変更されていないこと
　
　・クレジットカード情報の登録ができること
6 弊社 本オプションに必要なデータベースなどの設定を行います。
7 店舗様 PCI DSS環境に設置する「クレジットカード情報入力ページ」のテンプレートファイルを作成します。
作成したテンプレートファイルは、すべてユーザーウェブで「card_input.html」として表示されます。

※スマートフォンパッケージやマルチドメインなど、店舗様のご利用状況により、
　作成するテンプレートファイルの命名規則が変わるため、ご注意ください。
8 店舗様 上記手順7で作成したテンプレートファイルを、
「コンテンツ管理 > ファイル管理」の「/WEB-INF/pcidss/」配下に格納してください。
9 店舗様 PCI DSS環境に設置した「クレジットカード情報入力ページ」に遷移するよう、
こちらを参考に、既存のテンプレートファイルを修正してください。

▼変更対象となるテンプレートファイル
　1.cart_seisan.xhtml
　2.member_credit_entry_input.xhtml（※会員クレジットカード情報保存利用時）
　3.member_estimate_order_input.xhtml（※見積管理利用時）

▼新規テンプレートファイル
　5.card_input_pre.xhtml（クレジットカード情報入力画面準備中ページ）

▼テンプレートファイルで読み込んでいるCSSファイル
　6.style.cssなど
10 店舗様 ※該当の店舗様のみご対応ください。

以下いずれかのreCAPTCHA認証を利用している場合は、
カード入力画面PCIDSS環境利用フラグ利用時のreCAPTCHA認証の設定方法をご覧ください。
クレジットカード情報入力ページ（URL：card_input.html）にreCAPTCHA認証を導入する必要があります。

・reCAPTCHA認証（注文情報入力）
・reCAPTCHA認証（カード登録）
11 弊社 上記9、または10までの手順がすべて完了しましたら、弊社サポート窓口へご連絡ください。
本オプションや複数の初期設定を、デモ環境に適用します。
12 店舗様 以下、3つの動作確認をしてください。

1.カートフローにて、以下5つの確認をしてください。
　・クレジットカードでの決済ができること
　
　・注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）⇒「戻る」ボタン押下
　　⇒注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）の遷移ができること
　
　・注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）⇒「部分変更」リンク押下
　　⇒注文情報入力ページ（cart_seisan.xhtml）⇒「入力内容を確認する」ボタン押下
　　⇒注文情報確認ページ（cart_confirm.xhtml）の遷移ができること
　
　・クレジットカード情報が未入力の場合、エラーメッセージが表示されること
　
　・クイック購入を利用している場合、クイック購入ができること

2.【会員クレジットカード情報保存利用時】
　クレジットカード情報登録ページ（member_credit_entry_input.xhtml）にて、
　クレジットカード情報を登録できることを確認してください。
デモ環境への導入が完了しましたら、続けて本番環境への導入を進めます。



導入手順（本番環境）

No 担当者 内容
13 弊社 PCIDSSアプリを本番環境にインストールします。
14 店舗様 導入手順（デモ環境）のNo.4に沿って、本番環境のテンプレートファイルを修正してください。
15 店舗様 導入手順（デモ環境）のNo.5に沿って、本番環境で動作確認を行ってください。
16 弊社 本オプションに必要なデータベースなどの設定を行います。
17 店舗様 導入手順（デモ環境）のNo.7に沿って、テンプレートファイルを作成してください。
18 店舗様 利用するクレジットカード決済の「ユーザーウェブ使用」を「利用しない」に変更、
または「ショップオープンフラグ」を「準備中」に変更してください。

※本番環境への導入途中でクレジットカード決済を進めた場合、注文エラーが発生するため必ず行ってください。
19 弊社 PCI DSS環境に設置する「クレジットカード情報入力ページ」のテンプレートファイルを格納します。
本番環境では導入手順（デモ環境）のNo.8のように、
作成したテンプレートファイルを店舗様で格納することはできません。
弊社で作業を行うため、ご注意ください。
20 店舗様 導入手順（デモ環境）のNo.9に沿って、テンプレートファイルを修正してください。
21 店舗様 導入手順（デモ環境）のNo.10に該当の店舗様のみご対応ください。

導入手順（デモ環境）のNo.10に沿って、
reCAPTCHAの申し込み手続きおよびテンプレートファイルの修正を行ってください。
22 弊社 上記20、または21までの手順がすべて完了しましたら、弊社サポート窓口へご連絡ください。
本オプションや複数の初期設定、バッチなどを本番環境に適用します。
23 店舗様 以下のメールフォーマットを設定してください。

ショップ管理ツール ＞ お店を作る ＞ メールフォーマット登録・照会 ＞ メール種類：PCIDSS 決済連携エラー通知メール

配信する場合は、メール配信区分を「配信」にメールフォーマットを編集してください。
配信しない場合は、メール配信区分を「配信しない」にしてください。
24 店舗様 導入手順（本番環境）のNo.18を元の状態に戻し、対象のクレジットカード決済で注文ができることを確認してください。
対象のクレジットカード決済で注文ができることを確認できたら、本オプションの導入完了です。


4.テンプレートファイルの記述

本オプションを利用するには、各テンプレートファイルに追記、またはテンプレートファイルを追加する必要があります。
追記する内容については最新版テンプレートに記載されておりますが、
店舗様のテンプレートファイルに記載がない場合は、本ページを参考に追記、修正をしてください。



追記するテンプレートファイル
userweb配下のテンプレートファイル
userweb/cart_seisan.xhtml

1.注文情報確認ページ（cart_confirm.xhtml）から注文情報入力ページ（cart_seisan.xhtml）に戻ってきた際に、
　クレジットカード情報を再入力するか選択するチェックボックスを追加してください。 

<table m:id="IF_ALREADY_INPUT_CREDIT">
  <tr>
    <th class="title">クレジットカード情報</th>
    <td>
      <input m:id="CLEAR_CREDIT_INFO_INPUT_HERE" type="checkbox" id="CLEAR_CREDIT_INFO_INPUT" />
      <label m:id="CLEAR_CREDIT_INFO_LABEL_TAG" for="CLEAR_CREDIT_INFO_INPUT">入力内容をクリアし、再度クレジットカード情報を入力する</label>
    </td>
  </tr>
</table>

2.1のチェックボックスがONとなったときに表示するエリアを定義するm:idを追加してください。

        
          <table summary="お支払い情報" m:id="INPUT_CREDIT_INFO_TABLE_TAG">

3.「入力内容を確認する」ボタンを押して、入力されているクレジットカード情報に誤りがある際に、
　エラーメッセージを表示するラベルを追加してください。 

        
<label class="error_color" id="CREDIT_COUNT_ERROR" style="color :red;"></label>
<label class="error_color" id="CREDIT_NAME_ERROR" style="color :red;"></label>
<label class="error_color" id="CREDIT_NO_ERROR" style="color :red;"></label>
<label class="error_color" id="CREDIT_LIMIT_ERROR" style="color :red;"></label>
<label class="error_color" id="SECURITY_CD_ERROR" style="color :red;"></label><br />

例)カード名義に対するエラーメッセージを表示するラベルを追加する場合

<th class="title">カード名義</th>
<td>
   <input m:id='CREDIT_NAME_INPUT_HERE' name="card_name" type="text" size="50" value="" m:autocomplete="off" />
   <label class="error_color" id="CREDIT_NAME_ERROR" style="color :red;"></label>
   <br />例：TARO YAMADA    
</td>

4.注文情報確認ページ（cart_confirm.xhtml）から注文情報入力ページ（cart_seisan.xhtml）に戻ってきた際に、
　入力したクレジットカード情報をラベル（テキスト）で表示するテーブルを追加してください。 

<table m:id='LABEL_CREDIT_INFO_TABLE_TAG'>
  <tr m:id='IF_CREDIT_KAISU'>
    <th class="title">お支払い回数</th>
    <td><span m:id='CREDIT_KAISU_HERE'>一括</span></td>
  </tr>
  <tr>
    <th class="title">カード名義</th>
    <td><span m:id='CREDIT_NAME_HERE'>TARO YAMADA</span></td>
  </tr>
  <tr>
    <th class="title">カード番号</th>
    <td>
      <span m:id='MASKED_CREDIT_NUMBER_HERE'> **** **** **** 1111</span>
    </td>
  </tr>
  <tr>
    <th class="title">有効期限</th>
    <td><span m:id='CREDIT_EXPIRE_MONTH_HERE'>03</span>/<span m:id='CREDIT_EXPIRE_YEAR_HERE'>2011</span></td>
  </tr>
  <tr m:id='IF_CREDIT_SECURITY_CD'>
    <th class="title">セキュリティコード</th>
    <td>***</td>
  </tr>
  <tr m:id='IF_SAVE_CARD_FLG'>
    <th class="title">カードの登録</th>
    <td>注文後このカードを保存します</td>
  </tr>
</table>


userweb/cart_confirm.xhtml

1.m:id='SECURITY_CODE_HERE'が挿入されているタグを「***」に置き換えてください。
　SECURITY_CODE_HEREを利用してセキュリティコードを画面上に表示できないため、修正する必要があります。 

<tr m:id='IF_KESSAI_CREDIT_SECURITY_CD'>
  <th class="title">セキュリティコード</th>
  <td>***</td>
</tr>

userweb/member_credit_entry_input.xhtml（※会員クレジットカード情報保存利用時）

1.入力されているクレジットカード情報に誤りがある際に、エラーメッセージを表示するラベルを追加してください。

            
                <label class="error_color" id="CREDIT_NAME_ERROR" style="color:red;"></label>
                <label class="error_color" id="CREDIT_NO_ERROR" style="color:red;"></label>
                <label class="error_color" id="CREDIT_LIMIT_ERROR" style="color:red;"></label>
                <label class="error_color" id="SECURITY_CD_ERROR" style="color:red;"></label>

例）カード名義に対するエラーメッセージを表示するラベルを追加する場合

<tr>
	<th class="title">カード名義</th>
	<td>
		<input type="text" m:id='CREDIT_NAME_INPUT_HERE' m:autocomplete="off" />
		<label class="error_color" id="CREDIT_NAME_ERROR" style="color:red;"></label>
	</td>
</tr>


smartphoneフォルダ配下のテンプレートファイル
smartphone/cart_seisan.xhtml

1.注文情報確認ページ（cart_confirm.xhtml）から注文情報入力ページ（cart_seisan.xhtml）に戻ってきた際に、
　クレジットカード情報を再入力するか選択するチェックボックスを追加してください。

<div class="sentence" m:id="IF_ALREADY_INPUT_CREDIT">
  <input m:id="CLEAR_CREDIT_INFO_INPUT_HERE" type="checkbox" id="CLEAR_CREDIT_INFO_INPUT" />
  <label m:id="CLEAR_CREDIT_INFO_LABEL_TAG" for="CLEAR_CREDIT_INFO_INPUT">入力内容をクリアし、再度クレジットカード情報を入力する</label>
</div>

2.1のチェックボックスがONとなったときに表示するエリアを定義するm:idを追加してください。
　クレジットカード情報の記入欄を、<div m:id="INPUT_CREDIT_INFO_TABLE_TAG"></div>で囲んでください。 

<div m:id="INPUT_CREDIT_INFO_TABLE_TAG">
	<div m:id='IF_CREDIT_KAISU'>
	<h4>お支払い回数</h4>
...
	</div>
</div>

3.「入力内容を確認する」ボタンを押して、入力されているクレジットカード情報に誤りがある際に、
　エラーメッセージを表示するラベルを追加してください。

            
              <label class="error_color" id="CREDIT_COUNT_ERROR" style="color :red;"></label>
              <label class="error_color" id="CREDIT_NAME_ERROR" style="color :red;"></label>
              <label class="error_color" id="CREDIT_NO_ERROR" style="color :red;"></label>
              <label class="error_color" id="CREDIT_LIMIT_ERROR" style="color :red;"></label>
              <label class="error_color" id="SECURITY_CD_ERROR" style="color :red;"></label>

例)カード名義に対するエラーメッセージを表示するラベルを追加する場合

<h4><span m:id="IF_SAVED_CARD">新規</span>カード名義</h4>
<div class="sentence">
  <input m:id='CREDIT_NAME_INPUT_HERE' type="text" m:autocomplete="off" />
  <label class="error_color" id="CREDIT_NAME_ERROR" style="color :red;"></label>
  <p class="form_attention">例：TARO YAMADA</p>
</div>

4.注文情報確認ページ（cart_confirm.xhtml）から注文情報入力ページ（cart_seisan.xhtml）に戻ってきた際に、
　入力したクレジットカード情報をラベル（テキスト）で表示するテーブルを追加してください。

<div m:id='LABEL_CREDIT_INFO_TABLE_TAG'>
	<div m:id='IF_CREDIT_KAISU'>
		  <h4>お支払い回数</h4>
		<div class="sentence">
			<p><span m:id='CREDIT_KAISU_HERE'>一括</span></p>
		</div>
	</div>
	<div m:id='IF_CREDIT_SECURITY_CD'>
		<h4>セキュリティコード</h4>
		<div class="sentence">
			<p>***</p>
		</div>
	</div>
	<div>
		<h4>カード名義</h4>
		<div class="sentence">
			<p><span m:id='CREDIT_NAME_HERE'>TARO YAMADA</span></p>
		</div>
	</div>
	<div>
		<h4>カード番号</h4>
		<div class="sentence">
			<p>
				<span m:id='MASKED_CREDIT_NUMBER_HERE'>************1111</span>
			</p>
		</div>
	</div>
	<div>
		<h4>有効期限</h4>
		<div class="sentence">
			<p><span m:id='CREDIT_EXPIRE_MONTH_HERE'>03</span>/<span m:id='CREDIT_EXPIRE_YEAR_HERE'>2011</span></p>
		</div>
	</div>
		
	<div m:id='IF_SAVE_CARD_FLG'>
		<h4>カードの登録</h4>
		<div class="sentence">注文後このカードを保存します</div>
	</div>
</div>


smartphone/cart_confirm.xhtml

1.m:id='SECURITY_CODE_HERE'が挿入されているタグを「***」に置き換えてください。
　SECURITY_CODE_HEREを利用してセキュリティコードを画面上に表示できないため、修正する必要があります。 

<tr m:id='IF_KESSAI_CREDIT_SECURITY_CD'>
  <th class="title">セキュリティコード</th>
  <td>***</td>
</tr>


smartphone/member_credit_entry_input.xhtml（※会員クレジットカード情報保存利用時）

1.入力されているクレジットカード情報に誤りがある際に、エラーメッセージを表示するラベルを追加してください。

            
              <label class="error_color" id="CREDIT_NAME_ERROR" style="color:red;"></label>
              <label class="error_color" id="CREDIT_NO_ERROR" style="color:red;"></label>
              <label class="error_color" id="CREDIT_LIMIT_ERROR" style="color:red;"></label>
              <label class="error_color" id="SECURITY_CD_ERROR" style="color:red;"></label><br />

例）カード名義に対するエラーメッセージを表示するラベルを追加する場合

<h4>カード名義</h4>
<div class="sentence">
  <p><input type="text" m:id='CREDIT_NAME_INPUT_HERE' m:autocomplete="off" /></p>
  <label class="error_color" id="CREDIT_NAME_ERROR" style="color:red;"></label>
</div>

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

閲覧履歴