5

I thought that it would be an easy 2 line integration as seen here. But after adding the correct CSP in order to allow in line executions, the behavior is not as intended. The window pops up and closes immediately.

Here is my popup.html

<html>
    <head>
            <title>Quick Launcher</title>
            <link rel="stylesheet" href="style.css" />
            <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>

        </head>
    <body>

        <h1>My chrome</h1>
        <script>paypal.Buttons().render('body');</script>


    </body>

</html>

manifest.json

{
    "manifest_version": 2,
    "name": "Quick Launcher",
    "description": "Smart links organizer. Create collection of related links or add urls of different environments(uat, prod) of various deployed apps",
    "version": "1.2.10",
    "icons": {
    },
    "browser_action": {
      "default_icon": {
      },
      "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://www.paypal.com 'sha256-U2vsCzUQ797LcHkgCQJsOSAJxY/+LTdJONJ+wacPXrI='; object-src 'self' https://www.paypal.com 'sha256-U2vsCzUQ797LcHkgCQJsOSAJxY/+LTdJONJ+wacPXrI='; script-src-elem 'self' https://www.paypal.com 'sha256-U2vsCzUQ797LcHkgCQJsOSAJxY/+LTdJONJ+wacPXrI='",
    "background": {
      "scripts": [
        "background.js"
      ]
    },
    "permissions": ["tabs", "activeTab"]
  }
DanielC
  • 83
  • 5
  • Maybe not relevant to your problem, but the PayPal window in this case will be `https://www.sandbox.paypal.com` – Preston PHX Jun 02 '20 at 22:04
  • Got the same error - did you find a solution? Strange thing is, this only happens on Mac OS and impacts not only the PayPal Window but also the OAuth Sigin flow with identity.launchWebAuthFlow. Same behavioure there, closing the new window also closes the whole extension. – Florian Fuchs Dec 02 '20 at 12:36

1 Answers1

1

that is just initializing the SDK. You have to do a few things:

  1. replace the client-id=sb with your own client id.

https://developer.paypal.com/docs/api/overview/#get-credentials

  1. create an empty <div> and reference this div by id in the render() method

  2. Add the appropriate callback functions to create and complete an order.

ex. 

paypal.Buttons({
    createOrder: function(data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) {
        // This function shows a transaction success message to your buyer.
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');
  //This function displays Smart Payment Buttons on your web page.

https://developer.paypal.com/docs/checkout/integrate/#

Thanks!

wpmts
  • 11
  • 1
  • You actually can get a window to open with just the minimal ` `, so his problem is something else – Preston PHX Jun 02 '20 at 21:55
  • 1
    Same issue of the window opening and closing after clicking on the button. You can see the behavior [here](https://drive.google.com/file/d/1q5of4_xm7cGeQvrEkyM-RM6TTqMUEx-7/view?usp=sharing). @wpmts – DanielC Jun 03 '20 at 00:23
  • The video won't load for me, can you try uploading it again? In the meantime, can you check the dev console for any javascript errors? – wpmts Jun 03 '20 at 03:41
  • Sorry for the delay, here's the video showing weird behavior. https://www.youtube.com/watch?v=kn8D8zOMbCM&feature=youtu.be @wpmts – DanielC Jun 26 '20 at 07:29
  • @DanielC I have exactly the same problem. Could you solve it? – Sandro_V Dec 02 '20 at 12:34
  • @Sandro_V, can you view the Network tab within dev tools to see if the PayPal Request is failing? – wpmts Dec 03 '20 at 16:34
  • It is not just happening with the PayPal request but also with Social Login like Facebook, Amazon, etc. – Sandro_V Dec 04 '20 at 10:04
  • 1
    @Sandro_V No, we ended up going with another solution to open payment verification on a browser tab. – DanielC Dec 06 '20 at 23:45