2021/11/11更新

+ 追加した行
- 削除した行

   <label for="customer_password">パスワード</label>
   <input class="validate[required,minSize[8]]" placeholder="半角英数字8文字以上" type="password" name="customer[password]" id="customer_password" />
 
+  <!-- オプトイン -->
+  {% if shop_form_settings['optin_signup'] %}
+    <label class='checkbox-inline' for='optin'>
+      <input {% if shop_form_settings['optin_default_signup'] %}checked{% endif %} class='u-color__border--input' id="optin" name="customer[optin]" type="checkbox">
+      {{ shop_form_settings['optin_text'] }}
+    </label>
+  {% else %}
+    <input value="{% if shop_form_settings['optin_default_signup'] %}1{% else %}0{% endif %}" name="customer[optin]" type="hidden">
+  {% endif %}
+
   <!-- 利用規約 -->

 <!-- 部分テンプレート(オプトインの選択) -->
-{% if shop_form_settings['optin'] %}
+{% if shop_form_settings['optin_order'] %}
 
   <!-- オプトインの選択 -->
   <label>
   <input name="order[customer_attributes][optin]" type="hidden" value="0">
-  <input {% if order.customer %}{% if order.customer.optin %}checked="checked"{% endif %}{% else %}{% if shop_form_settings['optin_default'] %}checked="checked"{% endif %}{% endif %} id="optin" name="order[customer_attributes][optin]" type="checkbox">
+  <input {% if order.customer %}{% if order.customer.optin %}checked="checked"{% endif %}{% else %}{% if shop_form_settings['optin_default_order'] %}checked="checked"{% endif %}{% endif %} id="optin" name="order[customer_attributes][optin]" type="checkbox">
   ショップからのお知らせを受け取る。
   </label>

     <!-- メールマガジン受信 -->
-    {% if base_info.optin_cancelable? %}
+    {% if shop_form_settings['optin_edit'] %}
       <label for="customer_optin">メールマガジン受信</label>

       <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.url != '/assets/missing.png' %}
-    <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>
-  {% else %}
-    <div id="payment_method_description"></div>
-  {% endif %}
+  {% 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-input-card-number" style="{% if current_customer_has_card %}display:none;{% endif %}">
       <label>クレジットカード番号</label>
-      <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>
+      {% if ecforce_payment_available %}
+        <div class="ecforce-payment-card-number">
+          <div id="card-number"></div>
+          <input type="hidden" name="order[payment_attributes][source_attributes][last_digits]" id="ecforce-payment-last-digits" class="validate[required]">
+        </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>
-      <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]]">
       <span>※ 数字のみで続けて入力してください。</span>
     </div>
 
     <!-- クレジットカード有効期限の入力 -->
     <div id="view-input-card-expire" style={% if current_customer_has_card %}"display:none;"{% endif %}>
       <label>カードの有効期限</label>
-      <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.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.year == y %} selected {% endif %}>{{ y }}年</option>
-        {% endfor %}
-      </select>
-      <span>年</span>
+      {% if ecforce_payment_available %}
+        <div class="ecforce-payment-card-expiry">
+          <div id="card-expiry"></div>
+          <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.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.year == y %} selected {% endif %}>{{ y }}年</option>
+          {% endfor %}
+        </select>
+        <span>年</span>
+      {% endif %}
     </div>

     <!-- セキュリティコードの入力 -->
     <div id="view-input-card-cvv" {% if current_customer_has_card %}style="display:none;"{% endif %}>
       <label>セキュリティコード</label>
-      <input type="text" name="cvv" id="input-cc-cvv" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
+      {% if ecforce_payment_available %}
+        <div class="ecforce-payment-card-cvc">
+          <div id="card-cvc"></div>
+        </div>
+      {% 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 }}">

       {% include 'ec_force/password/sections/header.html' %}
       {% include 'ec_force/password/sections/content.html' %}
-      {% include 'ec_force/password/sections/footer.html' %}

       </form>
-      {% include 'ec_force/password/sections/footer.html' %}
     </div>