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="form-group" id="stripe-card-element"></div>

    <h6 v-html="cardErrors" class="mt-2 text-danger"></h6>
  </div>
</template>

<script>

import payments from "@/mixins/payments";

export default {
  name: "paymentElement",
  props: {
    form: {
      required: true
    },
    order: {
      required: false
    }
  },

  mixins: [payments],

  data() {
    return {
      cardErrors: '',
      paymentElement: ''
    }
  },
  mounted() {
    this.createStripeCard();
  },
  methods: {
    createStripeCard() {
      let elements = this.$stripe.elements();

      this.paymentElement = elements.create('card', {
        style: {
          base: {
            fontSize: '16px'
          }
        }
      });

      this.paymentElement.mount('#stripe-card-element');
      this.paymentElement.addEventListener('change', event => this.toggleStripeError(event));
    },
    toggleStripeError(event) {
      if (event.error) {
        this.cardErrors = event.error.message;
      } else {
        this.cardErrors = '';
      }
    },
    submitFormToCreateToken() {
      this.clearCardErrors();
      this.createIntent();
    },
    clearCardErrors() {
      this.cardErrors = '';
    },
    fireFormSubmitEvent() {
      this.form.gateway = this.stripeAccount.gateway;
      this.form.payment_account_key = this.stripeAccount.account_key;
      this.$emit('submit-form');
    },
    createIntent() {
      this.paymentFormSubmittingEvent();
      this.thds_tries = 0;
      this.form.is_intent = 1;
      this.$stripe.createPaymentMethod('card', this.paymentElement).then((result) => {
        if (result.error) {
          this.cardErrors = result.error.message;
          this.paymentFormSubmittedEvent();
        } else {

          let url = `payment/order/gateway-payment-token/Stripe`;

          if (this.order) {
            url += `/${this.order.id}`;
          }

          url += `?gateway_account=${this.stripeAccount.account_key}&payment_method_id=${result.paymentMethod.id}&amount=${this.form.amount}`;

          this.$axios.get(url).then((result) => {
            this.thds_tries++;
            this.handleServerResponse(result.data);
          }).catch((error) => {
            this.paymentFormSubmittedEvent();
            this.cardErrors = error.response.data.message;
          })
        }
      })
    },
  },

  computed: {
    stripeAccount() {
      return this.$store.getters.getPaymentsKeys[this.currentStateCode]['Stripe'];
    }
  }

}
</script>

<style scoped>
#stripe-card-element {
  border: 1px solid #9CA3B5;
  padding: 13px;
  box-shadow: none;
  text-shadow: none;
  border-radius: 4px;
  height: 50px;
  background-color: white;
}

</style>