1

I have a React app which the components are controlled by a Store.ts file.

I followed some steps in other threads here on Stack Overflow. I've already included the script tag in my index.html like this:

<script type="text/javascript" src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>

Then, as stated in here, in my Store, before using one of the functions, I declared the library as part of window as follow:

declare global {
  interface Window { PagSeguroDirectPayment: any; }
}

window.PagSeguroDirectPayment = window.PagSeguroDirectPayment || {};

window.PagSeguroDirectPayment.setSessionId('620f99e348c24f07877c927b353e49d3');

But when I run the app I get the error window.PagSeguroDirectPayment.setSessionId is not a function. And when I call the function directly in the index.html it seems to work.

Am I declaring it in the wrong place or in the wrong way? I appreciate any help. Thanks in advance

mordecai
  • 529
  • 5
  • 25
  • 1
    – Estus Flask Aug 01 '18 at 01:52
  • Thanks for your answer @estus. I just realized that I included the – mordecai Aug 01 '18 at 03:00

1 Answers1

0

The solution is to use globally declared elements with the window prefix.

E.g: window.PagSeguroDirectPayment

Note: But without instructions like: 

window.PagSeguroDirectPayment = window.PagSeguroDirectPayment || {}

because window.PagSeguroDirectPayment features are required.

Maybe that can help.

Tien Duong
  • 2,517
  • 1
  • 10
  • 27
Antonio Sousa
  • 11
  • 2