Load Script into TypeScript File?

Question

I am attempting to add the following script tag to my Angular 2 project, however I am looking for a way to load this into the typescript file so that I can call its methods within the ts file.

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

There are a few things from the script that I need to be able to call in my typescript file, which are

let paymentForm = new SqPaymentForm();

and

paymentForm.requestCardNonce();

I am trying to impletement from SquareUp payments and they have an example here: https://docs.connect.squareup.com/articles/adding-payment-form

However, this example doesn't translate well into the typescript setup that I am using. Thanks for the help!

Answer 1

You need to include the script in the index.html and import it into the component, like so.

declare var SqPaymentForm:any;
import "https://js.squareup.com/v2/paymentform";

The declare is required for it to properly compile, otherwise it doesn't know how to wait to link until it is JS.

Note: I have only done this with files that I downloaded, as opposed to access from the web, so if it complains about the import, you may need to download the JS and try that.