<template>
  <div style="padding-top:550px">
    <form
      ref="form"
      target="_parent"
      action="https://sandbox.payfast.co.za​/eng/process"
      method="post"
    >
      <input type="hidden" name="merchant_id" :value="paymentObj.merchant_id" />
      <input type="hidden" name="merchant_key" :value="paymentObj.merchant_key" />
      <input type="hidden" name="return_url" :value="paymentObj.return_url" />
      <input type="hidden" name="cancel_url" :value="paymentObj.cancel_url" />
      <input type="hidden" name="notify_url" :value="paymentObj.notify_url" />
      <input type="hidden" name="name_first" :value="paymentObj.name_first" />
      <input type="hidden" name="name_last" :value="paymentObj.name_last" />
      <input type="hidden" name="email_address" :value="paymentObj.email_address" />
      <!-- <input type="hidden" name="m_payment_id" :value="paymentObj.m_payment_id" /> -->
      <input type="hidden" name="amount" :value="paymentObj.amount" />
      <input type="hidden" name="item_name" :value="paymentObj.item_name" />
      <input type="hidden" name="signature" :value="paymentObj.signature" />
    </form>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      loaded: false
    };
  },
  props: {
    paymentObj: {}
  },
  created() {
    this.populateData();
  },
  methods: {
    async populateData() {
      setTimeout(() => (this.loaded = true), 100);
      setTimeout(() => this.$refs.form.submit(), 100);
    }
  }
};
</script>

<style lang="scss" scoped></style>
