如何将 PayPal 智能按钮添加到 Chrome 扩展程序？答案

【问题标题】：How do I add PayPal Smart Buttons to a Chrome Extension?如何将 PayPal 智能按钮添加到 Chrome 扩展程序？
【发布时间】：2020-09-21 10:02:35
【问题描述】：

我认为这将是一个简单的 2 行集成，如 here 所示。但是在添加正确的 CSP 以允许在线执行之后，行为并不符合预期。窗口弹出并立即关闭。

这是我的 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 窗口将是 https://www.sandbox.paypal.com
遇到同样的错误 - 您找到解决方案了吗？奇怪的是，这只发生在 Mac OS 上，不仅会影响 PayPal 窗口，还会影响带有 identity.launchWebAuthFlow 的 OAuth Sigin 流。那里的行为相同，关闭新窗口也会关闭整个扩展。

标签： google-chrome google-chrome-extension paypal paypal-sandbox paypal-buttons

【解决方案1】：

这只是初始化 SDK。你必须做几件事：

将client-id=sb 替换为您自己的客户端ID。

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

创建一个空的<div>并在render()方法中通过id引用这个div
添加适当的回调函数以创建和完成订单。

例如。

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/#

谢谢！

【讨论】：

你实际上可以用最小的<script src="https://www.paypal.com/sdk/js?client-id=sb"></script> <script>paypal.Buttons().render('body');</script>打开一个窗口，所以他的问题是别的
点击按钮后打开和关闭窗口的相同问题。您可以看到here 的行为。 @wpmts
视频无法为我加载，您可以尝试重新上传吗？同时，你能检查开发控制台是否有任何 javascript 错误吗？
抱歉耽搁了，这是显示奇怪行为的视频。 youtube.com/watch?v=kn8D8zOMbCM&feature=youtu.be@wpmts
@Sandro_V 不，我们最终采用了另一种解决方案，在浏览器选项卡上打开付款验证。