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 card-no" id="stripe-other-cards-elements" style="width: 25%"></div>

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

  </div>
</template>

<script>

import payments from "@/mixins/payments";

export default {
  name: "StripeOtherCards",
  mixins: [payments],
  props: {
    form: {
      required: true
    }
  },
  data() {
    return {
      cardErrors: '',
      paymentElement: '',
      noOtherPaymentMethodsFound: false,
      thds_tries: 0
    }
  },
  mounted() {
    this.createStripePaymentRequest();
  },
  methods: {
    toggleStripeError(event) {
      if (event.error) {
        this.cardErrors = event.error.message;
      } else {
        this.cardErrors = '';
      }
    },
    submitFormToCreateToken() {
      this.clearCardErrors();
      this.createIntent();
    },
    fireFormSubmitEvent() {
      this.form.gateway = this.stripeAccount.gateway;
      this.form.payment_account_key = this.stripeAccount.account_key;

      this.$emit('submit-form');
    },
    clearCardErrors() {
      this.cardErrors = '';
    },
    createStripePaymentRequest() {

      let paymentRequest = this.$stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
          label: 'Estimated Order Total',
          amount: Math.round(this.form.amount * 100),
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });


      let elements = this.$stripe.elements();


      this.paymentElement = elements.create('paymentRequestButton', {
        paymentRequest: paymentRequest
      });

      paymentRequest.canMakePayment().then((result) => {
        this.noOtherPaymentMethodsFound = false;

        if (!result) {
          return this.noOtherPaymentMethodsFound = true;
        }

        this.paymentElement.mount('#stripe-other-cards-elements');

        this.paymentElement.addEventListener('change', event => this.toggleStripeError(event));

        this.bindPaymentRequestEvents(paymentRequest);

        this.$emit('has-other-payment-opts')
      });
    },
    bindPaymentRequestEvents(paymentRequest) {
      paymentRequest.on('token', function (event) {
        // event.token is available
        // console.log('paymentRequest.token', event);
      });

      paymentRequest.on('paymentmethod', this.onPaymentMethod);


      paymentRequest.on('source', function (event) {
        // event.source is available
        // console.log('paymentRequest.source', event);
      });

      paymentRequest.on('cancel', function () {

        // handle cancel event
        console.log('paymentRequest.cancel');
      });


    },

    onPaymentMethod(event) {

      let url = `payment/order/gateway-payment-token/Stripe?gateway_account=${this.stripeAccount.account_key}&payment_method_id=${event.paymentMethod.id}&amount=${this.form.amount}`;
      this.$axios.get(url).then((result) => {
        let data = result.data;
        this.handleServerResponse(data, event);
      }).catch((error) => {
        this.paymentFormSubmittedEvent()
        this.cardErrors = error.response.data.message;
        event.complete('fail');
      })
    },

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

</script>

<style scoped>

</style>