#paulc7053_code
latent krakenBOT
👋 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/1217907290175180882
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
cedar nexusBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- paulc7053_code, 1 hour ago, 51 messages
- paulc7053_api, 4 hours ago, 79 messages
- paulc7053_code, 2 days ago, 114 messages
west timber
Hey!
regal cobalt
Hello
west timber
This is what I am trying
Sorry, the code input is short
`<div style={{ width: '400px' }}>
<CardElement
options={{
style: {
base: {
fontSize: windowSize.width > 375 ? '18px' : "16px",
width: "400px",
border: "1px solid #D1D5DB",
},
},
classes:{
}
}}
onChange={handleChange}
locale={'nl'}
/>
</div>`
I don't know if there's a way to disable just the validation on postal code.
however, you can disable the postal code collection instead and collect it yourself
https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options-hidePostalCode
west timber
Yes, I saw that, but I would really like to collect it in the same input box
It is possible, I just saw it on another website
But I just dont know how
:))
regal cobalt
What postal code are you trying to set?
west timber
1011EL for example, or 100243
regal cobalt
Hmm, 1011EL seems to be for Netherlands.
According to this, Card Element automatically decides the format of the postal code (if the postal code is even required in the first place)
https://docs.stripe.com/js/element/postal_code_formatting
It doesn't look like it's required for Netherlands. I tried using regional card 4000005280000002 and card element just hides the postal code input
https://docs.stripe.com/testing#international-cards
west timber
so you think it assesses based on IP?
regal cobalt
I think its based on the card used
https://docs.stripe.com/js/element/postal_code_formatting
The card element automatically determines your customer’s billing address country based on their card number. Using this information, the postal code field validation reflects whether that country uses numeric or alphanumeric-formatted postal codes, or if the country uses postal codes at all. ...
west timber
Interesting
I just tried a gibberish CVV on a site and it works
Ill make a video vor you
postcode**
regal cobalt
👍
west timber
seems like discord has problems uploading the video
i'll take a ss
are you able to see it ? (photo is still loading for me, but videos are ok now)
regal cobalt
I am not able to 😦
regal cobalt
nope!
are you able to reproduce this on https://4242.io/card-element ?
west timber
I may be, but that is even less permissive than the one I'm looking vor
can you check out this canva video preview?
regal cobalt
Setting the locale doesnt' work either yeah?
west timber
nop
Maybe I'm setting it wrong?
I just passed it as a prop
<CardElement ...... onChange={handleChange} locale={'nl'} />
regal cobalt
I think you'd need to set locale on the outer parent and not the card element
west timber
the parents are Elements and ElementsConsumer, but none autocomplete a locale prop
regal cobalt
I believe you'd pass it to <Element />
https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale
west timber
seems like it maybe is the options
locale doesn't help seems like
Okay, so I looked at the classes in these two cases, and the only divverence is an atribute 'patterns'. How can I access that?
The card input on that site uses a regex "\d*"
actually - sorry
is the other way around
mine has the pattern, and the other doesnt
regal cobalt
It's possible they're hiding the postal code on the card element and have added their own input
west timber
I've thought about this, but it's impossible to mess with the stripe element because it uses a remote iframe
if it didn't I guess just deleting this attribute would solve the issue
regal cobalt
I mean you won't be able to inject it directly in the iframe. But you can always add it outside the iframe
west timber
yes but in this example it is in the same input
looking at the html it looks like its from stripe itself
<span class="CardField-postalCode CardField-child" style="right: -351px;"><span><span class="InputContainer" data-max="WS11 1DB0"><input class="InputElement is-complete Input" autocomplete="postal-code" autocorrect="off" spellcheck="false" type="text" name="postal" data-elements-stable-field-name="postalCode" aria-label="Postcode" placeholder="Postcode" aria-invalid="false" data-1p-ignore="false" tabindex="0" value="3233YY4Y4Y42R2316R327R137621R3761R36713R763R2163R173R621371" style="transform: none;"></span></span></span>
And mine is
<span class="CardField-postalCode CardField-child" style="transform: translateX(-59px);"><span><span class="InputContainer" data-max="902100"><input class="InputElement is-complete Input" autocomplete="postal-code" autocorrect="off" spellcheck="false" type="text" name="postal" data-elements-stable-field-name="postalCode" inputmode="numeric" aria-label="ZIP" placeholder="ZIP" aria-invalid="false" data-1p-ignore="false" tabindex="0" value="31231"></span></span></span>
regal cobalt
Hmm, let me check something
west timber
sure
I think it should be something within the options props :<CardElement options={{ style: { base: { fontSize: windowSize.width > 375 ? '18px' : "16px", border: "1px solid #D1D5DB", }, }, hidePostalCode: true // this works }}... because passing hidePostalCode there works
regal cobalt
Checking with a colleague
west timber
Okay
Any updates?
seems like mine also have inputmode="numeric", hence why I cannot type any letters. the other one doesnt have this attribute
The third example also has no validation on zip codes
regal cobalt
That example uses split-card element and adds a custom input for zip collection
https://github.com/stripe/elements-examples/blob/master/js/example3.js
west timber
`<span class="CardField-postalCode CardField-child" style="right: -351px;"><span...
but these 2 have all the same stripe classes
standard classes*
regal cobalt
Do you have the site URL for the video you shared?
4242 card behaves differently for live mode vs test mode
west timber
I saw on other sites too
but cant remember
click the virst option
any updates ...?
regal cobalt
Okay, so I talked to a couple of colleagues about this.
They confirmed the same thing I mentioned above which is there's no way to disable postal code validation period.
Additionally, you're using 424242 test card in live mode. We're not sure what BIN country that matches to (likely UK) but the site you're testing it on is running in live mode. That's why it allows for additional characters in postal code.
With test mode API key, 424242 BIN is recognized as a test mode US card. So US validation is applied there.
west timber
So you think in live mode these problems will dissapear?
because not being able to input letters , where all postcodes have letters (NL), is kind of a big problem
regal cobalt
yeah because when I try using a regional card for netherlands, the postal code input is disabled alltogether
#1217907290175180882 message
so we don't require postal code for NL
west timber
same for UK?
regal cobalt
If you try using UK test card 4000008260000000
it losens the validation
Try it out
regal cobalt
NP! 🙂 Sorry for the confusion and the delay
west timber
Np!