Sending data to API using axios and vuejs and update the view

Question

I'm using Laravel and Vue to deal with an API. I send form data(card details for payment[card number, cvv, expiry date, amount]) and the process is like this:

1. If I post to an end in Laravel this card number, cvv, expiry date, amount, I get a 200 response which include a Transaction ID.

2. I have to send back OTP(One Time Password) associated with the Transaction ID, this requires to update the view in Laravel and provide a field to send the OTP so that the payment will be completed.

new Vue({
    el: '#app',
    data() {
        return {
            cardnumber: '',
            cvv: '',
            expirymonth: '',
            expiryyear: '',
            amount: ''
        }
    },
    methods: {
        updateView() {
            console.log("Update View");
            $("#app").hide();
        },
        onSubmit() {
            axios.post('/process', this.$data).then(response => {
                if (response.data.code == 200) {
                    let transactionid = response.data.transactionid;
                    console.log("Successfull. Txn ID: " + transactionid);
                    // Send OTP and transaction ID

                    axios.post('/process', {
                        PIN: "12345",
                        transactionid: transactionid
                    })
                        .then(response => console.log("Sending PIN"))
                        .catch(err => console.log("Error Sending PIN: " + err))
                }
            }).catch(err => console.log(err))
        }
    }
});

On line 26 is where I want to update the view and let the user provide OTP.

Answer 1

Since you need additional user interaction, I believe you should add a data attribute that allows you to track the step you are at...

Maybe this helps you...

new Vue({
el: '#app',
data() {
    return {
        step: 'init',
        txdetails: {
            cardnumber: '',
            cvv: '',
            expirymonth: '',
            expiryyear: '',
            amount: ''
        },
        transactionid: null,
        otp: null
    }
},
methods: {
    updateView() {
        console.log("Update View");
        $("#app").hide();
    },
    onSubmit() {
        switch(this.data.switch) {
            case 'init':  
                this.submitInit();
                break;
            case 'otp':
                this.submitOtp();
                break;
        }
    },
    submitInit() {
        axios.post('/process', this.data.txdetails).then(response => {
            if (response.data.code == 200) {
                this.transactionid = response.data.transactionid;
                this.step = 'otp';
            }
        }).catch(err => console.log(err))
    },
    submitOtp() {
        axios.post('/process', {
                    PIN: this.otp,
                    transactionid: this.transactionid
                })
                    .then(response => console.log("Sending PIN"))
                    .catch(err => console.log("Error Sending PIN: " + err));


    }
});

you can then use

<div v-if="step == 'init'">Show initial form here</div>
<div v-else>Show OTP form here</div>

to conditionally show initial form or the OTP form to request the user input and submit it to the server...

Hope this makes sense - don't just copy paste, as I didn't test the code - just quickly changed yours...