mshell - elements not defined | Stripe Developers | Page 1

pallid thorn Jul 18, 2022, 8:12 PM

#

Can you share your code for the checkout page? Need to see how you define elements

#

Actually I think it has to do with your variable scope: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

let - JavaScript | MDN

The let declaration declares a block-scoped local variable,
optionally initializing it to a value.

#

Try using var for elements. And make sure initialize() is called

sinful kelp Jul 18, 2022, 9:02 PM

#

I tried changing the const to var for the line var elements = stripe.elements({clientSecret, appearance});, but that did not have any effect.

📎 checkout.php

#

The image shows other errors that I am seeing in the console, but I do not know if they are related.

proper echo Jul 18, 2022, 9:02 PM

#

👋 I'm hopping in since @pallid thorn has to head out soon - give me a few minutes to catch up

#

It's because you initialized elements in your initialize() function - so it's limited in scope and can't be used in your handleSubmit function. You need to change the way you initialize elements so it can be referenced outside of the initialize() function

sinful kelp Jul 18, 2022, 9:16 PM

#

I was using https://stripe.com/docs/payments/quickstart as a starting point. I defined the async function initialize() exactly the way it is shown in the sample checkout.js file.

Custom payment flow

proper echo Jul 18, 2022, 9:20 PM

#

Yours is slightly different though - you have const elements = stripe.elements({, so elements can only be used within the initialize() function. Our example uses elements = stripe.elements({ clientSecret }); and has let elements; outside of the initialize() function

sinful kelp Jul 18, 2022, 9:32 PM

#

Now I remember... I clicked the "Download full app" and that was the sample config I was using as a starting point. There are quite a few differences between the two.

#

I think I have made so many changes at this point, I might need to go back to the starting point, because I can't undo every change I have made.

#

Should I start with the configs in the "Download full app" or the configs in the blue window on this page: https://stripe.com/docs/payments/quickstart

Custom payment flow

proper echo Jul 18, 2022, 9:33 PM

#

Well for this particular error, if you just change how you're initializing elements then that should get you past the error you're getting now

sinful kelp Jul 18, 2022, 9:34 PM

#

I'm sorry, I know enough about JS to write the code I"ve written so far, but I'm really not an expert. I don't know what you mean when you say "change how you're initializing..."

proper echo Jul 18, 2022, 9:34 PM

#

Just remove the const you have in front of elements, and then add let elements; right before the line that has initialize();

sinful kelp Jul 18, 2022, 9:37 PM

#

when I remove the const elements from async function initialize() and put it below const appearance and before initialize();, I get this error in the console: checkout.php:332 Uncaught ReferenceError: clientSecret is not defined

#

And I changed const to let

proper echo Jul 18, 2022, 9:38 PM

#

Did you change the one in front of elements or did you accidentally change the one in front of clientSecret as well?

sinful kelp Jul 18, 2022, 9:39 PM

#

clientSecret is still defined within async function initialize() with a const.

proper echo Jul 18, 2022, 9:40 PM

#

Gotcha - then there must be a bug later in your code, not that you've gotten rid of the elements one, now you have to find and fix the next one

sinful kelp Jul 18, 2022, 9:41 PM

#

Also, when I moved the initialization of elements outside the function and I refreshed the webpage, then the input fields for card number, expiration date, CVV, etc. no longer display.

proper echo Jul 18, 2022, 9:52 PM

#

I'd really recommend taking a step back and going through all the errors one by one until you eliminate them all

sinful kelp Jul 18, 2022, 9:58 PM

#

I keep getting "Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type"." Are you familiar with that error?

#mshell - elements not defined