如何将 PayPal 智能按钮添加到 Chrome 扩展程序？
Posted
技术标签:
【中文标题】如何将 PayPal 智能按钮添加到 Chrome 扩展程序？【英文标题】：How do I add PayPal Smart Buttons to a Chrome Extension? 【发布时间】：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 流。那里的行为相同，关闭新窗口也会关闭整个扩展。
【参考方案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 不，我们最终采用了另一种解决方案，在浏览器选项卡上打开付款验证。以上是关于如何将 PayPal 智能按钮添加到 Chrome 扩展程序？的主要内容，如果未能解决你的问题，请参考以下文章