I'm new to PayPAl integration and really, anything to do with payment systems and gateways. I'm just getting my feet wet here - just to give perspective.
That being said, I've followed PayPal's instructions for implementing their buttons just fine. They show up great at the public facing website. It's just that, when I go to select any of the buttons (say, Venmo), there is a box that pops up, then disappears quickly.
If I load the same web page up in a browser on the server directly, the box loads fine and I am able to complete an entire sandbox transaction perfectly.
I don't want my web visitors to have to RDS in to my web server to initiate a payment; the friction on that would be kind of high. Does anyone have a lead on what might be the issue. I am so close.
I've contemplated a few things already...
When I look at the code that PayPal instructed me to copy/paste in its integration guide I see references to "localhost" calls, so I'm guessing that's part and parcel of the problem. It took me all night to figure out that my web server needed to be running Node JS first before their scripts would work (a point not made clear at all when PayPal throws code at you and suggests all you need to do is copy/paste, but whatever, I get that they figure everyone is a developer), and to get it installed to a point where everything at least worked locally. So my understanding of how that framework works with IIS on a Windows server is just about non-existent.
If you want to experience the break yourself, here is a link to the website.
I copy/pasted PayPal's integration code for their standard buttons. Eventually I learned that code needed Node JS to work, and so I installed that and managed to get the buttons working fine when loaded in a browser locally.
From the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9597/orders. (Reason: CORS request did not succeed).
Ideally you want it to be hosted on the same domain (including www.) and same standard HTTP :80 or HTTPS :443 port as the site itself and use a relative path, then CORS will not be necessary, i.e.
const response = await fetch("orders", {
method: 'POST',
});
, or fetch("/orders"), or fetch("/api/orders") or similar.
The sample node.js that PayPal provides is just an example, since JavaScript is the most widely understood language. You don't have to use node, the same backend functions/logic can be implemented in any language environment, e.g. .NET C# or whatever, as long as you rewrite them for the appropriate language obviously.