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/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>

    <ValidationProvider v-slot="{errors}" rules="required" name="paymentMethod" v-if="ready">
      <keep-alive>

        <stripe-other-cards :form="form"
                            @payment-form-submitting="$emit('payment-form-submitting')"
                            @payment-form-submitted="$emit('payment-form-submitted')"
                            :paymentMethod="paymentMethod"
                            v-if="hasGateway('Stripe') && form.amount"
                            @has-other-payment-opts="()=>hasStripeOtherOptions=true"
                            ref="stripe_other_cards"
                            @submit-form="$emit('ready-to-submit')"/>

      </keep-alive>

      <!--Stripe-->
      <div class="payment-box" v-if="hasGateway('Stripe')">

        <label class="step-radio-label">
          <input type="radio" name="paymentMethod" class="radio-input" v-model="paymentMethod"
                 value="stripe_credit_card">

          <div class="step-radio-box" v-b-toggle.stripe-credit-card-element>
            <div class="outer">
              <div class="inner"></div>
            </div>
            <p>Credit/Debit Card</p>
            <div class="img-wrapper">
              <img src="/images/payments/payment-img-1.svg" alt="VISA">
              <img src="/images/payments/payment-img-2.svg" alt="Master Card">
              <img src="/images/payments/payment-img-3.svg" alt="Discover">
              <img src="/images/payments/payment-img-4.svg" alt="American Express">
            </div>
          </div>
        </label>

        <b-collapse id="stripe-credit-card-element" accordion="payment-methods-accordion">

          <keep-alive>
            <stripe-card-element :form="form"
                                 @payment-form-submitting="$emit('payment-form-submitting')"
                                 @payment-form-submitted="$emit('payment-form-submitted')"
                                 @submit-form="$emit('ready-to-submit')"
                                 ref="stripe_credit_card"
                                 :order="order"
                                 class="payment-details credit-card"
                                 v-if="paymentMethod==='stripe_credit_card'"/>
          </keep-alive>


        </b-collapse>


      </div>
      <!--NMI-->
      <div class="payment-box" v-if="hasGateway('Nmi')">

        <label class="step-radio-label">
          <input type="radio" name="paymentMethod" class="radio-input" v-model="paymentMethod"
                 value="nmi_card">
          <div class="step-radio-box" v-b-toggle.nmi-card>
            <div class="outer">
              <div class="inner"></div>
            </div>
            <img src="/images/payments/nmi.png" alt="nmi" class="payment-img">

          </div>
        </label>

        <b-collapse id="nmi-card" accordion="payment-methods-accordion">
          <keep-alive>
            <nmi :form="form"
                 @payment-form-submitting="$emit('payment-form-submitting')"
                 @payment-form-submitted="$emit('payment-form-submitted')"
                 class="payment-details credit-card"
                 v-if="paymentMethod==='nmi_card'"
                 ref="nmi_card"
                 @submit-form="$emit('ready-to-submit')"/>
          </keep-alive>

        </b-collapse>
      </div>
    </ValidationProvider>

    <h3 v-else>
      Loading payments gateways...
    </h3>

  </div>

</template>

<script>
import StripeCardElement from "@/components/Forms/Payments/stripeCardElement";
import StripeOtherCards from "@/components/Forms/Payments/StripeOtherCards";
import Nmi from "@/components/Forms/Payments/Nmi";

export default {
  name: "PaymentsGateways",
  props: ['form', 'order'],
  components: {
    Nmi,
    StripeOtherCards,
    StripeCardElement
  },
  head() {
    return {
      script: [
        {
          src: 'https://js.stripe.com/v3',
          defer: true,
          callback: () => {
            this.loadPaymentsComponents();
            this.ready = true;
          }
        },
      ]
    }
  },
  data() {
    return {
      ready: false,
      paymentMethod: '',
      hasStripeOtherOptions: false
    }
  },
  methods: {
    submit() {

      let targetPaymentComponent = this.$refs[this.paymentMethod];


      if (targetPaymentComponent.submitFormToCreateToken) {
        targetPaymentComponent.submitFormToCreateToken();
      }
    }
  }
}
</script>

<style scoped>

</style>