注文情報入力ページクレジットカード情報表示制御 | サポートサイト

本文サンプル(テキスト)
<div m:id='IF_CREDIT'> <div m:id='CREDIT_INFO_AREA_TAG'> <h3>お支払い情報 <img class="lock" src="images/icon_lock.png" width="18" height="24" alt="鍵" /></h3> <p> クレジットカードご利用の方のみご記入ください。 </p> <p class="card-supplement"> 本システムのカード決済は、SSLによってカード番号を暗号化し保護しています。<br /> お客様のクレジットカード番号は、カード会社にのみ送信され、ショップ側で確認することはできませんのでご安心ください。 </p> <div m:id='IF_CREDIT_TOKEN'> <span m:id='CREDIT_TOKEN_ERROR_MESSAGE_TAG' class="error"></span> <!-- クロネコWEBコレクトのクレジットカードトークン決済を使用する場合は以下のコメントアウトを外して下さい。 --> <!-- <input type='hidden' m:id='YAMATO_CREDIT_TOKEN_MEMBER_TAG' ></input> --> </div> <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> <div m:id='IF_ZEUS_CREDIT_TOKEN' m:NOT=""> <table summary="お支払い情報" m:id="INPUT_CREDIT_INFO_TABLE_TAG"> <thead m:id="IF_SAVED_CARD" m:NOT=""> <tr m:id='IF_CREDIT_KAISU'> <th class="title">お支払い回数</th> <td> <select m:id='CREDIT_KAISU_INPUT_HERE' name="card_count"> <option value="" selected="selected">-- 回数を指定 --</option> <option value="01">1回</option> <option value="02">2回</option> <option value="03">3回</option> </select> <label class="error_color" id="CREDIT_COUNT_ERROR" style="color :red;"></label> </td> </tr> <tr> <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> </tr> <tr> <th class="title">カード番号</th> <td class="cardnumber_td"> <!--<input m:id='CREDIT_NUMBER_INPUT_HERE' name="card_number" type="text" size="21" value="" m:autocomplete="off" />--> <input m:id='CREDIT_NUMBER1_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER2_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER3_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER4_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <label class="error_color" id="CREDIT_NO_ERROR" style="color :red;"></label> <br />例：1111222233334444（ハイフン不要） </td> </tr> <tr> <th class="title">有効期限</th> <td> <select m:id='CREDIT_EXPIRE_MONTH_INPUT_HERE' name="card_month"> <option value="" selected="selected">-- 月を指定 --</option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月 <select m:id='CREDIT_EXPIRE_YEAR_INPUT_HERE' name="card_year"> <option value="" selected="selected">-- 年を指定 --</option> <option value="09">2009</option> <option value="10">2010</option> <option value="11">2011</option> <option value="12">2012</option> <option value="13">2013</option> <option value="14">2014</option> <option value="15">2015</option> <option value="16">2016</option> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> </select> 年 <label class="error_color" id="CREDIT_LIMIT_ERROR" style="color :red;"></label> </td> </tr> <tr m:id='common.IF_USE_MEMBER_CREDIT_SAVE'> <th class="title">カードの登録</th> <td> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_ON_TAG" id="SAVE_NEW_CARD_RADIO_ON" /> <label for="SAVE_NEW_CARD_RADIO_ON">このカードを登録する</label> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_OFF_TAG" id="SAVE_NEW_CARD_RADIO_OFF" /> <label for="SAVE_NEW_CARD_RADIO_OFF">このカードを登録しない</label> </td> </tr> </thead> <tbody m:id="IF_SAVED_CARD"> <tr m:id='IF_CREDIT_KAISU'> <th class="title">お支払い回数</th> <td> <select m:id='CREDIT_KAISU_INPUT_HERE' name="card_count"> <option value="" selected="selected">-- 回数を指定 --</option> <option value="01">1回</option> <option value="02">2回</option> <option value="03">3回</option> </select> <label class="error_color" id="CREDIT_COUNT_ERROR" style="color :red;"></label> </td> </tr> <tr> <th class="title">登録済みカード</th> <td> <div m:id='LOOP_SAVED_CARD'> <input name="saved_card" type="radio" m:id='SAVED_CARD_SELECT_RADIO_TAG' /> ****-****-****-<span m:id='SAVED_CARD_CREDIT_NUMBER4_HERE'>4003</span> <span class="expiration_date"> 有効期限：<span m:id='SAVED_CARD_CREDIT_EXPIRE_MONTH_HERE'>02</span>/<span m:id='SAVED_CARD_CREDIT_EXPIRE_YEAR_HERE'>2019</span> </span> </div> <div m:id='DUMMY'> <input name="saved_card" type="radio" /> ****-****-****-4003 <span class="expiration_date"> 有効期限：<span m:id='SAVED_CARD_CREDIT_EXPIRE_MONTH_HERE'>02</span>/<span m:id='SAVED_CARD_CREDIT_EXPIRE_YEAR_HERE'>2019</span> </span> </div> <div class="new"> <input name="saved_card" type="radio" m:id='NEW_CARD_RADIO_TAG' /> 新規クレジットカード <table class="newCreditCard"> <tr> <th>カード名義</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> </tr> <tr> <th>カード番号</th> <td class="cardnumber_td"> <!-- <input m:id='CREDIT_NUMBER_INPUT_HERE' name="card_number" type="text" size="21" value="" m:autocomplete="off" />--> <input m:id='CREDIT_NUMBER1_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER2_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER3_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <input m:id='CREDIT_NUMBER4_INPUT_HERE' name="card_number" type="text" size="4" maxlength="4" value="" m:autocomplete="off" /> <label class="error_color" id="CREDIT_NO_ERROR" style="color :red;"></label> <br />例：1111222233334444（ハイフン不要） </td> </tr> <tr> <th>有効期限</th> <td> <select m:id='CREDIT_EXPIRE_MONTH_INPUT_HERE' name="card_month"> <option value="" selected="selected">-- 月を指定 --</option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> 月 <select m:id='CREDIT_EXPIRE_YEAR_INPUT_HERE' name="card_year"> <option value="" selected="selected">-- 年を指定 --</option> <option value="09">2009</option> <option value="10">2010</option> <option value="11">2011</option> <option value="12">2012</option> <option value="13">2013</option> <option value="14">2014</option> <option value="15">2015</option> <option value="16">2016</option> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> </select> 年 <label class="error_color" id="CREDIT_LIMIT_ERROR" style="color :red;"></label> </td> </tr> <tr m:id='common.IF_USE_MEMBER_CREDIT_SAVE'> <th>カードの登録</th> <td> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_ON_TAG" id="SAVE_NEW_CARD_RADIO_ON" /> <label for="SAVE_NEW_CARD_RADIO_ON">このカードを登録する</label> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_OFF_TAG" id="SAVE_NEW_CARD_RADIO_OFF" /> <label for="SAVE_NEW_CARD_RADIO_OFF">このカードを登録しない</label> </td> </tr> </table> </div> </td> </tr> </tbody> <tr m:id='IF_CREDIT_SECURITY_CD'> <th class="title">セキュリティコード</th> <td> <input m:id='SECURITY_CODE_INPUT_HERE' type="text" name="SECURITY_CODE" value="" m:autocomplete="off" /> <label class="error_color" id="SECURITY_CD_ERROR" style="color :red;"></label><br /> <img src="images/security_code.gif" alt="セキュリティコード表示例" /> </td> </tr> </table> </div> <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> <!-- ゼウストークン決済用入力フォーム --> <div id="zeus_token_card_info_area" m:id='IF_ZEUS_CREDIT_TOKEN'> <table m:id="INPUT_CREDIT_INFO_TABLE_TAG"> <tbody> <tr m:id='IF_CREDIT_KAISU'> <th>お支払い回数</th> <td> <select m:id='CREDIT_KAISU_INPUT_HERE' name="card_count"> <option value="" selected="selected">-- 回数を指定 --</option> <option value="01">1回</option> <option value="02">2回</option> <option value="03">3回</option> </select> <label class="error_color" id="CREDIT_COUNT_ERROR" style="color :red;"></label> </td> </tr> </tbody> <tbody m:id="IF_SAVED_CARD"> <tr> <th>登録済みカード</th> <td> <div m:id='LOOP_SAVED_CARD'> <input name="saved_card" type="radio" m:id='SAVED_CARD_SELECT_RADIO_TAG' /> ****-****-****-<span m:id='SAVED_CARD_CREDIT_NUMBER4_HERE'>4003</span> <span class="expiration_date"> 有効期限：<span m:id='SAVED_CARD_CREDIT_EXPIRE_MONTH_HERE'>02</span>/<span m:id='SAVED_CARD_CREDIT_EXPIRE_YEAR_HERE'>2019</span> </span> </div> <div class="new"> <input type='radio' value='new' id='zeus_token_action_type_new' name="zeus_card_option" /> 新規クレジットカード <table class="newCreditCard"> <tr> <th class="title">カード名義</th> <td> <input type='text' value='' id='zeus_token_card_name' name='zeus_token_card_name' size='30' maxlength='60' /><br /> 例：TARO YAMADA </td> </tr> <tr> <th class="title">カード番号</th> <td> <input type="tel" value="" id="zeus_token_card_number" name="zeus_token_card_number" autocomplete="off" size="21" maxlength="20" /><br /> 例：1111222233334444（ハイフン不要） </td> </tr> <tr> <th class="title">カード有効期限</th> <td> <select id="zeus_token_card_expires_month" name="zeus_token_card_expires_month"> <option>-- 月を指定 --</option> </select> 月 <select id="zeus_token_card_expires_year" name="zeus_token_card_expires_year"> <option>-- 年を指定 --</option> </select> 年 </td> </tr> <tr m:id='common.IF_USE_MEMBER_CREDIT_SAVE'> <th>カードの登録</th> <td> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_ON_TAG" id="SAVE_NEW_CARD_RADIO_ON" /> <label for="SAVE_NEW_CARD_RADIO_ON">このカードを登録する</label> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_OFF_TAG" id="SAVE_NEW_CARD_RADIO_OFF" /> <label for="SAVE_NEW_CARD_RADIO_OFF">このカードを登録しない</label> </td> </tr> </table> </div> </td> </tr> </tbody> <tbody m:id="IF_SAVED_CARD" m:NOT=""> <tr id="zeus_token_action_type_new_area"> <th class="title">新規クレジットカード</th> <td> <input type='radio' value='new' id='zeus_token_action_type_new' name="zeus_card_option" /> </td> </tr> <tr> <th class="title">カード名義</th> <td> <input type='text' value='' id='zeus_token_card_name' name='zeus_token_card_name' size='30' maxlength='60' /><br /> 例：TARO YAMADA </td> </tr> <tr> <th class="title">カード番号</th> <td> <input type="tel" value="" id="zeus_token_card_number" name="zeus_token_card_number" autocomplete="off" size="21" maxlength="20" /><br /> 例：1111222233334444（ハイフン不要） </td> </tr> <tr> <th class="title">カード有効期限</th> <td> <select id="zeus_token_card_expires_month" name="zeus_token_card_expires_month"> <option>-- 月を指定 --</option> </select> 月 <select id="zeus_token_card_expires_year" name="zeus_token_card_expires_year"> <option>-- 年を指定 --</option> </select> 年 </td> </tr> <tr m:id='common.IF_USE_MEMBER_CREDIT_SAVE'> <th>カードの登録</th> <td> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_ON_TAG" id="SAVE_NEW_CARD_RADIO_ON" /> <label for="SAVE_NEW_CARD_RADIO_ON">このカードを登録する</label> <input type="radio" name="save_card" m:id="SAVE_NEW_CARD_RADIO_OFF_TAG" id="SAVE_NEW_CARD_RADIO_OFF" /> <label for="SAVE_NEW_CARD_RADIO_OFF">このカードを登録しない</label> </td> </tr> </tbody> <tbody> <tr id="zeus_token_card_cvv_area"> <th class="title">セキュリティコード</th> <td> <input type="tel" value="" id="zeus_token_card_cvv" name="zeus_token_card_cvv" size="4" maxlength="5" /><br /> <img src="images/security_code.gif" alt="セキュリティコード表示例" /> </td> </tr> </tbody> </table> <div id="zeus_token_card_hidden_area"></div> </div> <!-- ゼウストークン決済用入力フォーム ここまで--> </div> </div>