React 中的 PayPal 捐贈按鈕：捐贈 SDK 或 Checkout SDK 集成？

Question

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

Answer 1

有兩種方法可以從 react 中使用Donate SDK HTML/JS。

將應用配置為在頁面加載時加載 SDK 腳本（通常作為頁面的<head>的一部分）。 然后，用於呈現按鈕的 JS 可以作為組件的一部分運行/輸出。
在頁面加載后將腳本元素插入 DOM，並在加載后使用回調函數渲染按鈕。 這都可以放在 React 組件的useEffect或類似的地方。 使用loadAsync的鏈接示例適用於 Checkout SDK，但很容易替換為 Donate SDK 代碼。

您可以將 Donate SDK 與您提到的hosted_button_id一起使用（在https://www.paypal.com/buttons (live) 或www.sandbox.paypal.com/buttons創建）- 或者，而不是托管按鈕id 只需使用接收帳戶的 PayPal 電子郵件地址或（理想情況下）其PayPal 商家 ID傳遞一個business參數（因為它永遠不會改變，而電子郵件可以從帳戶中刪除並且不再指向它）

稍后編輯：請注意，捐贈 SDK 與簡單地使用文本“捐贈”重新標記普通 PayPal Checkout SDK 按鈕是分開的，這可以按照 react-paypal-js 故事書示例完成，正如另一個答案所提到的。 這種方法的問題是在單擊按鈕后，它看起來像標准的 PayPal 結帳，而不是特定於捐贈的流程......

使用實際的捐贈 SDK 會產生更量身定制的捐贈流程，他們可以在大量輸入中選擇任何金額，甚至可以檢查一個選項以使他們的捐贈重復：

Answer 2

我聯系了 React SDK 團隊，他們說它實際上支持開箱即用的捐贈，他們的故事書中有一個例子。 這是相關的代碼。 如果您使用這種方法，則不需要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) 並發現這篇博文是一個很好的解釋：使用 React 渲染危險內容。 為了解決在 html 中執行腳本的問題，作者使用了一個非常酷的document.Range API 。 他還將他的解決方案發布為一個小包： dangerous-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"/>
    )
}

（我需要奇怪的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存儲庫，了解如何使用useEffect和useRef掛鈎，以及一些使用示例。

React 中的 PayPal 捐贈按鈕：捐贈 SDK 或 Checkout SDK 集成？

問題描述

3 個解決方案

解決方案1
2 已采納 2022-03-27 19:43:07

解決方案2
1 2022-03-28 17:34:25

解決方案3
0 2022-05-29 21:40:12

React 中的 PayPal 捐贈按鈕：捐贈 SDK 或 Checkout SDK 集成？

問題描述

3 個解決方案

解決方案1 2 已采納 2022-03-27 19:43:07

解決方案2 1 2022-03-28 17:34:25

解決方案3 0 2022-05-29 21:40:12

解決方案1
2 已采納 2022-03-27 19:43:07

解決方案2
1 2022-03-28 17:34:25

解決方案3
0 2022-05-29 21:40:12