facebook messenger - close webview and notify webhook

Question

I'm sending the user from the messenger chat to a payment page in my application. Messenger opens the page in a webview. Now I'd like to close the webview and send the user back to Messenger while also sending something to the webhook in order to notify it that the user has finished the payment page.

What is the best way to accomplish this?

Answer 1

You can only achieve this if the payment page is controlled(developed by you), if it is a third party payment gateway there is nothing you can do. if the payment page is controlled by you, you can pass the sender ID as a parameter via web_url or get the sender ID via

<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
 }(document, "script", "Messenger"));

  window.extAsyncInit = function () {
  // the Messenger Extensions JS SDK is done loading
   MessengerExtensions.getUserID(function success(uids) {
    var psid = uids.psid;//This is your page scoped sender_id
    alert(psid);
}, function error(err) {
    alert("Messenger Extension Error: " + err);
});
};
</script>  

using the sender ID you can then send a message text back to the bot. to close the webview after all of this include this script after sending the text to the bot

   <script>
  (function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, "script", "Messenger"));

  window.extAsyncInit = function () {
  // the Messenger Extensions JS SDK is done loading
  //close the webview
  MessengerExtensions.requestCloseBrowser(function success() {

  }, function error(err) {

  });

  };
  </script>

Just like from within your Bot you have to ensure that the page access token is available before you send the text, also ensure that you whitelist the domain used in you webview and you set "messenger_extensions": true, in your web_url button or you won't be able to get the Sender ID using messenger Extension

references

url button

messenger extension