How do I add PayPal Smart Buttons to a Chrome Extension?

user_12462627 0
Viewed 533

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"]
  }
paypal-buttons paypal-sandbox google-chrome-extension paypal google-chrome
1 Answers

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!

user_94536440
Related