Как получить функцию внутри тега скрипта в react JS?

#javascript #reactjs #tags #payment #script

Вопрос:

У меня возникли трудности с использованием сценария тегов в react js. Я пытаюсь использовать API онлайн — платежей. Первая инструкция по использованию API состоит в том, чтобы использовать :

 lt;script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"gt;lt;/scriptgt;

Согласно справочнику API, следующим шагом является:

После включения JavaScript вы должны настроить функцию вызова PagSeguro.encryptCard (), передающую ваш открытый ключ в параметре publicKey.

 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;

Моя проблема связана с частью PagSeguro.encryptCard(). Значение PagSeguro не определено. Как извлечь PagSeguro и encryptCard (), которые находятся внутри скрипта?

Я использую приведенный ниже код:

 import React, {useEffect, useState} from 'react'  function Pay(){    const [Infor, setInfor]=useState();   useEffect(() =gt; {    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 (  lt;div id="mydiv"gt;   lt;h1gt;Paymentlt;/h1gt;  lt;/divgt; );  } export default Pay

Это сообщение об ошибке. Ошибка типа: Не удается прочитать свойства неопределенного (чтение «Зашифрованной карты»)

1. Где вы включаете этот сценарий в DOM и где вы пытаетесь выполнить этот фрагмент кода?

2. При lt;scriptgt; запуске он выставляется PagSeguro на window . это означает, что вы можете напрямую ссылаться на него или также ссылаться на него с помощью window.PagSeguro

3. Я создал компонент под названием pay. И я использую useEffect, чтобы попытаться использовать сценарий.

Ответ №1:

Похоже, вы включаете внешний скрипт после своего кода, как говорится в приведенной вами ссылке на API:

После включения JavaScript вы должны настроить вызов функции…

Вам нужно, чтобы ваш код выглядел примерно так:

 lt;script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"gt;lt;/scriptgt; lt;scriptgt; // 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; lt;/scriptgt;

Если вы не хотите блокировать визуализацию во время загрузки сценария, вместо этого вы можете подключить прослушиватель load событий к сценарию и присвоить ему атрибут async или defer .

1. Я ничего не понял. Где я должен поместить эту идею в React? В компоненте под названием Pay или html(root) ?

2. Все, что вам нужно сделать, это сначала включить внешний сценарий, прежде чем остальная часть вашего сценария, а затем PagSeguro объект будет определен к моменту его последующего использования. lt;script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"gt;lt;/scriptgt; lt;scriptgt;// rest of your scriptlt;/scriptgt;