cerberusgolem-paymentelement

[proven falcon]

hi there! can you share the gist of what the email was about?

[teal sparrow]

Yes sure

@proven falcon

[proven falcon]

that email shouldn't cause your Payment Element to not load i believe. Do you have a URL which i can access to take a look at your integration?

[teal sparrow]

code access?

[proven falcon]

you said yesterday your checkout page stopped loading. Do you have a page or website where your code is deployed?

[teal sparrow]

yes,
https://testnet.kompwnd.io/

[proven falcon]

what are the steps to get to your checkout page?

[teal sparrow]

you need to click on connect wallet.
then it will ask for mnemonic code

enter this:
beach giggle tomorrow type address earth merit battle hip woman hen deliver

password could be anything

then on the top right corner you will see "booking tab"

go to there, and select any option from the dropdown, then your name, then any email and hit checkout button.

[proven falcon]

👀

[teal sparrow]

😅

Are you able to check?

[proven falcon]

onesec, still filling up fields

[teal sparrow]

okay

[proven falcon]

yep, i see it. Give me a while to look through it

[teal sparrow]

Sure

[proven falcon]

where are you loading/initializing stripe?

[teal sparrow]

in the index.html file calling that script (stripe.js/v3)

[proven falcon]

uh

[teal sparrow]

this.elements = stripe.elements({options, cardStyle});

declare var stripe: any;

[proven falcon]

i'm not familiar with angular syntax, but you declare stripe, but you're not initializing it right? As far as i can tell, you commented out the line where it's supposed to load stripe : https://stripe.com/docs/js/initializing

in payment.page.ts, where

// const stripe   = Stripe(stripeKey);
this.elements = stripe.elements({ clientSecret, cardStyle });

[teal sparrow]

if I uncomment that line

then see

I am facing this error

[proven falcon]

stripe.elements({
  clientSecret: 'CLIENT_SECRET',
appearance: {...}
});

https://stripe.com/docs/js/elements_object/create

[teal sparrow]

I have doe this as well

but same error

[proven falcon]

if you just follow the example and hardcode the clientSecret i.e.

this.elements = stripe.elements({
  clientSecret: 'pi...secret...',
});

do you still get an error?

[teal sparrow]

See

and you know what, I was receiving all the payments successfully till 24th of May, I have seen those in my stripe dashboard, it has stopped since yesterday. and I really dont know why

I was using the same code

[proven falcon]

lets try keeping things simple first. Don't pass the appearance i.e. cardstyle

[teal sparrow]

removed that

same error

[proven falcon]

oh hmm, sorry, i missed the bit where it says clientSecret does not exist in type ElementsCreateOptions

[teal sparrow]

yes

and if I comment this -> const stripe = Stripe(stripeKey);
then that error would gone

[proven falcon]

you shouldn't comment out that line. The problem is probably with the typescript declarations

[teal sparrow]

I have made element type any

[proven falcon]

gimme a second

[teal sparrow]

should I downgrade the stripe package version?

[teal sparrow]

Sure please

[unkempt whale]

Hey, taking over from @proven falcon here – just catching up!

[teal sparrow]

Sure, take your time

[unkempt whale]

Where are you actually initializing Stripe.js? All I can see is the line that's currently commented out

this.elements = stripe.elements({ clientSecret, cardStyle });

But stripe isn't defined anywhere?

[teal sparrow]

if I initialise stripe then I am facing two errors

[teal sparrow]

check this

[unkempt whale]

Can you share your package.json? Specifically which version of @stripe/stripe-js you're using

[teal sparrow]

"@stripe/stripe-js": "^1.20.3",

in the index.html file, I am loading that script (stripe.js/v3) one

[unkempt whale]

Do you have conflicting types? 1.20.3 should have the required types for the Element instance: https://github.com/stripe/stripe-js/blob/v1.20.3/types/stripe-js/elements.d.ts#L440

Are you including the Stripe.js script manually as well as using the @stripe/stripe-js package?

[teal sparrow]

I am including the stripe.js script in the header tag

[unkempt whale]

That's not necessary if you're also using that package

What is stripeService?

[teal sparrow]

  clientSecret: string;

  constructor() { }
}```

this is stripeService

[unkempt whale]

Firstly, you need to uncomment the stripe initialization

The type errors aren't breaking, but we can resolve them separately

[teal sparrow]

https://gist.github.com/Parth2412/262886d8a796743e9a47359f58d1d99d

check this

[unkempt whale]

Line 16

Uncomment that

[teal sparrow]

Uncommented

This is the latest error

[unkempt whale]

Yep, you'll still have the type errors. But you can // @ts-ignore them for now. We should first focus on fixing your payment form

[teal sparrow]

Okay

checking

just give me a min

building

[unkempt whale]

That should fix the stripe is not defined error which is preventing the Element from loading

[teal sparrow]

Okay, M checking

Facing this now

[unkempt whale]

Ok, great. Progress 🙂

What is the value of const clientSecret = this.stripeService.clientSecret;?

Is that a client_secret from a Payment Intent? https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret

[teal sparrow]

Just solved that error

Now making the payment

[unkempt whale]

Ok, great

So the payment form is working now?

[teal sparrow]

yes

just checked the payment

[unkempt whale]

Excellent! Do you still have the type errors in your editor?

[teal sparrow]

Man!!! thank you so much, I dont know how to express, but its been 30+ hours I have spent on this error.

[teal sparrow]

Its gone as I am using //ts-ignore

Thank you once again @unkempt whale @proven falcon

[unkempt whale]

Np! We can work to fix those errors if you want, rather just ignoring them