[BUG]: MerchantDisplayName doesn't work in Stripe Elements

[zyadcodes]

What happened?

I have a marketplace application where customers place orders with merchants. Merchants have connected accounts in Stripe in which they receive their payouts. When a customer places an order on React Native, we can show the merchant's business name by doing something like this:

   await initPaymentSheet({
       merchantDisplayName: merchantName,
       ...
   });

However, when using the @stripe/react-stripe-js library in React.JS to build a custom web checkout flow using <Elements />, there is no way to pass this merchant name. When customer pay using Apple Pay, it shows the incorrect name. For example, a store might be called "Billy's Bike Shop", but the Stripe Connected Account is under "Billy Joseph".

In this case, when a customer chooses to pay using Apple Pay on web, it'll say "Pay Billy Joseph", when it should say "Pay Billy's Bike Shop". This functionality is achieved on mobile using the initPaymentSheet function above in @stripe/stripe-react-native, but it is not available in React? Am I missing something?

I understand it's a different component. On mobile, there's clearly a way to override the connected account's business information with a customer display-able name. I am not sure why we wouldn't be able to do that on web as well.

For example, in this example, the connected account's name is "Platter", but the name they want to display to customers is "Greek Pita". We can achieve this by setting merchantDisplayName on mobile. There's no way to achieve this on the react.

On Mobile (Correct)

On Web (Incorrect)

Environment

No response

Reproduction

No response

[awalker-stripe]

Hello! To confirm that I'm understanding correctly, it sounds like you have a connected account, and you'd like to customize the merchant's name that shows up at the bottom of the payment sheet as opposed to using that connected account's name. Does this seem right?

Could you share a little bit more about your integration? In particular, we have a few different Elements that can show Apple Pay – are you using the Payment Request Button, Express Checkout Element, or another integration?

[zyadcodes]

Hello! To confirm that I'm understanding correctly, it sounds like you have a connected account, and you'd like to customize the merchant's name that shows up at the bottom of the payment sheet as opposed to using that connected account's name. Does this seem right?

Could you share a little bit more about your integration? In particular, we have a few different Elements that can show Apple Pay – are you using the Payment Request Button, Express Checkout Element, or another integration?

Hey! Thanks for the reply. To answer your first question, that is precisely correct. Additionally, for context, telling all of my existing connected accounts to change their "doing business as" name is not something practical that I can do for customer support reasons. These are very non-technical accounts.

As for the integration, I am using the <Elements /> tag that's exported from this library. I am willing to switch integrations if it means being able to correct customize this Apple Pay name.

[awalker-stripe]

Got it – thank you for sharing that information. This is unfortunately in the territory where exploring options will require diving into your particular integration in a way that we aren't able to do here on Github. Could you reach out to Stripe Support? They'll be better equipped to discuss options here.