stripe is not defined but I have clearly defined it in my angular project

Question

in my stripecreditcardcomponent.html

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
  const stripe   = Stripe('removed secret');
  const elements = stripe.elements();
</script>

my stripecreditcardcomponent.ts

async createStripeToken() {
    const {token, error} = await stripe.createToken(this.card);
    if (token) {
      this.onSuccess(token);
    } else {
      this.onError(error);
    }
  }

but when my createstripeToken() command is called I get the following error:

ERROR Error: Uncaught (in promise): ReferenceError: stripe is not defined ReferenceError: stripe is not defined

question from:https://stackoverflow.com/questions/65865836/stripe-is-not-defined-but-i-have-clearly-defined-it-in-my-angular-project

Answer 1

What I usually do is install npm package, import them in component and use them. For example to use moment I install moment.js npm package, import it in component say MyComponent like declare var moment: any; then I can use moment in my MyComponent like let date = moment().now() etc. Refer this ->https://www.npmjs.com/package/@stripe/stripe-js