How to add paypal subscription button to my chrome extension?

32 Views Asked by At
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <title>Flexi Calci</title>
</head>
<body>
    </div>

        <div id="paypal-button-container-P-30451526T9649281TMX"></div>
        <script src="https://www.paypal.com/sdk/js?client-id=AQfUPqCKl3ThEvrldjThW9MTVGkLBJVAT89oen9Rtem9c0fuw8ul8FWaKriW4qSZ7rwlYdM6JUp&vault=true&intent=subscription"data-sdk-integration-source="button-factory"></script>
        <script>
          paypal.Buttons({
              style: {
                  shape: 'pill',
                  color: 'gold',
                  layout: 'horizontal',
                  label: 'subscribe'
              },
              createSubscription: function(data, actions) {
                return actions.subscription.create({
                  /* Creates the subscription */
                  plan_id: 'P-30451526T9649281TMX'
                });
              },
              onApprove: function(data, actions) {
                alert(data.subscriptionID); // You can add optional success message for the subscriber here
              }
          }).render('#paypal-button-container-P-30451526T9649281TMX'); // Renders the PayPal button
        </script>

    </div>
    <script type="text/javascript" src="js/js.js"></script>
</body>
</html>

This is the code that paypal gives to create a donation button. However when i try to run it, chrome extension gives error for unsafe eval and content security policy for which i am highly unaware of.

Can you please help by giving the reason for why it doesn’t work and how can it be corrected?

{
  "manifest_version": 3,
  "name": "FlexiCalci",
  "description": "Get more done in less time with FlexiCalci, the calculator that lets you work smarter, not harder.",
  "version": "1.0.2",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage"],
  "icons": {
    "16": "img/logo16.png",
    "32": "img/logo32.png",
    "48": "img/logo48.png",
    "128": "img/logo128.png"
  }
}

This is my manifest.json

Debugging Image

1

There are 1 best solutions below

2
Preston PHX On

PayPal JS SDK integrations load an external resource; this is not supported by Chrome extensions.

An alternative is to use a subscription link rather than button code. You can 'Copy Link' from the list in the PayPal account, https://www.paypal.com/billing/plans

It will give a link of the form:

https://www.paypal.com/webapps/billing/plans/subscribe?plan_id=P-30451526T9649281TMXXXXXX