VueJS boostrap modal promise

callback-modal.vue

<template>
  <div class="position-relative" style="height: 100vh">

    <div class="card mb-2 position-absolute w-100" style="bottom: 0">
      <a
        v-if="isIframe"
        class="btn btn-block btn-success text-light"
        @click="close()"
        >Sample close on callback</a
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "view-dashboard-order-sucuess",
  computed: {
    isIframe: () => {
      return window.self !== window.top;
    }
  },
  methods: {
    close: function(){
      if(!this.isIframe) return;
      let vueEl = this.findClosestVue(window.frameElement);
      let handlOk = this.findClosesHandleOk(vueEl.__vue__);
      handlOk({vendor: 'cardcom',  vendoeCode: this.$route.query.lowprofilecode, orderId: this.$route.params.orderId})

    },
    findClosestVue: function findClosestVue(el){
      if(el.__vue__) return el;
      return this.findClosestVue(el.parentElement);
    },
    findClosesHandleOk: function findClosesHandleOk(vue){
        if(vue.handleOk) return vue.handleOk;
        return this.findClosesHandleOk(vue.$parent);
    }
  }
};
</script>

<style></style>

modal.vue

<template>
    <b-modal ref="paymentGateway" 
        @hidden="hideCallback" 
        @ok="handleOk" 
        no-close-on-esc 
        no-close-on-backdrop 
        size="xl"
        hide-header
        centered
    >

        <template v-slot:default="{}">

            <iframe :src="url" id="orderstVendor" style="min-height: 85vh; width: 100%; border: 0px;"></iframe>
          

        </template>

        <template v-slot:modal-footer="{ cancel }">
            <!-- Emulate built in modal footer ok and cancel button actions -->
            <a class="btn btn-danger text-light btn-sm" @click="cancel">
                <i class="fas fa-times"></i>
                {{ $t("views.dashboard.users.modal.edit.footer.btns.cancel.label") }}
            </a>
        </template>


    </b-modal>
</template>

<script>
export default {
    name: 'components.modals.paymentGateway',
    data: function(){
        return {
            url: ''
        }
    },
    created: function(){
        this.resetModal();
    },
    methods: {
        resetModal: function(){
            this.$set(this, 'url', '');
            this.queue = [];
        },
        showModal: function(options){
            if(options && options.url) this.$set(this, 'url', options.url);
            this.$refs['paymentGateway'].show();

            return new Promise((res, rej)=>this.queue.push({res, rej}));
        },
        hideCallback: function(){

            if(this.queue.length){
               var cb = this.queue.shift();
               cb.rej(new Error('closed modal'))
            }

            this.resetModal();
        },
        handleOk: function(data){

            if(this.queue.length){
               var cb = this.queue.shift();
               cb.res(data);
            }
            this.$refs['paymentGateway'].hide();
            this.resetModal();
        }
    }
}
</script>

<style>

</style>

sample-usage.vue

<template>
    <div>
        <a @click.prevent="pay(100)">A sample pay 100</a>
        <components-orders-modals-payment-gateway ref="paymentGateway" />
    </div>
</template>

<script>
export default {
    components: {
        componentsOrdersModalsPaymentMethod: ()=>import("@/components/orders/modals/paymentMethod.vue")
    },
    methods:{
        pay: function(amount){
            this.$refs.paymentGateway.showModal({url: 'https://www.mygateway.com/?amount='+amount}).then(function(){}).catch(err=>console.log(err))
        }
    }
}
</script>

<style>

</style>