Empress Brosephine-stripejs-cardelement | Stripe Developers | Page 1

timid dove Aug 24, 2022, 7:41 PM

#

hello, reading

serene echo Aug 24, 2022, 7:41 PM

#

timid dove hello, reading

Thanks!

timid dove Aug 24, 2022, 7:42 PM

#

can you clarify what error you're getting? didn't see an error msg or a stack trace etc

serene echo Aug 24, 2022, 7:43 PM

#

so I think its just not picking up the CardElement

#

got it to actually give me a full error

#

timid dove Aug 24, 2022, 7:48 PM

#

let's start small, CardElement is rendering fine, right?

before pressing any button, when it is rendered, can you open your browser console and get a reference to that <div> by doing what you're doing at line elements.getElement(...) and see if that by itself works

serene echo Aug 24, 2022, 7:49 PM

#

thanks for the help.

so the card element is rendering fine yeah, trying to get a reference to it though doesn't return anything

timid dove Aug 24, 2022, 7:55 PM

#

ok so that helps. What happens when you log out elements in your console? I'm guessing it returns undefined ?

serene echo Aug 24, 2022, 7:55 PM

#

yeah, elements is not defined

#

{clientSecret && (
          <Elements options={options} stripe={stripePromise}>
            <RegistrationForm selected={selected} details={details} clientSecret = {clientSecret} id={customerId}/>
          </Elements>
      )}

thats the call to the form

timid dove Aug 24, 2022, 8:00 PM

#

ah React, not my strongest suite so bear with me while I wrap my head around this

serene echo Aug 24, 2022, 8:01 PM

#

no worries and I appreciate all the help

#

if it helps, this is for the stripe certification 😛

#

so I changed elements.getElement(CardElement) to just CardElement and I got this

serene echo Aug 24, 2022, 8:28 PM

#

ok...so it looks like the setupIntent is actually working just it "crashes" right after for some odd reason

surreal girder Aug 24, 2022, 8:30 PM

#

Can you try using elements.getElement('card')?

#

I am looking through things and testing myself but from the Javascript SDK reference, it looks like that function is just expecting a string https://stripe.com/docs/js/elements_object/get_element#elements_get_element-type

#

And it links to our create function where we define type the same way and demonstrate passing 'card' in to it

serene echo Aug 24, 2022, 8:32 PM

#

let me try that!

#

negative, still produces a "undefined has no properties" error

#

it seems to make the object / request / whatever but then causees a error for some odd reason lol

#

    reserveLesson RegistrationForm.js:70
    React 17
    unstable_runWithPriority scheduler.development.js:653
    React 15
    unstable_runWithPriority scheduler.development.js:653
    React 26
    js index.js:8```

surreal girder Aug 24, 2022, 8:41 PM

#

Can you send me the ID of a setup intent that you used here? I can check in to if we can see the confirm on our side

#

Spinning up my test react project to try this myself...

serene echo Aug 24, 2022, 8:43 PM

#

sweet thanks, yeah one moment

#

https://stripe.com/docs/js/setup_intents/payment_method?type=card

stripe.confirmCardSetup is what I was using

Stripe JS Reference

#

@surreal girder its very weird...like I can get it to make the session but something after crashes it lol

#

https://codesandbox.io/s/stoic-almeida-metxe6?file=/src/RegistrationForm.js

I uploaded the two files im working with here if you need to see. Its Lessons.js & RegistrationForm.js

surreal girder Aug 24, 2022, 8:53 PM

#

Thank you. I was about to ask for more code, I was able to make this call successfully using

    stripe.confirmCardSetup(
        clientSecret,
        {
          payment_method: {
            card: elements.getElement(CardElement),
            billing_details: {
              name: 'Named person',
            },
          },
        }
      ).then(function(result) {
        if (result.error) {
          // Display error.message in your UI.
          console.log(result.error)
        } else {
          console.log(result)
          // The setup has succeeded. Display a success message.
        }
      });```

serene echo Aug 24, 2022, 8:54 PM

#

let me try that

#

hmmmmmmm same thing

#

maybe some kind of error in the stripe boilerplate provided for the test?

potent karma Aug 24, 2022, 8:56 PM

#

@serene echo do you have an end to end reproduction I can look at?

serene echo Aug 24, 2022, 8:56 PM

#

I can upload it, one second

#

@potent karma do you have a gitusername I can give access too? if not I can make it public

#

I have a feeling this is going to be really stupid on my end lmao

potent karma Aug 24, 2022, 9:05 PM

#

unfortunately no. And I don't want to see git

#

I want to see a live page with the exact bug

#

or a reproduction of the bug on a page somewhere like jsfiddle or codesandbox

serene echo Aug 24, 2022, 9:08 PM

#

Oh uh I don't think you can publish the stripe boilerplate test I think it was in the rules

#

@potent karma https://codesandbox.io/s/github/thomaslanenh/gitchal

See if this works

potent karma Aug 24, 2022, 9:13 PM

#

not sure what I am supposed to look at

#

where am I supposed to click to see the live behaviour?

serene echo Aug 24, 2022, 9:15 PM

#

Eh I dunno I'll get a live version up in a bit

potent karma Aug 24, 2022, 9:16 PM

#

Really all I need is a basic JS runnable demo. Like on jsfiddle or whatever. Without any of the boilerplate and such

serene echo Aug 24, 2022, 9:17 PM

#

Yeah ill redo it later to take out the node server

#

Ty for help

potent karma Aug 24, 2022, 9:33 PM

#

@serene echo do you have ngrok or similar?

#

I could maybe look at your local page without you having to redo everything

serene echo Aug 24, 2022, 10:01 PM

#

yeah ill be back on the computer in a bit and I can do that then I believe

#

@potent karma https://2661-2603-7080-c940-9f-fc03-791d-90e1-7faa.ngrok.io/lessons

try to book now

#

ty again

potent karma Aug 24, 2022, 10:08 PM

#

so you have multiple separate errors on load

#

are those expected? That doesn't bode well already 😅

serene echo Aug 24, 2022, 10:08 PM

#

I think so, its from the boilerplate from Stripe

#

before I touched anything those were popping up also

#

so it makes me wonder if the boilerplate Stripe provided is bugged up or something

potent karma Aug 24, 2022, 10:09 PM

#

possible. Sorry I know absolutely nothing about react but I can start with that at least

serene echo Aug 24, 2022, 10:09 PM

#

no worries

#

I dunno if you have access to the Stripe github account but this is what they gave us to clone and operate off of:

https://github.com/stripe-certification/payments_node_react_thomaslanenh_challenge

potent karma Aug 24, 2022, 10:10 PM

#

who is "they"

#

Are you trying to pass a certification and not really building a real integration 😅

serene echo Aug 24, 2022, 10:11 PM

#

yes lol

#

they is Stripe

#

our Stripe rep gave us this lol

#

potent karma Aug 24, 2022, 10:12 PM

#

wait wait wait

#

You're a developer passing a certification, not a developer building a real integration?

serene echo Aug 24, 2022, 10:13 PM

#

yeah

potent karma Aug 24, 2022, 10:13 PM

#

Hum

#

It feels quite off that we'd solve that for you

#

though I appreciate you being forward and transparent about this since you could have just pretended otherwise

serene echo Aug 24, 2022, 10:14 PM

#

Yeah no worries. Don't neccesarily need it solved, it was mostly just the weird bug that I was getting and there was no documentation around it

potent karma Aug 24, 2022, 10:15 PM

#

sounds good, I'm asking someone on my team, it's easier now that we can repro

serene echo Aug 24, 2022, 10:15 PM

#

no worries, thank you

#

im convinced it has to do with the boilerplate we were given because like you guys, I can replicate the same outside of this , even in React

potent karma Aug 24, 2022, 10:16 PM

#

yeah

#

I wouldn't be surprised this boilerplate is just plan wrong

serene echo Aug 24, 2022, 10:17 PM

#

agreed!!! lol

potent karma Aug 24, 2022, 10:18 PM

#

We're looking, sorry it's hard to try and piece code written by another random person that you then try and make sense of and modified

serene echo Aug 24, 2022, 10:18 PM

#

understandable, I appreciate you all helping

#

I was like "im tired of bashing my head over this just so these stupid tests work on their end, i'll reach out to them" lol

unique horizon Aug 24, 2022, 10:27 PM

#

👋

#

Okay in your handleSubmit function, before you confirmSetupIntent can you add: if (!stripe || !elements) { console.log("stripe: ", stripe); console.log("elements: ", elements); return; }

#

Sorry this is specifically your reserveLesson function

serene echo Aug 24, 2022, 10:33 PM

#

No worries, will do in a few mins

unique horizon Aug 24, 2022, 10:36 PM

#

Okay I think I know what is going on

#

You are calling:
setProcessing('Processing Payment Information, Please Hold.');

#

Immediately upon reserveLesson

#

This is before you attempt confirmation

#

That is unmounting your Card Element

#

Which is attempting to be used in the confirmCardSetup function that happens afterward

#

So confirmCardSetup is trying to grab info from Card Element but it isn't there anymore

#

Instead of using an if/else if here based on setProcessing, you want to use something like a loading spinner and disable the pay button.

serene echo Aug 24, 2022, 10:41 PM

#

hmmm good catch let me try that

unique horizon Aug 24, 2022, 10:41 PM

#

You can see an example in our Payment Element quickstart (https://stripe.com/docs/payments/quickstart?client=react) where we do something like <form id="payment-form" onSubmit={handleSubmit}> <PaymentElement id="payment-element" /> <button disabled={isLoading || !stripe || !elements} id="submit"> <span id="button-text"> {isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"} </span> </button>

serene echo Aug 24, 2022, 10:42 PM

#

same thing 😦

unique horizon Aug 24, 2022, 10:44 PM

#

Can you update the ngrok so I can see it?

serene echo Aug 24, 2022, 10:44 PM

#

yep, ripped out all of those elements and same 😦

#

sure one sec

#

should be all updated

unique horizon Aug 24, 2022, 10:45 PM

#

Err do I need a different link now?

#

States that page is no longer found

serene echo Aug 24, 2022, 10:45 PM

#

https://1ec3-2603-7080-c940-9f-fc03-791d-90e1-7faa.ngrok.io

#

sorry

#

thanks for the help btw

unique horizon Aug 24, 2022, 10:45 PM

#

All good

#

Okay got a different error now

#

So progress

serene echo Aug 24, 2022, 10:46 PM

#

yay 😄

#

its just so odd because it works but then crashes itself lol

unique horizon Aug 24, 2022, 10:49 PM

#

You are mixing await and .then which isn't super kosher

#

Let's just simplify greatly. Change const {setupIntent, error} = await stripe.confirmCardSetup( clientSecret, { payment_method: { card: elements.getElement(CardElement), billing_details: { name: event.target[0].value, email: event.target[1].value } } } ).then((res)=>{ console.log(res.setupIntent) // // setShowProcessing(false); // setProcessing(''); })
to

          clientSecret,
          {
            payment_method: {
              card: elements.getElement(CardElement),
              billing_details: {
                name: event.target[0].value,
                email: event.target[1].value
              }
            }
          }
)
console.log(res);```

serene echo Aug 24, 2022, 10:51 PM

#

https://56a6-2603-7080-c940-9f-fc03-791d-90e1-7faa.ngrok.io

#

😮 its working

unique horizon Aug 24, 2022, 10:51 PM

#

🎉

serene echo Aug 24, 2022, 10:51 PM

#

thats weird, so it was the destructuring

#

ty so much bismarck and crew

unique horizon Aug 24, 2022, 10:51 PM

#

The initial issue was that you were tearing down the Card Element before it was used

serene echo Aug 24, 2022, 10:52 PM

#

gotcha

#

our main developer uses coldfusion and you folks said he couldn't do this test in it so this got passed to me and i'm a assembly programmer lmao so sorry for al lthis

unique horizon Aug 24, 2022, 10:53 PM

#

Using state to disable the pay button is the correct way to go while waiting for the confirmation promise to resolve.

#

But you don't want to actually remove the Card Element

#

Anywho, glad we could help unblock you!

serene echo Aug 24, 2022, 10:53 PM

#

gotcha

#

yeah totally awesome thank you all so much 🙂

#

have a good night!

#Empress Brosephine-stripejs-cardelement