k1ng

[civic heron]

Hello there

I believe you are asking about prefilling the email in Payment Element, correct?

[hybrid crow]

yes

@civic heron

[civic heron]

Gotcha then yeah you can set defaultValues when you create/render Payment Element: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails-email

[hybrid crow]

i added it but its still not showing up

const defaultValues = {
billingDetails : {
email: userdata.email,
}
}

const options = {
  clientSecret,
  appearance,
  defaultValues,
};

[civic heron]

Can you provide a screenshot of what you see?

[hybrid crow]

blank checkout page

[civic heron]

Okay that's because Payment Element doesn't require Email for Card payments. So that Email form is either your own Email form or you are potentially using Address Element as well?

[hybrid crow]

<LinkAuthenticationElement
id="link-authentication-element"
onChange={(e) => setEmail(e.target.value)}
/>

this thing

is it necessary?

[civic heron]

Ah

It isn't necessary, but it is recommended as it is an easy way for your customers to checkout

[hybrid crow]

all it does is collect email?

which i can check to give access to app

[civic heron]

Nope. Take a look at: https://stripe.com/docs/payments/link/accept-a-payment?platform=web&ui=elements&link-integration-type=before-payment

It is a quick way for customers to store and re-use PaymentMethods across Stripe merchants.

[hybrid crow]

i see

ok but can I prefill the email or no?

[civic heron]

Yes see: https://stripe.com/docs/payments/link/accept-a-payment?platform=web&ui=elements&link-integration-type=before-payment#build-the-payment-form

But if you are prefilling email as you are doing above then that should be enough...

Have you logged out userdata.email to make sure that is initialized correctly?

I'd recommend trying to hardcode an email to start with

[hybrid crow]

const appearance = {
theme: 'stripe',
};

const defaultValues = {
billingDetails : {
email: "[e-mail]",
}
}

const options = {
  clientSecret,
  appearance,
  defaultValues,
};

still not prefilled

[neon dome]

Are you passing appearance to the function where you initialize the Element?

From the docs:

const CheckoutPage = ({clientSecret}) => ( <Elements stripe={stripe} options={{clientSecret, appearance}}> <CheckoutForm /> </Elements> );

[hybrid crow]

<Elements options={options} stripe={stripePromise}>
<CheckoutForm />
</Elements>

looks more like this

[neon dome]

Where did you get that specific code? Did you modify it from the docs you got from Bismarck?

[hybrid crow]

@neon dome https://stripe.com/docs/payments/quickstart?client=next

followed this exactly

[neon dome]

Did you follow this specific step?

https://stripe.com/docs/payments/quickstart#style

You have to pass the appearance object to the options object. That options object then gets passed when you initialize Elements

Give me a few minutes to test the defaultValues on my end

Okay, circling back to default values. Where are you expecting to see those populate?

[hybrid crow]

just the email

@neon dome i want email to be prefilled

i think it has something to do with link authentication element, because that handles the email

but options aren't passed into it

[neon dome]

Can you send me a screenshot of what you're seeing and where you're expecting it to show up?

[hybrid crow]

i need email to be prefilled

so user doesn't have to input it

[neon dome]

Is there a line you're including somewhere to force the Payment Element to show an email field?

[hybrid crow]

<LinkAuthenticationElement
id="link-authentication-element"
onChange={(e) => setEmail(e.target.value)}

  />

its this thing

if i remove it the email element disappears

@neon dome

[neon dome]

got it, thanks. Still digging

Okay, this is going to take more time than I can provide in a live chat environment. Can you create an email support thread and mention two-shoes in the text body somewhere? This will allow me to pick it up and respond via email.

https://support.stripe.com/contact/email

[hybrid crow]

done

filled it out

[neon dome]

Okay, I'll grab it and try to follow up as soon as I can

Can you DM me your email?

Or rather, the email of the account you signed into to send it?