I'm new to the react web app, I trying to create cart payment checkout process. All the modules PayPal button open in same page with POPUP. I want to redirect from my site to the PayPal site and return back to my site. Currently i'm using the below example. Is there any module to create order and redirect.
https://www.npmjs.com/package/react-paypal-button-v2
Why do you want to redirect away from your site? That's how things were done 5+ years ago.
It's much better to keep your site loaded and present in the background and show payers an in-context approval experience, instead of redirecting them over to a new and possibly unfamiliar login page.
You are asking for how to do something you shouldn't even be trying to do, and which will result in an inferior buyer experience and fewer completed checkouts, which is the opposite of what you should want.
But since you ask, the way to do it is not not use the PayPal JavaScript SDK button. Just use the /v2/checkout/orders REST API to create an order and receive an approval_url, which you can redirect to with a static "Checkout with PayPal" button from, say, https://www.paypal.com/us/webapps/mpp/logos-buttons
Again, full page redirects are an old integration method that give a poor buyer experience and you shouldn't use this method.
Related
Folks,
We are in a unique situation here. Our React site integrates with Signicat for identity solution. Most of our user base comes from Facebook i.e. they use the Facebook app, look at our posts and click on links we post which redirect to certain sections in our website which require identification.
So an example link posted on Facebook group https://example.com/en/startpage-in-english/ is converted into https://l.facebook.com/l.php?u=https%3A%2F%2Fexample.com%2Fen%2Fstartpage-in-english%2F%3Ffbclid%3DIwAR3loYqYOvom5k8_mOww89p5tun5H9HqIIKE1ebwwCcB3PD4jzxpTVyZGCk&h=AT1E3p1ejYWH9l2KhUo8D_RVjl_EzKBat4woeMHgRv7yXpT9Y-EZoBcK26sQtjjBBwAQt7Pt83a-i_k5JCGuvOBWfgB9pZ7Uv8LnDlyphNKc1Og0nl6QIqWd_nFEAva3OWN-PZ3byqsU7K0I5A&__tn__=-UK-R&c[0]=AT0-5n51iPMlSYghORXW8qxYXJQEejQTAhfiDQ3P3DK_ZTZM3GWbN4zXYKf-nyD_hWJdxQccenDp-5VgphfWuD6ZQ0ikeXq4lv4bjLbSJVFP9k4IxeMBT5mDa9jNdYnYlNs-DkXOM-LiPhhl-Obra9CAbtvihe-G7-8. When users click on the link, Facebook by default opens the link in its own Facebook browser. The subsequent steps in our portal need the user to identify himself and when the identification is completed and in the final step the request to Signicat hangs forever.
We identified that this issue is only happening with Facebook browser and hence one of the workarounds was to Open the default browser with the link to our website.
Note that:
a. this is not a React-Native app, our website is built using plain React hence the WebView solution does not work.
b. Facebook browser suppresses "window.open" with "newwindow" call and simply displays the site in the same Facebook browser instance.
So bottom line is, we need a way to Open the default OS Browser from Facebook App/Browser with the link to our site. Hope somebody can help!
Thanks in advance...
SG
I have an angularjs app with ASP.NET WebAPI2 REST APIs. There is a scenario where I have a display a popup for initiating a survey for end users (both authenticated and anonymous types). On clicking the popup options, the user will be redirected to another applicaiton which captures all the responses provided by the user.
There is no relation between the angularjs app and the survey application.
Now next time if the user revisits the application then in that case based on the previous action taken to fill the survey , I have to take a decision to display or hide the popup for the user.
I thought of cookies and localStorage as the options but I think are not ideal choices for this scenario.
Can anyone help me to know are there any other possible options to handle this scenario?
You can solve this using the redirection link.
For example if he finished correctly the Survey you will redirect him to:
www.myapp.com/survey/success
Than in the App you can do something like: get the URL parameters, if the parameters is success store it on localStorage so next time he revisits the web-page the Popup wont show.
Otherwise direct him to:
www.myapp.com/survey/
I think the best option here is to save this information in the database using your ASP.NET WebAPI2 REST APIs. In the moment that the end user clicks the survey you can also make an Api call which will save in the database info about user's action(this will probably be sth you can do for authenticated users). For not authenticated users you can just save that information in localStorage in the moment they are clicking the survey.
I am came across to a situation where I need to use a adf popup to put a payment system on it from zoho subscriptions. The way we developed it, when user agrees such some condition they will get a pop up where the zoho subscription payment shows up. Everything was working as expected but when user confirm payment the embedded zoho payment system triggers thank you page after showing the payment successful from the popup. We cannot use javascript that's is requirements. We need to close the popup when payment successful. Can any one put some idea which direction we should go to achieve this solution?
How about using the API that ZOHO provides to conduct the payment through your code instead of relying on their UI.
This will allow you to control the full UI experience from ADF.
ADF should be able to access the API easily.
https://www.zoho.com/invoice/api/v3
I'm implementing an application using the full MEAN stack.
I created a login page to signup with facebook to be able to show a profile page. But I discovered some problems. For this reason, I created a smaller version of my webapp, maintaining the same project structure.
The complete code, executable (only replacing "client id" and "secret") with "npm install" and after "nodemon" is available here: https://github.com/Ks89/MEAN-OAuth_Example
If I'll call (with a browser) the rest API that I created to login with facebook at "http://localhost:3000/api/auth/facebook", everything will be ok!
But if I'll want to do the same thing, clicking on the "Login" button, I'll receive the error as in figure:
I know that the problem is related to CORS, but how can I'll fix this in my application, maintaining the same project structure?
I don't want to put the "rest path" inside the HTML. I tried for many days different solutions without success.
If you want, experiment directly on my application that I created exactly to write this question ;).
If really necessary, I'll able to post the entire source code here, but I prefer an organized and executable code into a repository for this particular question.
Please, give me some ideas and hopefully a solution, because I'm really blocked.
The example routes from the passport-facebook repo are intended for multipage apps, not ajax requests. If you look at what those routes are doing, /auth/facebook is just a redirect to Facebook where the user is expected to log in if necessary and authorize your application. When you make that same request from angular, it follows the redirect and tries to load the Facebook page, but the browser blocks you as your console screenshot shows. CORS would be relevant if Facebook wanted to allow you to request their login form across origins, but they don't because that would basically make you a phisher.
It looks like you're trying to handle authentication without leaving the page, but at some point you're going to need the user to leave your site and be redirected to Facebook in order to complete the OAuth flow. You can either open a pop-up containing the Facebook OAuth dialog (it looks like this is what the Facebook JavaScript SDK does by default) or just use your app's current tab with something as simple as <a ng-href="{{facebookOauthUrl}}">Log in with Facebook</a>.
Our application is a one-page application created using ExtJs. For any user action, the browser tab is never reloaded and all the actions are performed using ajax. A user can open/close multiple ExtJs windows/panels within the same browser tab, and this way everything remains confined to the same browser tab.
Now, we need to integrate payment gateway in the application, which involves redirecting the user to the bank website and having her brought back to our application.
The issue is that when browser redirects the user, then all the application javascript code along with panels and windows get destroyed, and when the user comes back to the application then she finds it to be different from one she left.
As a solution to this, we were thinking of using following two appraoches:
Option 1. Maintaining the state of application - When user leaves for the bank's website then somehow we maintain the state of application - like which windows are opened carrying what data, which variables have which values etc.. and when user returns back, we generate the same application state for her.
Option 2. Have a browser pop-up window for payment gateway - We intend to provide a button which will open a small pop-up window carrying the transaction details, and in this pop-up window the entire payment gateway process will take place taking care of redirection and everything.
Option 1 is proving to be very cumbersome and complicated as maintaining the exact state is not getting feasible.
For Option 2, we are not sure if this is safe and possible?
Has anyone implemented such an approach earlier. Otherwise, what are the other options which we can go for?
Thanks for any help in advance.
I faced the problem and I implemented it using websocket/polling in the main application while a new window pops up for the payment.
After the payment is successful the main application will be notified.
That way each payment runs in it own sandbox totally unbound from the main application which makes maintenance quite easy. Note that our backend create a new session for each payment using the existing one.
I think it is not uncommon to open new windows for payment that's why I decided to go this.