loaderchips_code

[merry arch]

👋 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/1336637925554655242

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

[lost flare]

Hey Soma

the intent is to have an email address field show up on the top of card number

[north oyster]

hi there!

the Payment Element doesn't need an email for card payments, so it won't show that fields. instead you can add your own <input> field at the top of the page

[lost flare]

i see

and how do we inject that data in the payment intent?

[north oyster]

when you confirm the PaymentIntent

[lost flare]

also the appearance becomes somewhat different. is there a styling utility in stripe-js available so that the email field looks thematically similar

[north oyster]

you can either customize the look of the payment element https://docs.stripe.com/elements/appearance-api
or use your own CSS to change the look of your own input field

[lost flare]

this is where we need to inject the email address ?

  const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: `https://${urlFriendlyString(
        nonprofitName
      )}.makua-community.com/onboarding/${nonprofitId}/${communityId}/${temp_id}`,
    },
    redirect: 'if_required',
  });

const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
elements,
confirmParams: {
***receipt_email: email, ***
return_url: https://${urlFriendlyString(
nonprofitName
)}.makua-community.com/onboarding/${nonprofitId}/${communityId}/${temp_id},
},
redirect: 'if_required',
});

[north oyster]

that parameter doesn't exist.

instead set the email in here: <no, that would be in here: https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method_data-billing_details

[lost flare]

const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
elements,
confirmParams: { payment_method_data : {
billing_details:{ email : email }
},
return_url: https://${urlfriendlystring(/
nonprofitName
)}.makua-community.com/onboarding/${nonprofitId}/${communityId}/${temp_id},
},
redirect: 'if_required',
});

something like this? the other fields under payment_method will retain their values correct?

[north oyster]

I recommend testing this to know if it works or not. but yes that looks fine.