從 HTML 插入按鈕<script> tag in React.js

Question

我正在嘗試利用一家本地公司的支付網關 API，該 API 不是專門為 React 設計的，而是提供了一個通用的 HTML 片段，該片段插入一個按鈕以進入我網站外部的結帳頁面。

這是 HTML 片段：

<form action="https://www.example.com/paymentsuccess" method="POST">
  <script
    src="https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js"
    data-public-key="ENV_PUBLIC_KEY"
    data-transaction-amount="100.00">
  </script>
</form>

在客戶端輸入卡的信息（在我的站點之外）后，他們的 API 會向我的 Node 后端服務器（在“action”屬性中）發送一個 POST 請求，為我提供一些確認付款所需的安全信息。

我沒有考慮將它粘貼到公共文件夾中，因為它實際上呈現了一個按鈕以將用戶重定向到外部頁面，並且按鈕的位置至關重要。

這可能是一個太簡單的問題，但我是 React 的新手，我怎么能在我的前端應用程序中插入這個片段/按鈕，並通過它的屬性（公鑰/交易金額）提供所需的信息？

任何指導我朝着正確方向前進的幫助都受到高度贊賞。

Answer 1

這是將按鈕呈現為 React 組件的方法

    function PaymentForm (props) {
      const paymentForm = React.useRef(null);
      React.useEffect(() => {
      const script = document.createElement("script");
      script.src = "https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js";
      script.setAttribute('data-public-key',"ENV_PUBLIC_KEY")
      script.setAttribute('data-transaction-amount',"100.00")
        console.log(paymentForm.current)
      paymentForm.current.appendChild(script)
    }, []);

    return (
       <form action="https://www.example.com/paymentsuccess" method="POST" ref={paymentForm}></form>);
    }

請注意，它會在組件掛載時加載一次腳本。 根據您的情況，您可能希望在數量值更改時重新呈現按鈕，在這種情況下，將其添加為 useEffect 的條件（您可能需要刪除前一個）。