How to trigger a modal to popup only if the back-end process needs it?

Question

I'm trying to finish the implementation of 3D Secure Authentication on my checkout process however since the 3DS Auth requires a modal pop-up using an iframe to redirect the user to the banks URL to approve the payment or not, since not all cards require 3DS Auth, my question is how can i trigger a modal pop-up from the back-end if the card needs to?

Example of the checkout

const checkout = async () => {
    var status = await foo();
    var next = await nextAction();
    
    if(status === 'succeeded') {
        // ...more code here...

        newSale.save()
        .then(() => {
            //payment is processed

            // ...code and redirect here...
        })
        .catch(err => console.log(err));
    } else if(status === 'awaiting_next_action'){
        console.log('3D Secure Authentication required');
        console.log(next);

        // I need to trigger the modal from the front-end here if needed...
        
    } else if(paymentIntentStatus === 'awaiting_payment_method') {
        console.log('The PaymentIntent encountered a processing error. ');
    }
}

as shown above, that 3DS Auth modal only needs to pop up if needed and if not it must not show.

Answer 1

然后后端必须在响应中传递某些参数，然后您可以使用 if, else 条件来检查该条件是否存在，然后相应地打开模态。