React 中的 PayPal 捐赠按钮：捐赠 SDK 或 Checkout SDK 集成？

Question

官方 NPM 包@paypal/react-paypal-js：https://www.npmjs.com/package/@paypal/react-paypal-js 只支持需要 client_id 的按钮，我还没有找到任何可以简化 Donate 按钮实现的东西。贝宝在捐赠按钮文档中仅提供下面的 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>

Answer 1

有两种方法可以使用来自 React 的 Donate SDK HTML/JS。

将应用配置为在页面加载时加载 SDK 脚本（通常作为页面 <head> 的一部分）。渲染按钮的 JS 可以 run/outputted 作为组件的一部分。
。这都可以放在 React 组件的 useEffect 或类似的地方。使用 loadAsync 的链接示例适用于 Checkout SDK，但很容易将其换成 Donate SDK 代码。

您可以将 Donate SDK 与您提到的 hosted_button_id 一起使用（创建于 https://www.paypal.com/buttons (live) or www.sandbox.paypal.com/buttons) -- or alternatively, instead of a hosted button id just pass a business parameter with either the receiving account's PayPal email address or (ideally) its PayPal Merchant ID（因为它永远不会改变，而电子邮件可以从帐户中删除并且不再指向它)

稍后编辑：请注意，捐赠 SDK 与简单地使用文本“捐赠”重新标记普通的 PayPal Checkout SDK 按钮是分开的，后者可以完成 per the react-paypal-js storybook example，正如提到的另一个答案。这种方法的问题是点击按钮后它看起来像标准的 PayPal 结帐，而不是 donation-specific 流程...

改用实际的 Donate SDK 会产生更加量身定制的捐助者流程，他们可以在其中 select 大量输入中的任何金额，甚至可以勾选一个选项让他们的捐助重复发生：

Answer 2

我联系了 React SDK 团队，他们说它实际上支持开箱即用的捐赠，their storybook 中有一个示例。这是相关的代码。如果您使用这种方法，则不需要 hosted_button_id:

<PayPalButtons
  fundingSource="paypal"
  style={{
    layout: "vertical",
    label: "donate"
  }}
  createOrder={(data, actions) => {
    return actions.order
      .create({
        purchase_units: [{
            amount: {
              value: "2",
              currency_code: "USD",
            },
            items: [{
                name: "donation-example",
                quantity: "1",
                unit_amount: {
                  currency_code: "USD",
                  value: "2",
                },
                category: "DONATION",
            }],
        }],
      })
  }}
/>;

Answer 3

我有同样的问题，我没有看到究竟如何与 React 一起工作，因为引用错误：PayPal.Donation.Button 未定义，如果我尝试将其用作函数。

我研究了将整个脚本标记附加为一个字符串 (dangerouslySetInnerHTML) 并发现这个博客 post 是一个很好的解释：Render dangerous content with React. The author makes a pretty cool use of document.Range API in order to solve the problem of executing scripts inside html. He has also published his solution as a small package: dangerously-set-html-content.

我在我的 Gatsby 项目中试了一下。首先，我在 gatsby-srr.js 的正文中添加了 Donate SDK 脚本标签，以便在页面加载时获取 JapaScript：

exports.onRenderBody = ({setPreBodyComponents}) => {
    setPreBodyComponents(
        <script key={0} src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charSet="UTF-8"/>
    )
}

（我需要bizarre-looking key属性，避免编译html.js时出错，合并后，属性被移除）

然后在组件中我将脚本设置为字符串：

import React from 'react'
import InnerHTML from 'dangerously-set-html-content'
const html = `
    <div id="donate-button-container">
        <div id="donate-button">
            <script>
                PayPal.Donation.Button({
                    ...
                }}).render('#donate-button')
            </script>
        </div>
    </div>
`
function MyComponent() {
    return (
       <InnerHTML html={html} />
    )
}

您可以查看包的 GitHub repo 以了解如何使用 useEffect 和 useRef 钩子的说明，以及一些使用示例。

React 中的 PayPal 捐赠按钮：捐赠 SDK 或 Checkout SDK 集成？

PayPal Donate button in React: Donate SDK or Checkout SDK integration?

paypal

reactjs