官方NPM包@paypal/react-paypal-js:https://www.npmjs.com/package/@paypal/react-paypal-js仅支持需要 client_id 的按钮，我还没有找到任何可以简化“捐赠”按钮实现的内容。 PayPal 在“捐赠”按钮文档中仅提供以下 HTML 代码。如果有人有类似的经历，请告诉我，以及您是如何在 React/Gatsby 中正确实现它的。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>
<body>
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
</body>
<body>
<div id="paypal-donate-button-container"></div>
<script>
PayPal.Donation.Button({
env: 'sandbox',
hosted_button_id: 'YOUR_SANDBOX_HOSTED_BUTTON_ID',
// business: 'YOUR_EMAIL_OR_PAYERID',
image: {
src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
title: 'PayPal - The safer, easier way to pay online!',
alt: 'Donate with PayPal button'
},
onComplete: function (params) {
// Your onComplete handler
},
}).render('#paypal-donate-button-container');
</script>
</body>最佳答案
有两种方法可以使用 React 中的捐赠 SDK HTML/JS。
将应用配置为在页面加载时加载 SDK 脚本(通常作为页面
<head>的一部分)。然后，渲染按钮的 JS 可以作为组件的一部分运行/输出。Insert the script element into the DOM after page load and once loaded render buttons with a callback function 。这都可以放在 React 组件的
useEffect中或类似的。使用loadAsync的链接示例用于 Checkout SDK，但可以轻松替换为 Donate SDK 代码。
您可以使用捐赠 SDK 和 hosted_button_id正如您所提到的(在 https://www.paypal.com/buttons (实时)或 www.sandbox.paypal.com/buttons 创建) - 或者，而不是托管按钮 id 只需传递 business参数包含接收帐户的 PayPal 电子邮件地址或(理想情况下)其 PayPal Merchant ID (因为这永远不会改变，而电子邮件可以从帐户中删除并且不再指向它)
稍后编辑:请注意，捐赠 SDK 与简单地使用文本“捐赠”重新标记普通 PayPal Checkout SDK 按钮是分开的，后者可以通过 per the react-paypal-js storybook example 完成。 ，正如另一个答案提到的。这种方法的问题是，单击按钮后，它看起来像标准的 PayPal 结帐，而不是特定于捐赠的流程...
使用实际的捐赠 SDK 会产生更加量身定制的捐赠者流程，他们可以在大量输入中选择任意金额，甚至可以选中一个选项以使其经常性捐赠:
关于reactjs - React 中的 PayPal 捐赠按钮 : Donate SDK or Checkout SDK integration?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71638273/