支払い方法（部分テンプレート）
注文情報入力画面で利用する各入力フォーム用部分テンプレートです。
注文情報入力画面で include して利用します。（注文情報入力画面以外では利用できません）
テーマ管理のファイルパス
ec_force/shop/orders/_view_payment_information.html.liquid
ec_force/shop/orders/_view_payment_information.html+smartphone.liquid
必要なコンポーネント
任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
<!-- 部分テンプレート(お支払い情報の入力) -->
<div id="view-payment-information">
<!-- お支払い方法の選択 -->
<label>お支払い方法</label>
<select class="validate[required]" id="payment_method_id" name="order[payment_attributes][payment_method_id]">
<option value='{{ order.payment.payment_method_id }}' selected>{{ order.payment.payment_method.name }}</option>
</select>
<div id="AmazonPayButtonWallet" class="amazon_pay_button_wallet" style="display:none;">
<input type="hidden" name="order[payment_attributes][source_attributes][access_token]"/>
<input name="order[payment_attributes][source_attributes][billing_agreement]" class="billing_agreement validate[required]" data-errormessage="ログインしてください">
</div>
<div class="paypal_button" id="paypal_button" style="display:none; height: auto;">
<script src="{{ paypal_module_js }}"></script>
{% if current_customer_has_paypal || order.payment.source_id %}
<input name="order[payment_attributes][source_attributes][access_token]" type="hidden" disabled="disabled">
{% if order.payment.source_id %}
<input id="input_paypal_source_id" name="order[payment_attributes][source_id]" type="hidden" disabled="disabled" value='{{ order.payment.source_id }}'>
{% elsif current_customer.paypal_transactions %}
<input id="input_paypal_source_id" name="order[payment_attributes][source_id]" type="hidden" disabled="disabled" value='{{ current_customer.paypal_transactions.last.id }}'>
{% endif %}
{% endif %}
<input class="validate[required]" data-errormessage="ペイパルにログインして、支払いを承認してください" id="paypal_billing_agreement" name="order[payment_attributes][source_attributes][billing_agreement]" style="visibility: hidden;font-size: 0px" disabled="disabled">
<div id="paypal-button-container"></div>
</div>
<div id="view_app_payment" style="display:none;">
{% if has_transaction_id %}
<input id="input_app_source_id" type="hidden" name="order[payment_attributes][source_id]" value='{{ order.payment.source_id }}'/>
{% endif %}
</div>
{% if base_info.epos_banner %}
<p id="epos">
<button id="epos_apply" type="button" style="background:none; border:0">
<img width="100%" src="{{ base_info.epos_banner.url }}">
</button>
</p>
{% endif %}
<div id="payment_method_description"></div>
<!-- AmazonPayフォーム -->
<div id="view-amazon-pay-wallet-widget" style="display:none;">
<div id="walletWidgetDiv" class="wallet_widget_wrapper"></div>
<!-- 同意チェックボックス -->
<div class="consent_wrapper">
<span class="consent_message">⬇ 下記にチェックを入れてください</span>
<span class="consent_mandatory">必須</span>
<input class="consent_checkbox validate[required]" type="checkbox" name="order[payment_attributes][source_attributes][consent]"/>
</div>
<div id="consentWidgetDiv" class="consent_widget_wrapper"></div>
</div>
<!-- お支払い回数選択 -->
<div id="view-payment-times" style="display:none;">
<label>お支払い回数</label>
<select class="validate[required,custom[integer]]" id="order_payment_times" name="order[payment_attributes][payment_times]">
<option>--</option>
{% for i in (2..24) %}
{% if order.payment and order.payment.payment_times == i %}
<option value='{{ i }}' selected>{{ i }}</option>
{% else %}
<option value='{{ i }}'>{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- クレジットカード情報の入力 -->
<div id="view-credit-card-information" style="display:none;">
<input type="hidden" name="order[payment_attributes][source_attributes][access_token]" id="input-cc-access-token" disabled>
<input type="hidden" id="input-cc-check-access-token" class="validate[ajax[creditcardCheckShop]]" data-prompt-position="inline" data-prompt-target="view-input-card-number" disabled>
<!-- クレジットカードの選択 -->
<label>クレジットカード</label>
{% if current_customer_has_card %}
<select name="order[payment_attributes][source_id]" id="card-id">
{% for card in current_customer.credit_cards %}
<option value='{{ card.id }}' {% if card.default %}selected{% endif %}>{{ card.display_number }}</option>
{% endfor %}
{% if current_customer.credit_cards.size < 5 %}
<option value="0">新しく登録する</option>
{% endif %}
</select>
{% endif %}
<!-- クレジットカード入力(PC用) -->
<!-- クレジットカード番号の入力 -->
<div id="view-input-card-number" style="{% if current_customer_has_card %}display:none;{% endif %}">
<label>クレジットカード番号</label>
{% if ecforce_payment_available %}
<div id="ecforce-payment-card-number-error"></div>
<div id="ecforce-view-input-card-number">
<div class="ecforce-payment-card-number">
<div id="card-number"></div>
</div>
<input id="ecforce-payment-last-digits" style="display: none;" class="validate[required]" name="order[payment_attributes][source_attributes][last_digits]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-number-error">
</div>
{% else %}
<input type="hidden" name="order[payment_attributes][source_attributes][default]" id="input-cc-default" {% if current_customer_has_card %}disabled{% endif %} value="1">
<input type="hidden" name="order[payment_attributes][source_attributes][cc_type]" id="input-cc-type" disabled>
<input type="tel" name="order[payment_attributes][source_attributes][number]" id="input-cc-number" {% if current_customer_has_card %}disabled{% endif %} class="validate[required, maxSize[16]]">
{% endif %}
<input type="hidden" name="order[payment_attributes][source_attributes][gateway_card_seq]" id="input-cc-gateway-card-seq" disabled>
<span>※ 数字のみで続けて入力してください。</span>
</div>
<!-- クレジットカード有効期限の入力 -->
<div id="view-input-card-expire" style={% if current_customer_has_card %}"display:none;"{% endif %}>
<label>カードの有効期限</label>
{% if ecforce_payment_available %}
<div id="expire-validation" class="ecforce-input-card-info">
<div id="ecforce-payment-card-expiry-error"></div>
<div class="ecforce-payment-card-expiry">
<div id="card-expiry"></div>
</div>
<input type="hidden" id ="ecforce-payment-expiry" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-expiry-error" disabled>
<input type="hidden" id="ecforce-payment-month" name="order[payment_attributes][source_attributes][month]">
<input type="hidden" id="ecforce-payment-year" name="order[payment_attributes][source_attributes][year]">
</div>
{% else %}
<select name="order[payment_attributes][source_attributes][month]" id="input-cc-month" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
{% for m in (1..12) %}
<option value='{{ m }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.month == m %} selected {% endif %}>{{ m }}月</option>
{% endfor %}
</select>
<span>月</span>
<select name="order[payment_attributes][source_attributes][year]" id="input-cc-year" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
{% assign now_year = "now" | date: "%Y" | minus: 2000 %}
{% assign later_15_years = "now" | date: "%Y" | plus: 15 | minus: 2000 %}
{% for y in (now_year..later_15_years) %}
<option value='{{ y }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.year == y %} selected {% endif %}>{{ y }}年</option>
{% endfor %}
</select>
<span>年</span>
{% endif %}
</div>
<!-- クレジットカード名義人の入力 -->
<div id="view-input-card-name" style={% if current_customer_has_card %}"display:none;"{% endif %}>
<label>カードの名義人</label>
{% if order.payment.source_type == 'EcForce::CreditCard' %}
{% assign card_name = order.payment.source.name %}
{% else %}
{% assign card_name = '' %}
{% endif %}
{% if ecforce_payment_available %}
<div id="ecforce-payment-card-name-error"></div>
<input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %} placeholder="例）HANAKO YAMADA" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-name-error">
{% else %}
<input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %}>
{% endif %}
</div>
<!-- セキュリティコードの入力 -->
<div id="view-input-card-cvv" {% if current_customer_has_card %}style="display:none;"{% endif %}>
<label>セキュリティコード</label>
{% if ecforce_payment_available %}
{% if use_cvc == 'true' %}
<div id="cvv-validation" class="ecforce-input-card-info">
<div id="ecforce-payment-card-cvv-error"></div>
<div class="ecforce-payment-card-cvv">
<div id="card-cvv"></div>
</div>
<input type="hidden" id="cvv" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-cvv-error" disabled>
</div>
{% endif %}
{% else %}
<input type="text" name="cvv" id="input-cc-cvv" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
{% endif %}
<!-- セキュリティコードの説明画像 -->
<img src="{{ 'cvv_sample.jpg' | image_url }}">
</div>
<!-- クレジットカード入力(PC用) ここまで-->
<!-- クレジットカード入力(スマートフォン用) -->
<div id="view-input-card-number" style="{% if current_customer_has_card %}display:none;{% endif %}">
<label>クレジットカード番号</label>
{% if ecforce_payment_available %}
<div id="ecforce-payment-card-number-error"></div>
<div id="ecforce-view-input-card-number">
<div class="ecforce-payment-card-number">
<div id="card-number"></div>
</div>
<input id="ecforce-payment-last-digits" style="display: none;" class="validate[required]" name="order[payment_attributes][source_attributes][last_digits]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-number-error">
</div>
{% else %}
<input type="hidden" name="order[payment_attributes][source_attributes][default]" id="input-cc-default" {% if current_customer_has_card %}disabled{% endif %} value="1">
<input type="hidden" name="order[payment_attributes][source_attributes][cc_type]" id="input-cc-type" disabled>
<input type="tel" name="order[payment_attributes][source_attributes][number]" id="input-cc-number" {% if current_customer_has_card %}disabled{% endif %} class="validate[required, maxSize[16]]" autocomplete="cc-number">
{% endif %}
<input type="hidden" name="order[payment_attributes][source_attributes][gateway_card_seq]" id="input-cc-gateway-card-seq" disabled>
<span>※ 数字のみで続けて入力してください。</span>
</div>
<!-- クレジットカード有効期限の入力 -->
<div id="view-input-card-expire" style={% if current_customer_has_card %}"display:none;"{% endif %}>
<label>カードの有効期限</label>
{% if ecforce_payment_available %}
<div id="expire-validation" class="ecforce-input-card-info">
<div id="ecforce-payment-card-expiry-error"></div>
<div class="ecforce-payment-card-expiry">
<div id="card-expiry"></div>
</div>
<input type="hidden" id ="ecforce-payment-expiry" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-expiry-error" disabled>
<input type="hidden" id="ecforce-payment-month" name="order[payment_attributes][source_attributes][month]">
<input type="hidden" id="ecforce-payment-year" name="order[payment_attributes][source_attributes][year]">
</div>
{% else %}
<select name="order[payment_attributes][source_attributes][month]" id="input-cc-month" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-exp-month">
{% for m in (1..12) %}
<option value='{{ m }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.month == m %} selected {% endif %}>{{ m }}</option>
{% endfor %}
</select>
<span>月</span>
<select name="order[payment_attributes][source_attributes][year]" id="input-cc-year" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-exp-year">
{% assign now_year = "now" | date: "%Y" | minus: 2000 %}
{% assign later_15_years = "now" | date: "%Y" | plus: 15 | minus: 2000 %}
{% for y in (now_year..later_15_years) %}
<option value='{{ y }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.year == y %} selected {% endif %}>{{ y }}</option>
{% endfor %}
</select>
<span>年</span>
{% endif %}
</div>
<!-- クレジットカード名義人の入力 -->
<div id="view-input-card-name" style={% if current_customer_has_card %}"display:none;"{% endif %}>
<label>カードの名義人</label>
{% if order.payment.source_type == 'EcForce::CreditCard' %}
{% assign card_name = order.payment.source.name %}
{% else %}
{% assign card_name = '' %}
{% endif %}
{% if ecforce_payment_available %}
<div id="ecforce-payment-card-name-error"></div>
<input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %} placeholder="例）HANAKO YAMADA" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-name-error">
{% else %}
<input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-name">
{% endif %}
</div>
<!-- セキュリティコードの入力 -->
<div id="view-input-card-cvv" {% if current_customer_has_card %}style="display:none;"{% endif %}>
<label>セキュリティコード</label>
{% if ecforce_payment_available %}
{% if use_cvc == 'true' %}
<div id="cvv-validation" class="ecforce-input-card-info">
<div id="ecforce-payment-card-cvv-error"></div>
<div class="ecforce-payment-card-cvv">
<div id="card-cvv"></div>
</div>
<input type="hidden" id="cvv" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-cvv-error" disabled>
</div>
{% endif %}
{% else %}
<input type="text" name="cvv" id="input-cc-cvv" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
{% endif %}
<!-- セキュリティコードの説明画像 -->
<img src="{{ 'cvv_sample.jpg' | image_url }}">
</div>
<!-- クレジットカード入力(スマートフォン用) ここまで -->
</div>
</div>