Push Contact form 7 variable to front end after submission

I have a contact form 7 form that’s sending information to an API. I want to display the API response on the front end.

there are 2 ways to go about solving this type of problem,

1- Use the CF7 plugin’s message response hook,

add_filter('wpcf7_display_message', 'my_response_msg',10,2);
function my_response_msg($message, $status){
    if('mail_sent_ok'==$status){
      $form = wpcf7_get_current_contact_form(); //in case you need the cf7 form object to validate....
      $message="Api response is: ". $api;
    }
  return $message;
}

however, keep in mind that you can only use text in this message, HTML markup will not work due to the limitations of the CF7 plugin reported here and here, and as you can appreciate, the functionality did exist, but the plugin author tends to bury his head in the sand on such type of issues.

2- if you need a richer interface, then you can either redirect the form submission process to another page on which you display your API response by storing it in a transient using similar logic to this answer…

or you can load a custom JavaScript on the form page which you trigger on the CF7 successful submission wpcf7mailsent event and then fetch the API request stored as a transient on the server using an AJAX request.