Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/Payments/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div class="v-form-row">
      <div class="v-form-col">

        <div class="form-group">
          <label for="card_number">Card Number</label>
          <div id="card_number" class="form-control-input">

          </div>
          <div id="ccnumber-error"
               class="error validation-err-msg" v-if="errors['ccnumber']" v-html="errors['ccnumber']">
          </div>
        </div>
      </div>

    </div>
    <div class="v-form-row">
      <div class="v-form-col">
        <div class="form-group">
          <label for="expiry_month">Expiry</label>
          <div id="cc_expiry" class="form-control-input">

          </div>
          <div id="ccexp-error" class="error validation-err-msg" v-if="errors['ccexp']"
               v-html="errors['ccexp']">

          </div>
        </div>
      </div>


      <div class="v-form-col">

        <div class="form-group">
          <label for="ccv">CCV</label>
          <div id="ccv" class="form-control-input">

          </div>
          <div id="cvv-error" class="error validation-err-msg" v-if="errors['cvv']" v-html="errors['cvv']">

          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import VregSelect from "@/components/Forms/VregSelect";
import InputField from "@/components/Forms/InputField";

export default {
  name: "Nmi",
  components: {InputField, VregSelect},
  props: {
    form: {
      required: true
    }
  },
  data() {
    return {
      errors: {},
    }
  },
  mounted() {
    this.initCollectJs();
  },
  methods: {
    initCollectJs() {
      let fieldsStatus = {
        ccnumber: {
          valid: false,
        },
        ccexp: {
          valid: false,
        },
        cvv: {
          valid: false,
        },
      };
      CollectJS.configure({
        "paymentSelector": "#payment-form-submit",
        "variant": "inline",
        "styleSniffer": "true",
        'theme': 'bootstrap',
        "customCss": {
          "color": "black",
        },
        "invalidCss": {
          "color": "red",
        },
        "validCss": {
          "color": "black",
        },
        "placeholderCss": {
          "color": "gray",
        },
        "fields": {
          "ccnumber": {
            "selector": "#card_number",
            "title": "Card Number",
            "placeholder": "0000 0000 0000 0000"
          },
          "ccexp": {
            "selector": "#cc_expiry",
            "title": "Card Expiration",
            "placeholder": "00 / 00"
          },
          "cvv": {
            "display": "show",
            "selector": "#ccv",
            "title": "CVV Code",
            "placeholder": "***"
          },
        },
        'validationCallback': (field, status, message) => {
          if (status) {
            fieldsStatus[field].valid = true;
            this.$set(this.errors, field, '');

          } else {
            this.$set(this.errors, field, message);
            fieldsStatus[field].valid = false;
          }

          let disabled = false;

          for (let fieldStatus in fieldsStatus) {
            if (fieldsStatus.hasOwnProperty(fieldStatus)) {
              if (!fieldsStatus[fieldStatus].valid) {
                disabled = true;
                break;
              }
            }
          }
        },
        "fieldsAvailableCallback": function () {
        },
        'callback': (response) => {
          this.fireFormSubmitEvent(response);

        }
      });
    },
    fireFormSubmitEvent(response) {
      this.form.checkoutToken = response.token;
      this.form.cardReference = response.card.hash;
      this.form.payment_account_key = this.nmiAccount.account_key;
      this.form.gateway = this.nmiAccount.gateway

      this.$emit('submit-form');
    }
  },
  computed: {
    nmiAccount() {
      return this.$store.getters.getPaymentsKeys[this.currentStateCode]['Nmi'];
    }
  },
  watch: {
    'form.card_number'(value) {
      if (value > 16) {
        this.form.card_number = value.substr(0, 16);
      }

    },
  }
}
</script>

<style scoped>

</style>