Stay within mobile app when connecting to bank

[roblog]

Hi this is a request for help rather than an issue. I hope it is ok to ask here as I did not know where best to ask. I'm developing a mobile app with Vue.js and using the Dropin initialisation script at https://pay.gocardless.com/billing/static/dropin/v2/initialise.js.

Everything is working great, I am able to generate the billing request flow, open the modal, and create an instant payment. The problem is though that during the flow, I confirm my bank, and am presented with a "continue to your bank" link. This takes me out of the modal, and out of the app, and opens up a tab in the default browser on the mobile device. After I have logged in to the bank, and made the payment, I then have to close the browser tab and go back to the app, which is a pretty poor user experience all in all.

I feel like I am missing something because this page says that the Dropin allows users to complete the flow without leaving the site, but I am finding this is not the case at all. In fact I'm failing to see the point of the Dropin if you are forced to leave it to log in to your bank?

The only way I can see round it is to launch the billing request flow using an In App browser, in order to not get taken into a completely different app, but if I do this, then I will no longer be using the Dropin.

Please advise ..

[roblog]

Here's an update for anyone with an interest in using GoCardless with Vue.js. I was unable to get the Drop-in to work satisfactorily. It did actually work, but the problem that I had with it was when the user is redirected to the bank, they are taken out of the mobile app and into the default browser for the mobile device. The checkout completes ok but it is an unsatisfactory user experience because they have to close the tab in the browser, then navigate go back to the app, which I think a lot of people would find confusing and or irritating.

After a lot of trial and effort I have got it working really nicely with Cordova Inappbrowser though. This works because nicely because the browser does not have tabs, so when you are directed to the bank during a billing request flow you remain in the same window in the app. Upon completion you are prompted to close the tab, and upon doing so you are taken straight back to the place you were in the app before launching the browser.

I had difficulties updating the app on the status of the payment creation during the flow, until I figured out that I could use the "loadstart" event listener that is provided by the browser to watch the page urls during the flow and use the value of the "outcome" parameter to inform the app.

The result is a pretty streamlined and user friendly checkout experience, although there are a lot of steps involved in the billing request flow, compared with a standard credit / debit card payment.