Tengo dificultades para usar el script de etiquetas en reaccionar js. Estoy tratando de usar una API de pagos en línea. La primera instrucción para usar la API es usar:
<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>Según la referencia de la API, el siguiente paso es:
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;Mi problema se debe a la parte PagSeguro.encryptCard() . PagSeguro no está definido. ¿Cómo extraer el PagSeguro y encryptCard() que está dentro del script?
Estoy usando el siguiente código:
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 PayEste es el mensaje de error. TypeError: no se pueden leer las propiedades de undefined (leyendo 'encryptCard')
Parece que está incluyendo el script externo después de su código, como dice la referencia de la API que citó:
Después de incluir el JavaScript, debe configurar la llamada a la función...
Necesitas que tu código sea algo como lo siguiente:
<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script> <script> // Now, PagSeguro will have loaded console.log(typeof PagSeguro); // and you can proceed to use it 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; </script> Si no desea bloquear la representación mientras se descarga la secuencia de comandos, puede adjuntar un detector de eventos de load a la secuencia de comandos y asignarle el atributo async o defer .