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

问题描述 投票：0回答：4

官方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>

reactjs paypal
4个回答
3
投票

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

  1. 将应用程序配置为在页面加载时加载 SDK 脚本（通常作为页面 

    <head>
    的一部分）。然后，渲染按钮的 JS 可以作为组件的一部分运行/输出，并使用 
    window.paypal
    访问 SDK。

  2. 在页面加载之后将脚本元素插入到 DOM 中，并在加载后使用回调函数渲染按钮。这些都可以放在 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 商户 ID（因为它永远不会改变，而电子邮件可以从帐户中删除，并且不会更长点）

稍后编辑：请注意，捐赠 SDK 与简单地使用文本“捐赠”重新标记普通 PayPal Checkout SDK 按钮是分开的，这可以按照react-paypal-js故事书示例

完成，正如另一个答案提到的那样。这种方法的问题是，单击按钮后，它看起来像标准的 PayPal 结帐，而不是特定于捐赠的流程... 使用实际的捐赠 SDK 会产生更加量身定制的捐赠者流程，他们可以在大量输入中选择任何金额，甚至可以选中一个选项以使其经常性捐赠：

0
投票
他们的故事书

中有一个示例。这是相关代码。如果您使用这种方法，则不需要 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",
            }],
        }],
      })
  }}
/>;


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
接受的答案
如何与React一起使用：PayPal.Donation.Button未定义，如果我尝试将其用作功能。
我研究了将整个脚本标记作为字符串附加（dangerouslySetInnerHTML），并发现这篇博文是一个很好的解释：
使用 React 渲染危险内容。
作者非常酷地使用了 document.Range API，以便解决html内执行脚本的问题。他还将他的解决方案作为一个小包发布：dangerously-set-html-content。
我在我的盖茨比项目中尝试过。首先，我在 
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"/>
    )
}



（我需要看起来怪异的 
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
 钩子的说明，以及一些使用示例。
    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




在
    _document.js
  1. ：
    

    2. export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" defer/>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}



我想要按钮的组件：
    

  1. 

    2. import { useEffect, useState } from "react";
export default function Donate() {
  const [doPaypal, setDoPaypal] = useState(false);
  useEffect(() => {
    setDoPaypal(true);
  }, []);
  return (
    <>
      {
        doPaypal && 
        <div id="donate-button-container">
        <div id="donate-button"></div>
          <Script id="donate-button-script">
            {`
            PayPal.Donation.Button({
              env:'production',
              hosted_button_id:'${process.env.NEXT_PUBLIC_PAYPAL_HOSTED_BUTTON_ID}',
              image: {
                src:'https://whatever/paypal-donate.png',
                alt:'Donate with PayPal button', 
                title:'PayPal - The safer, easier way to pay online!',
              }
            }).render('#donate-button');
          `}
        </Script>
        </div>
      }
    </>
  );
}



类似的方法也可以在 vanilla React 中使用，但这里的问题是 NextJS 提供了 
<Script>
 组件，这是理想的组件，而不是使用 
dangerouslySetInnerHTML()
。另请注意存储您的 PayPal 按钮 ID 的使用环境；这必须在客户端可见，因此使用 
NEXT_PUBLIC_
 前缀。
    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.