PayPal Smart Button window immediately closes in a React Chrome Extension, but doesn't if you first inspect the extension

Viewed 218

This situation is as weird as it sounds. I've put a PayPal smart button in my chrome extension, and it's supposed to pop up a window to pay when you click on it, but it immediately opens and then closes if you click on it. However, if you first inspect the element of the chrome extension first, it works as intended.

Here is a video of this in action

To reproduce, use create-react-app and change manifest.json to support chrome extensions like in this guide.

Then npm install the React component for PayPal smart buttons found here.

Change your manifest.json in order to allow cross site scripting from the PayPal sdk. Mine looks like this:

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the pop"
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "content_security_policy": "script-src 'self' https://www.paypal.com 'sha256-XO8a3VLCcLhZnllQZgHKyrG3nkR+E4otizACoHJ7aEA'; object-src https://www.paypal.com 'self';",  
  "permissions": [
    "tabs", "activeTab", "http://*/", "https://*/"
  ]
}  

Finally, change your App.js to include the component, npm run-script build, and load it into your chrome extension to reproduce:

import React from 'react';
import { PayPalButton } from "react-paypal-button-v2";


function App(){
    return(
    <div style = {{width:"30px"}}>
    <PayPalButton
      amount="0.01"
      style = {{    
        label: "pay",
        tagline: "false",
        layout:"horizontal", 
        color:'gold', 
        label:'paypal'}}
      shippingPreference="NO_SHIPPING"
      onSuccess={(details, data) => {
        alert("Transaction completed by " + details.payer.name.given_name);

        // OPTIONAL: Call your server to save the transaction
        return fetch("/paypal-transaction-complete", {
          method: "post",
          body: JSON.stringify({
            orderID: data.orderID
          })
        });
      }}
    />
  </div>
  )

}

export default App
0 Answers
Related