<template>
  <div class="container" style="margin-bottom:30px">
    <div class="row" v-if="loaded">
      <div class="col"></div>
      <div class="col-sm-6" sm="6">
        <div class="card cardShadow">
          <div class="container">
            <div class="row" align="center">
              <div class="row" align-v="center" style="width:100%">
                <div class="col">
                  <img width="150px" height="70" src="/img/logos/UVProp.png" />
                </div>
              </div>
            </div>
            <hr />
            <div class="row">
              <iframe
                style="min-height:750px;"
                name="payment_frame"
                width="100%"
                height="100%"
                frameborder="0"
              ></iframe>
              <form
                ref="form"
                target="_parent"
                action="https://secure.paygate.co.za/payweb3/process.trans"
                method="POST"
              >
                <input type="hidden" name="PAY_REQUEST_ID" v-model="paymentReqId" />
                <input type="hidden" name="CHECKSUM" v-model="checksum" />
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="col"></div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      loaded: false
    };
  },
  props: ["checksum", "paymentReqId"],
  created() {
    this.populateData();
  },
  methods: {
    async populateData() {
      setTimeout(() => (this.loaded = true), 100);
      setTimeout(() => this.$refs.form.submit(), 100);
    }
  }
};
</script>

<style lang="scss" scoped>
.cardShadow {
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.281), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
