I'm having difficulty using tag script in react js. I'm trying to use an online payments API. The first instruction to use the API is to use :

 <script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>

According to the API reference, the next step is:

• After including the JavaScript you must configure the function call PagSeguro.encryptCard() passing your public key in the publicKey parameter.

var card = PagSeguro.encryptCard({
  publicKey: "MY_PUBLIC_KEY",
  holder: "First name Last name",
  number: "4242424242424242",
  expMonth: "12",
  expYear: "2030",
  securityCode: "123"
});

var encrypted = card.encryptedCard;

My problem is due to part PagSeguro.encryptCard(). PagSeguro is undefined. How to extract the PagSeguro and encryptCard() that is inside the script?

I'm using the code below:

import React, {useEffect, useState} from 'react'

function Pay(){   

  const  [Infor, setInfor]=useState();

     useEffect(() => {
        
        const script = document.createElement('script');
      
        script.src = 'https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js';
        script.async = true;
         script.onload = (function(){ 
        setInfor(script);
       }) 
        console.log('script',script)
       
      const container = document.getElementById("mydiv"); 
      container.appendChild(script); 
       
      let card = script.PagSeguro.encryptCard({
        publicKey: "MINHA_CHAVE_PUBLICA",
        holder: "Nome Sobrenome",
        number: "4242424242424242",
        expMonth: "12",
        expYear: "2030",
        securityCode: "123"
      });
       console.log('card',card)             
      }, []);

  
return (
    <div id="mydiv">
     
<h1>Payment</h1>

</div>
);

}
export default Pay

This is the error message. TypeError: Cannot read properties of undefined (reading 'encryptCard')