从 HTML 插入按钮<script> tag in React.js

Question

I'm trying to make use of the payment gateway API of a local company that is not specifically designed for React but instead, they provide a generic HTML fragment that inserts a button to proceed to their Checkout page, external to my site.

This is the HTML fragment:

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

After the client enters the card's info (outside of my site), their API then makes a POST to my Node backend server (at "action" attribute) to give me some safe info needed to confirm the payment.

I didn't considered pasting it in the public folder as it actually renders a button to redirect the user to an external page and the location of the button is critical.

This might be a too simple a question but I'm new to React, how could I insert this fragment/button in my frontend app with the info needed via it's attributes (public key/transaction amount)?

Any help to guide me in the right direction is highly appreciated.

Answer 1

Here is how you can render the button as a React component

    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>);
    }

Note that it will load the script once when the component mounts. Depending on your situation you might want to re-render the button when the amount value changes, in which case add it as a condition to useEffect (you might need to delete the previous one).