#krutarth-react-paymentelement
wild wigeon
If you want to collect address + phone number you'd need to also integrate with the Address Element (https://stripe.com/docs/elements/address-element/collect-addresses) which is meant to be compatible with the PaymentElement
However for email address you'd need to collect that in your own input
krutarth-react-paymentelement
prime coral
I don't know if i can send the code snippet here, but here is my code snippet, i have imported the addresselement above, im using late stripe-js and react-stripe-js, and im thrown error, the console says:
<form id="payment-form" onSubmit={handleSubmit}>
<Typography
style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '15px' }}
>
Pay with card
</Typography>
<AddressElement
options={{
mode: 'shipping',
allowedCountries: ['US'],
blockPoBox: true,
fields: {
phone: 'always',
},
validation: {
phone: {
required: 'never',
},
},
}}
/>
<PaymentElement id="payment-element" />
<button disabled={isProcessing || !stripe || !elements} id="submit">
<span id="button-text">
{isProcessing ? 'Processing ... ' : 'Pay'}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
swift slateBOT
wild wigeon
What specifically is at CheckoutFrom.js at line 47? Is
prime coral
AddressElement
options={{
mode: 'shipping',
allowedCountries: ['US'],
blockPoBox: true,
fields: {
phone: 'always',
},
validation: {
phone: {
required: 'never',
},
},
}}
/>```Did you remember to also import AddressElement?
wild wigeon
Can you share the full file? (including all the imports at the top and everything)
prime coral
wild wigeon
Hmm.... I'm not fully sure what this could be
I need to head out, but @abstract reef is going to help take a look
prime coral
alright
abstract reef
Ok taking a look
So did you get these errors before you added AddressElement?
Was everything working fine prior to adding the AddressElement in?
prime coral
everything was fine before adding addresselement
abstract reef
I see. So all you changed was importing AddressElement and pasting it in your form then you got those errors above?
prime coral
Yes correct
abstract reef
What specific version of react stripe js are you using?
prime coral
"@stripe/react-stripe-js": "^2.1.0",
"@stripe/stripe-js": "^1.52.1",
should i change the version of the libraries?
abstract reef
Sorry juggling multiple threads
Let me look now
Versions look fine
Shouldn't be any issues there
Let me see if anything is jumping out at me from the code
prime coral
alright!
abstract reef
Super weird. From what I can see you're setting it up properly
Do you have a test page that I can access to reproduce this?
prime coral
No, I don't have a test page..
abstract reef
It's not clear to me what's happening, so if you could publish a test page that I can play with that would help
abstract reef
Your code looks fine
But something obviously is wrong
Would need to be able to have access to a test page to play around with it
prime coral
I know the question which im going to ask is outside the purview of stripe but can you briefly tell me how can i set up the test page?
prime coral
It worked. I'll tell you what was the problem, so before i started this thread i was using older version of stripe which doesnt support addreselement, i uninstalled those version installed the latest without restarting the server. I just terminated the session restarted the session and it worked.
Thanks for letting me know about glitch, ill take a look into it..
abstract reef
OH that'll do it
Makes sense
Was a weird error! Your code looked fine, but yeah version conflicts will do it
prime coral
yes yes! thanks a lot!