#thez_api

1 messages · Page 1 of 1 (latest)

teal sentinelBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1373987199967825930

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

faint musk
#

Hi,

upbeat dagger
#

hi there!

faint musk
#

So let me summarize all that in one message so it makes a bit more sense.

#

We're now well in the weeds of integrating and hooking up all the services for PTP and I've encountered an interesting problem.

I've done all the things that are needed to mount an issuingCardNumberDisplay on one of our pages. So I did the nonce request, wrote up my side of the API to generate the ephemeral key that my UI calls and gets back the key from, and obviously have the card id that I want all this for retrieved from the API.

I made sure that all our calls use the latest API (.basil) both from the UI (Vanilla JS) and the API (Python / Stripe library) and up to this point it all works.

On our Workbench I see the logs for all these calls and they all indeed go to .basil and are green response 200s as one would expect.

Then at the last step in the page where I have stripe.js (v3) and would mount the element, the stripe.js code spits a bunch of errors at me like so:
image.png
and the iframe where the card number should appear stays empty (i mean just the <div id="root"></div> is inside the HTML of the iframe)

My last step (after confirming multiple times that the nonce (ephkn_pub_) and keys (ek_live_) are there and the ic_** card reference is correct I simply do a mount like so:
image.png
... where the only thing I don't pass in the the cardStyle variable which I believe isn't required (as I just wanted to see how it looks by default) and then a

cardElement.mount(outputDiv);

Obviously outputDiv is confirmed prior to be an element that is already present in the DOM and can be mounted into.

Sooooo given the nature of the problem - I have no influence over the code in stripe.js and also I don't see any error messages in our workbench anywhere - I thought the best course of action would be to seek assistance from yourself.

Did you see anything like this?
Any ideas what I should change to make this work?

Pointers to the right place appreciated.

#

these are the JS console errors after mounting the element

#

and this is the bif of code right before mount

image.png
#

what i've also tried after this is specifying the "cardStyle": {} thinking that might be the problem (as far as I know that's not required) but didn't help

#

anything obvious I'm missing somwhere?

upbeat dagger
#

do the errors have any impact on the element itself? or is it working as expected?

faint musk
#

nope - the element's iframe stays empty

#

empty meaning it has the document ... <html> etc ... but where the card number should be there's only <div id='root'> </div> and nothing else

#

so this is the the elemnt I mount into (card-details)

image.png
#

and where the selection is should be the card number gereted by stripe.js

upbeat dagger
#

do you have a link where I could replicate this issue?

faint musk
#

wow ...

#

you need to be logged in to the thing ...

#

let me figure out how I send you a login link

upbeat dagger
#

or maybe you share some test credentials?

faint musk
#

auth is magic link based

#

so that's exactly what I've bene seting up

#

please click this one

#

and then click the card icon bottom middle

#

that page is where the issue is reproducable

#

see it?

upbeat dagger
#

I guess the card nmber should show here?

image.png
faint musk
#

exactly.

#

above the copy card number button

upbeat dagger
#

I see this error in the browser console:

Uncaught TypeError: Cannot read properties of null (reading 'value')
at base.js:1:56
could this be related?

faint musk
#

nope

#

that's in my script and is a known bug

#

irrespective of the error

#

i can make the go away in a second

upbeat dagger
#

got it, looking

faint musk
#

there we go now that type error shouldn't be present.

teal sentinelBOT
faint musk
#

just the two errors that are geenrated by stripe.js

pallid glade
#

Hi, taking over as my teammate needs to step away. Let me catch up.

faint musk
#

sure - hi

#

glad that it's not something obvious I've missed by the looks of it then 🙂

pallid glade
#

Can you remove the 'cardStyle' and log teh 'issuingCard'?

#

I just tried the code and it works as expected:

const cardNumber = elements.create('issuingCardNumberDisplay', {
issuingCard: cardId,
nonce: nonce,
ephemeralKeySecret: ephemeralKeySecret,
});

faint musk
#

sure one sec

#

now it should look like this

#

and removed the cardStyle from the elements.create also as you asked (it was like that before, i've just added that in as meager try to resolve this before raising it)

#

and obvisouly the EK is geenrated in the background correctly - if you don't mind I won't log that, but it's in the ek_live_** format

#

ek_live

#

so ek underscore live underscore loadof characters

#

which to my eye seems correct 🤷‍♂️

#

oh the other thing I've tried and hanve't mentioned is giving the DOM element to .mount() and also giving the id selector - that didn't seem to change anything

pallid glade
#

In this case, you'd want to reach out to our support team to see if this can be supported on your account. Our support team will be able to assist you better than I can: https://support.stripe.com/contact

#

Will also share your feedback to throw a better error than this, thank you

faint musk
pallid glade
#

It should, mine works.

#

You can try it in test mode using your test API keys

#

Can you try please?

faint musk
#

let me just pop in the code and choose a virtual card to see

#

gimmea second

pallid glade
#

I reccommend that you try it in test mode first

#

This ensure that your code works in test mode before going live

faint musk
#

yeehaw thank you

#

with a virtual card it works indeed

#

will reach out to support to enable phisycal cards as well

#

many thanks for your help! 🙂

pallid glade
#

Great to hear!