#nickagain - Angular
north lake
Hi 👋
I'm afraid I'm not too familiar with Angular's structure or lifecycles but could you share how you are importing Stripe?
Additionally, have you looked into use ngx-stripe? They are a verified Stripe partner
raven sun
I was simply doing this
stripe = Stripe('<<YOUR-PUBLISHABLE-API-KEY>>'); which was working when the types where declared.
Their documentation says to do this import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
Which seems to return nothing for me
That is what I was looking at first (ngx-stripe), but it looked like it might have been limited and I didn't want to hassle with third party stuff when I could just use their first party library
north lake
Okay so first a caveat. I have never used Typescript so I might miss somethings.
But let's start with what exactly is the part that "doesn't work"
@typed\stripe-v3 is a third party code so unfortunately we cannot help you with that. However, stripe-js does support TypeScript so you should be able to use typescript without it.
raven sun
That is a little small, apologies. The 1st line is how I am told to initialize it in the GitHub, the 2nd line was initializing it with the stripe-v3 definitions which worked for most things, but not all. But I can't call anything on the stripe2 object above.
north lake
How much do you develop in TypeScript?
As I said I'm not experienced at all so my first concern is I am missing something basic.
Also where in your project is this imported?
raven sun
This is pretty new to me too, and I feel the exact same way, like I am missing something basic, like I am just loading the library wrong.
north lake
I do know we advise loading the Stripe module in the root of the project. We have some nifty fraud detection functions that can run in the background
errant blade
What's the filename where that code is?
Like taking a step back: you copy-pasted some lines of code, but how did you load the NPM package? Where do you load it? What is your file structure?
also you're missing the await for loadStripe
Like just taking a step back I did those simple steps
1/ Create a new folder
2/ Install the loadStripe helper from https://www.npmjs.com/package/@stripe/stripe-js with npm install @stripe/stripe-js
3/ Create a basic JS file
(async () => {
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
stripe.confirmPayment();
})();``` and I get the TS definitions in VS Code:
raven sun
It is loading in a component inside a component in my main app. I installed it by doing npm install @stripe/stripe-js I did notice that loadStripe is returning a promise, which makes me a little confused how to use it. If I await it I get this "'await' expressions are only allowed within async functions and at the top levels of modules.ts(1308)
" But if I wrap that into a async() => function I can get a response, but then I'm not really sure how to work with that. Do I use then() to assign the parent stripe object
errant blade
that's a completely different question, did you get TS definitions to work in the end?
raven sun
Yes, once I realized it was returning a promise I could see them
errant blade
gotcha
north lake
Okay so now that you've got a stripe instance, what is the issue you are having at this point?
raven sun
I think this is good now, thanks for the help
north lake
Okay great 👍