I am implementing PayPal payment system through smart buttons in a PWA app. The problem I am facing is that, by default in a PWA the address bar is hidden, so when the payment dialog for PayPal open it seems as if it's a dialog of the app itself. This is worrying because it doesn't give the user assurance that they're using PayPal's system and that their account is secure.
If I do the same thing through the browser, then the payment window opens in a separate tab with the URL being show.
How can I make it so that the similar behaviour is replicated on the app, or is there a way to show the address bar when the payment dialog is opened?
Screenshot of the dialog
I can't answer about showing an address bar in PWA, but if the goal is to make Smart Buttons open a new tab or redirect, the solution is: don't use Smart Buttons.
Instead, integrate two routes on your server, one for 'Set Up Transaction' and one for 'Capture Transaction', documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/
The first call will return an approval_url that you can simply redirect to (or open a full browser for), rather than using Smart Button JS.
After approval at PayPal in this new window/tab/browser you opened, the return will be to the return_url you specified at Set Up time, which can be a deeplink.
The return should then present an order review/confirmation page (unless you wish to skip this, for which you should specify an application_context object with user_action: 'PAY_NOW' so the user is clicking on the right verbiage for what you're going to be doing.)
Then on this return -- using the provided query string information -- run that second 'Capture Transaction' call. If the response happens to be INSTRUMENT_DECLINED, simply reopen the original approval_url since this situation is recoverable (some details on the situation here, though that demo and Handle Funding Failures guide are for Smart Buttons, but the concept is the same). If the response is success or any other error, proceed accordingly.
Related
We are using zapier's webhooks to collect answers we gather via html5 formatted mail messages. The mail is created with zapier and includes some dynamic info and two buttons to make your choice. These button actions are each linked to a different webhook. The webhook provided by zapier has a static part and a dynamic part which is a zapier variable. When the receiver pushes the button, a blank browser window shows up with, whether a short text or in "silent mode" a blank page.
Although we are sending an extra mail as confirmation for the decision made via mail, we would like to either avoid the showing of this blank page at all or maybe replace it by a customized HTML page that shows a more attractive web page.
We tried different approaches like using an additional javascript onlick action on the button to achieve the opening of two pages with one click. One with the webhook blank page as the trigger and another one with a nice confirmation message page for a nice user experience. Unfortunately, there are some mail client limitations that seems not to allow javascript executions.
Is there any workaround like using any third-party service that offers webhook containers with the possibility to customize the content of the page linked to the webhook URL or any idea on how to link a button action to two url’s?
Thank you for reading this long question. Any help would be greatly appreciated.
David here, from the Zapier Platform team.
I can't speak to other options, but the best choice for you here is probably to have the email link go to a static page with two buttons. That way, you'll be in the browser and can do whatever you need with JS. This is likely buttons that have onClick handlers and then show nice confirmations.
It also avoids false clicks, where a mail client tries to load external resources (which normally doesn't matter, but in this case can trigger a webhook).
I have a project written in perl-dancer and angular. Im using google as a openId system.
Some of my pages have an edit grid with a save button. In order to avoid loosing unsaved data on session(session created from perl-dancer) expire, I have an angular interceptor which listens to 401 server errors and opens an angular modal holding the "google login" button(this is triggered on server request after session expire).
I have set the opening of google form on a new tab instead of redirect from original page in order to avoid loosing the possibly unsaved data.
On successful google authentication the new tab redirects to the project homepage and the original stays with the open modal holding the "google login" button.
Ok now the new tab can be closed and on the original window the modal closed and the unsaved data is still there.
But this poor solution as result of not being allowed to embed the google login form or similar seems as a terrible solution from the user experience point of view.
Solutions, suggestions, help?!
One suggestion would be to check $state (or some other service) in the interceptor so you could set a flag in localStorage that indicates user has data being processed.
Then have a special route for this situation that just tells user to close the window and keep editing/saving in the previous window they have open
There would then be several different ways within the app start up you could check localStorage for this flag in order to redirect to that special route.
Within controller of that route clear the localStorage flag. You could even use localStorage events to close the modal in previous window automatically
Got a very strange issue, never seen it before. Basically in the admin section of our website, a user attempts to edit something by clicking a button.
This button attempts to call a webservice (via jquery, which the page will then use to show an edit form in shadowbox).
However the user informs me that instead of the form popping up as usual it is blank for a few seconds. Then this pops up:
Any ideas? The webservice is in the admin section, which requires the user to be in a role (which the user is, otherwise they would never get to the point of being able to click the edit button).
This is normal if your web service is located on a different machine as your web server.
If the two machines are on the same domain, then the browser will attempt to use the default network credentials that has been cached.
This dialog will also pop up if the default credentials used to access the web server (which could be anonymous) does not have access to the resource (folder) where the web service is running. The pop up gives the user an opportunity to enter another set of credentials.
I am writing a website that is essentially a client-side web app, i.e. everything on the page is populate by scripts with data from ajax APIs. Users would be also signing in and signing out using a set of APIs.
My question is about how do deal with the following (but not quite extreme) use case:
User opens browser tab A and go to the website and logged in as user #1.
User opens browser tab B and also go to the website. Since there is a get_session API, the script restores the session on tab B.
User logged out from tab B while leaves tab A open.
User forgets about tab A for sometime, and go back and interactive with tab A.
Scripts in tab A attempts to fetch new data as user #1 but encounter error.
Ideally, there should be some way in step 3 that the tab A would also log itself out when user clicked logged out in tab B.
It's possible to log out tab A in step 5 (GMail do that), but I think there should be a better way. Even checking in step 5 would be non-trivial, cause for such design every API must know exactly which user's data the script is requesting, or the below use case would generate incorrect output.
(1-3) same as above.
User opens browser tab A and go to the website and logged in as user #1.
User opens browser tab B and also go to the website. Since there is a get_session API, the script restores the session on tab B.
User logged out from tab B while leaves tab A open.
User log in again from tab B but this time as user #2.
User goes back to tab A and interactive. While thinking the user is user #1, the script in Tab A request data from API.
API returns data that belongs to user #2. Boom.
Is there a common practice to prevent these kind of problem? Thanks.
Tim
The ajax response should indicate as an error condition that the user has logged out; on the client side, detect this error and perform the appropriate action. Obviously this only works when there is an ajax response, so you might want to implement some kind of 'hearbeat' mechanism, that is, the client sends a ping-like ajax message to the server every few seconds. When you log out, the server will respond to the heartbeat with a 'user logged out' error, and the client can go into 'not logged in' mode.
I don't think there is, because such communication between pages (tabs) would be a significant security weakness.
However, you could achieve the same effect by having each page (tab) polling the server to see if the session is still valid. Or use one of the event-handling techniques such as long-polling or streaming in an iframe.
I have a problem with a website I'm currently working on.
I have added a Tweet box to my page for the user to tweet about the current article. If the user submits from the Tweet box and is not currently logged in or is not connected with my site, he/she gets a popup from twitter asking for username/password and/or if he/she accepts the connection with my site.
If the user accepts the popup is closed and all is good, if the user declines the window is just closed and the tweet remains a dream of what could have been.
So far so good, But! My site is mainly aimed at smartphones (in particular iPhone), and if the user adds my site to the home screen (which I recommend) then the twitter popup fills the whole app window. This I can understand, and everything works out if the user accepts.
If, on the other hand the user declines, there is no window for the button to close so noting happens. My webapp is running fullscreen and standalone so doesn’t even have a back button. So if the user doesn’t accept the twitter connect, he/she basically needs to restart the app to get avay from the “popup”.
So (finally ;) ) my question is this; is there a twitter page that performs the connect authentication that is not required to be in a popup? A page that basically sends you back to the callback url on both accept and cancel? Or is there a different approach that I have over looked?
Looking forward to some helpful tips!
EDIT
I was suggested The standard OAuth flow and Web intents, the problem is that the app needs to be client code/javascript only. This makes The standard OAuth flow impossible because it sends application secrets over http/https wich makes me put the secrets in the javascript ( I might be somewhat of a hobbyist programmer but there are limits ;) ).
Web intent pages don't have a cancel/back button so I'm still stuck if the user dont want to connect and is running my app in stanalone mode.
I guess I should have included this in the original post, thanks anyway for the suggestions.
The standard OAuth flow for Twitter does not require a popup. You can instead redirect the current window. You will then have to process the the form submit yourself and post the status through your server.
You might also checkout Web Intents. The user posts the tweet from a mobile optimized twitter.com page.