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/Portal/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="container" id="pay-order-modal">
    <div class="checkout-box">
      <ValidationObserver v-slot="{ invalid }" ref="form">

        <payments-gateways :form="form"
                           :order="order"
                           ref="payments-gateways"
                           @payment-form-submitting="()=>canSubmit=false"
                           @payment-form-submitted="()=>canSubmit=true"
                           @ready-to-submit="submitForm"/>

        <h6 v-if="responseErrorMessage" v-html="responseErrorMessage" class="my-2 text-danger"></h6>

        <button id="payment-form-submit"
                :disabled="!canSubmit || invalid"
                @click.prevent="submit" class="btn btn-success pull-right">
          Pay (<b>{{ $money(order.amount) }}</b>)
        </button>

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


</template>

<script>

import forms from "@/mixins/forms";
import PaymentsGateways from "../Forms/PaymentsGateways";

export default {
  name: "PayOrderModal",
  components: {PaymentsGateways},
  mixins: [forms],
  props: {
    order: {
      required: true
    }
  },
  data() {

    return {
      responseErrorMessage: '',
      canSubmit: true,
      form: this.$form({
        gateway: '',
        cardReference: '',
        payment_account_key: '',
        checkoutToken: '',
        is_intent: '',
        cardholder_name: this.order.full_name,
        card_number: '',
        card_expiry_month: '',
        card_expiry_year: '',
        cvv: '',
        zip_code: ''
      })
    }
  },
  methods: {
    submit() {
      this.$refs['payments-gateways'].submit();
    },
    submitForm() {
      this.form.canSubmit = false;
      this.responseErrorMessage = '';

      this.form.post(`orders/${this.order.id}/do-pay`)
        .then(this.formSubmittedSuccessfully)
        .catch(this.formSubmitFailed)
    },
    formSubmittedSuccessfully(response) {
      this.form.canSubmit = true;
      this.$toast.success(response.message);
      this.$bvModal.hide('payOrderModal');

      setTimeout(() => {
        window.location.reload();
      }, 1000);
    },
    formSubmitFailed(response) {
      this.form.canSubmit = true;
      this.responseErrorMessage = response.message;
    }
  },
}
</script>

<style>
#pay-order-modal .checkout-box {
  box-shadow: unset !important;
  padding: unset !important;
}


#stripe-element-errors {
  margin-top: 10px;
  color: red;
}

#payOrderModal___BV_modal_body_ {
  padding: 5px;
}
</style>