app/Plugin/VeriTrans4G2/Resource/template/default/js/vt4g_credit_js.twig line 1

Open in your IDE?
  1. {#
  2. Copyright (c) 2018 VeriTrans Inc., a Digital Garage company. All rights reserved.
  3. http://www.veritrans.co.jp/
  4. #}
  6. <script src= "{{ asset(tokenJsPath, 'plugin') }} "></script>
  8. <script>
  9.     // 名前空間を設定
  10.     window.VeriTrans4G = window.VeriTrans4G || {};
  12.     VeriTrans4G.isProcessing = false;
  14.     // 支払方法のバリデーション
  15.     VeriTrans4G.validateOneClickPaymentType = function(formKey) {
  16.         var paymentTypeSelect = document.querySelector('select[name="'+formKey+'[payment_type]"]');
  17.         VeriTrans4G.hideErrorMessage(paymentTypeSelect);
  19.         return VeriTrans4G.validateNotBlank('payment_type', 'お支払い方法', null, formKey);
  20.     }
  22.     // カード名義人名のバリデーションチェック
  23.     VeriTrans4G.validateOneClickCardName = function(formKey) {
  24.         var nameKey = 'card_name';
  25.         var name = 'カード名義人名';
  26.         var cardNameSelect = document.querySelector('input[name="'+formKey+'['+nameKey+']"]');
  28.         //本人認証無しの場合は入力フォームが存在しないので、処理を終了する。
  29.         if(cardNameSelect == undefined){
  30.             return true;
  31.         }
  33.         var minLength = cardNameSelect.getAttribute('minlength');
  34.         var maxLength = cardNameSelect.getAttribute('maxlength');
  36.         VeriTrans4G.hideErrorMessage(cardNameSelect);
  38.         return VeriTrans4G.validateNotBlank(nameKey, name, null, formKey) &&
  39.                VeriTrans4G.validateRegex(nameKey, name, '[^a-zA-Z ]', '※ '+name+'は半角英字(半角スペースのみ許可)で入力してください', formKey) &&
  40.                VeriTrans4G.validateRange(nameKey, name, minLength, maxLength, formKey);
  41.     }
  43.     VeriTrans4G.setSubmit = function(e, targetId) {
  45.             e.preventDefault();
  47.             var elm = e.currentTarget;
  48.             var form = $(elm).parents('form');
  50.             if (VeriTrans4G.isProcessing) {
  51.                 alert('只今、処理中です。しばらくお待ちください。');
  52.                 return false;
  53.             }
  55.             VeriTrans4G.isProcessing = false;
  56.             switch (targetId) {
  57.                 case 'vt4g-credit':
  58.                     VeriTrans4G.fetchMdkToken(e, form, "{{ useRecaptcha }}", "{{ recaptchaSiteKey }}");
  59.                     return true;
  60.                 case 'vt4g-credit-account':
  61.                 case 'vt4g-credit-retrade':
  62.                     var formKey = {
  63.                         'vt4g-credit-account': 'payment_credit_account',
  64.                         'vt4g-credit-retrade': 'payment_credit_one_click'
  65.                     }[targetId];
  66.                     var isValid = true;
  68.                     if (!VeriTrans4G.validateOneClickPaymentType(formKey)) {
  69.                         isValid = false;
  70.                     }
  72.                     if (!VeriTrans4G.validateOneClickCardName(formKey)) {
  73.                         isValid = false;
  74.                     }
  76.                     if(!isValid){
  77.                         document.getElementById(targetId).scrollIntoView({
  78.                             behavior: "smooth",
  79.                             block: "start",
  80.                             inline: "start"
  81.                         });
  82.                         e.stopPropagation();
  83.                         loadingOverlay("hide");
  84.                         return false;
  85.                     }
  87.                     break;
  88.                 default:
  89.                     break;
  90.             }
  92.             VeriTrans4G.executeSubmit(form);
  94.             return true;
  95.     }
  97.     // カード登録情報にカード名義人名が登録済みかどうかを確認し、使用するカード情報をセットする。
  98.     VeriTrans4G.changeUseCardInfo = function() {
  100.         $('input[name="payment_order_id"], input[name="card_id"]').change(function(){
  102.             //カード番号
  103.             var cardNumber = $('input[name="payment_order_id"]:checked').parents('tr').find('input[name="registered_mask_card_number"]').val();
  104.             if(cardNumber !== undefined){
  105.                 $('#retrade_mask_card_number').val(cardNumber)
  106.             }
  108.             var cardNumber = $('input[name="card_id"]:checked').parents('tr').find('input[name="registered_mask_card_number"]').val();
  109.             if(cardNumber !== undefined){
  110.                 $('#account_mask_card_number').val(cardNumber)
  111.             }
  113.             //カード名義人名
  114.             var cardName = $('input[name="payment_order_id"]:checked').parents('tr').find('.registered_card_name').val();
  115.             if(cardName !== undefined){
  116.                 cardName.length == 0 ? $('#payment_credit_one_click_card_name').parents('dl').show() : $('#payment_credit_one_click_card_name').parents('dl').hide();
  117.                 $('#payment_credit_one_click_card_name').val(cardName)
  118.             }
  120.             var cardName = $('input[name="card_id"]:checked').parents('tr').find('.registered_card_name').val();
  121.             if(cardName !== undefined){
  122.                 cardName.length == 0 ? $('#payment_credit_account_card_name').parents('dl').show() : $('#payment_credit_account_card_name').parents('dl').hide();
  123.                 $('#payment_credit_account_card_name').val(cardName)
  124.             }
  125.         });
  127.         $('input[name="payment_order_id"], input[name="card_id"]').trigger('change');
  128.     }
  130.     // アコーディオン開閉時の処理
  131.     VeriTrans4G.moveAccordion = function() {
  133.         //初期表示の時に表示内容やエラーに応じてアコーディオンを一つ開く
  134.         var vt4gCredit = '';
  135.         var scrollPosition = '';
  136.         var formErrorCount = "{{ form.vars.errors.form.getErrors(true) | length }}"
  137.         if($('#vt4g-credit-account').length > 0 && formErrorCount === "0"){
  138.             vt4gCredit = $('#vt4g-credit-account');
  139.             formErrorCount = "{{ accountForm.vars.errors.form.getErrors(true) | length }}"
  140.             scrollPosition = document.getElementById('vt4g-credit-account');
  141.         } else if($('#vt4g-credit-retrade').length > 0 && formErrorCount === "0"){
  142.             vt4gCredit = $('#vt4g-credit-retrade');
  143.             formErrorCount = "{{ oneClickForm.vars.errors.form.getErrors(true) | length }}"
  144.             scrollPosition = document.getElementById('vt4g-credit-retrade');
  145.         } else {
  146.             vt4gCredit = $('#vt4g-credit');
  147.             scrollPosition = document.getElementById('vt4g-credit');
  148.         }
  150.         $.when(
  151.             $('.accordion_inner').hide(),
  152.             $('.accordion_inner').find('input').prop('disabled', true),
  153.             $('.accordion_inner').find('select').prop('disabled', true),
  154.             vt4gCredit.find('.accordion_inner').slideToggle(),
  155.             vt4gCredit.find('.change-class').toggleClass('plus-dark-icon'),
  156.             vt4gCredit.find('.change-class').toggleClass('minus-dark-icon'),
  157.             vt4gCredit.find('input').prop('disabled', false),
  158.             vt4gCredit.find('select').prop('disabled', false),
  159.         ).done(function(){
  160.             if(formErrorCount != "0"){
  161.                 scrollPosition.scrollIntoView({
  162.                     behavior: "smooth",
  163.                     block: "start",
  164.                     inline: "start"
  165.                 });
  166.             }
  167.         });
  169.         //アコーディオンが1個のみ場合は開閉する必要がないため処理を終了する
  170.         if ($('.vt4g_toggle_title').length === 1) {
  171.             $('.vt4g_toggle_btn').remove();
  172.             return;
  173.         }
  175.         //アコーディオン押下時の開閉イベント
  176.         $(document).on('click', '.vt4g_toggle_title', function(){
  178.             $.when(
  179.                 $('.accordion_inner').toggle('normal'),
  181.                 $('.change-class').toggleClass('plus-dark-icon'),
  182.                 $('.change-class').toggleClass('minus-dark-icon'),
  184.                 //一度全ての選択項目を非表示とする
  185.                 $('.accordion_inner').find('input').prop('disabled', true),
  186.                 $('.accordion_inner').find('select').prop('disabled', true),
  187.             ).done(function(){
  188.                 //指定されたアコーディオンの選択項目を表示する
  189.                 $('.accordion_inner:visible').find('input').prop('disabled', false),
  190.                 $('.accordion_inner:visible').find('select').prop('disabled', false);
  191.             });
  192.         });
  193.     }
  195.     $(function() {
  196.         VeriTrans4G.changeUseCardInfo();
  197.         VeriTrans4G.moveAccordion();
  199.         VeriTrans4G.tokenApiUrl = "{{ tokenApiUrl }}";
  200.         VeriTrans4G.tokenApiKey = "{{ tokenApiKey }}";
  201.         {% if paymentInfo.security_flg is defined %}
  202.             VeriTrans4G.securityFlg = !!{{ paymentInfo.security_flg }};
  203.         {% else %}
  204.             VeriTrans4G.securityFlg = true;
  205.         {% endif %}
  206.     })
  208. </script>