Aryan17

[violet sage]

receipt_email is for sending a payment receipt. To display email, email address should be set in defaultValues.billingDetails.email in Payment Element creation: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails-email

I can render payment element but the issue is I don't need email field
Thanks for sharing more context. If you do not wish to collect email address in Payment Element, you can either:

1. Set fields.billingDetails.email to never, so that email will never be collected: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-email; OR
2. Set fields.billingDetails to never that all billing details including email, name, billing address will not be collected.

[gusty stirrup]

Thanks for the help but this is for payment element and I am using PaymentIntent which does not support any of these properties

[violet sage]

When you mention email field in checkout element, where do you refer to specifically? I am under the assumption that this email field refers to the email collection field at the frontend Payment Element

[gusty stirrup]

Yes you are correct

In this UI

email field above card number is the one I want to remove

[violet sage]

Then this suggestion should work as this is a Payment Element. Could you have a try?

[gusty stirrup]

Let me give it a try again

I can create this PaymentElement but I don't know where do I put that PaymentElement

[violet sage]

It is at the place where you create the Payment Element. For example,

const options = {
  fields: {
    billingDetails: {
      email: 'never',
    },
  },
};

const paymentElement = elements.create('payment', options);

[gusty stirrup]

No I mean where do I pass this constant

const paymentElement is created but it is never used

[violet sage]

paymentElement should be mounted afterwards in your code and it will pick up the email configuration. For more mounting details, you may refer to the guide here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&client=html#web-collect-payment-details

[gusty stirrup]

<form id="payment-form text-center ml-5" onSubmit={handleSubmit}>
<LinkAuthenticationElement
id="link-authentication-element"
onChange={(e) => setEmail(e.target.value)}
/>
<PaymentElement id="payment-element" options={paymentElementOptions} />
<button disabled={isLoading || !stripe || !elements} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>

You mean I should pass that paymentElement over here?
I did that but it throws an error when I create a payment intent

[violet sage]

I see that you're using React. If you're using React, then it will be:

const options = {
  fields: {
    billingDetails: {
      email: 'never',
    },
  },
};
<PaymentElement options={options}/>

options here should be equivalent to your paymentElementOptions

[gusty stirrup]

It is still not working
const options = {
layout: "tabs",
fields: {
billingDetails: {
email: 'never',
},
},
}
<PaymentElement id="payment-element" options={options} />

is this the right approach?

[violet sage]

Oh wait! Sorry I missed LinkAuthenticationElement in your code

The email field comes from LinkAuthenticationElement, not billing details

Do you use Link payment method: https://stripe.com/docs/payments/link?

Link is a payment method offered by Stripe and requires email to obtain customer's saved payment methods

If you're not using Link, you can simply remove LinkAuthenticationElement to avoid email address collection

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

[gusty stirrup]

I can't describe it how helpful you were.
I was stuck at these point since 2 days
Thanks a lot buddy.
Let me know if I can help you anytime in future....

[violet sage]

No problem! Happy to help 😄