#jonathanhuang13
ebon mistBOT
Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- jonathanhuang13, 1 day ago, 22 messages
ancient fjord
For # 1, I think the intent is that you'd use the Messaging Element in a step much earlier than when you present the PaymentElement, perhaps in a product catalog or product page. I don't have an explicit recommendation for doing this but it looks like there are ways to pull language and infer location from that: https://stackoverflow.com/questions/673905/how-can-i-determine-a-users-locale-within-the-browser
For # 2, I don't quite follow. Which error are you referring to?
dim cipher
I see, although, for #1, I just tested this with a VPN. I set the countryCode to US but connected via a non-supported country and the messaging element didn't show up. It looks like the messaging element is getting the country automatically.
For #2, I'm getting a type error if I don't add paymentMethodTypes, but in the docs, it says I don't have to add that param.
Property 'paymentMethodTypes' is missing in type '{ amount: number; currency: "USD"; countryCode: "US"; }' but required in type 'StripePaymentMethodMessagingElementOptions'
Interesting. Did you see an error in your console for # 1?
For # 2, which docs are you referring to? This lists paymentMethodTypes as required: https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-paymentMethodTypes
dim cipher
For #1: good question, I don't see an error
For #2: I'm referring to these docs - https://docs.stripe.com/payments/payment-method-messaging#create-and-mount-the-payment-method-messaging-element. In step 3, it doesn't include paymentMethodTypes and there's a whole section on what to do if you want to include it
ancient fjord
For #2: I'm referring to these docs - https://docs.stripe.com/payments/payment-m...
This is confusing and was probably an oversight. I'll flag this so we can remove this section since paymentMethodTypes are required
dim cipher
Hmm I'm not sure if this is an oversight. I'm using dynamic payments right now and when I pass in [], the messaging element shows Klarna (which is the BNPL option I enabled). It doesn't show nothing
ancient fjord
Okay, let's take it one step at a time. Can you share the code for how you're rendering the messaging element?
remote atlas
Hello! I'm taking over and catching up...
The Messaging Element takes into account the browser locale and the country code you provide to determine what ends up getting displayed. It doesn't just use one or the other. The behaivor you're describing sounds normal to me.
As far as the TypeScript issue, that sounds more like an issue with our types than anything else, but seeing your code would help.
And an issue with our docs. paymentMethodTypes is not required.
ebon mistBOT
dim cipher
Interesting. If the Messaging Element takes into account the browser locale, then why do we need to pass in a country code? The country code is the end-buyer country and that's the same as the browser locale
remote atlas
The browser locale and the country the buyer are in are used for different things. The browser locale, for example, is used to localize the info displayed.
dim cipher
How do most people determine the countryCode then?
remote atlas
It varies. Some people determine the customer location early in the process, some people have their customers log in and have their address info on file, others have county-specific versions of their sites. Whatever works best for you is fine as long as you supply the country the customer is in.
The goal is to provide the country code that will display the correct options available to the customer on the other end.
dim cipher
Also, this is the code I've written - it's very simple and just taken from the docs:
<Elements
stripe={stripePromise}
options={{
appearance: {
theme: 'stripe',
},
}}
>
<PaymentMethodMessagingElement
options={{
amount: 9900, // $99.00 USD
currency: 'USD',
// the country that the end-buyer is in
countryCode: 'US',
paymentMethodTypes: []
}}
/>
</Elements>
As you can see, the paymentMethodTypes is [] and it still shows Klarna on the screen
remote atlas
Basing it on the billing address is usually the way to go, if you have that.
If you pass an empty array we show whatever's available as far as I know.
Passing an empty array is like not passing paymentMethodTypes at all, I mean.
dim cipher
I see okay. Making the param optional seems clearer but that's okay
remote atlas
Yeah, I'll flag that internally, it should be optional. I already flagged the docs issue where it's marked as required.
I think maybe it was required early on, maybe during the beta, and then it got changed to optional and we forgot to update some things with the change.
dim cipher
As for the country code, roadrunner_stripe pointed out that the MessagingElement is often used before you present the PaymentElement (i.e. on a product catalog page). In that case, we don't have the billing address or location of the customer at all
I'm guessing we could just use the browser location then?
remote atlas
Yep, that's a common use case. In that situation using the browser's location, or determining the country from the customer's IP address are valid approaches.
Or you could display a "choose your country to see payment options" form field and then render the Element when something is selected.
dim cipher
Right and do you have a recommended way to do that? I guess I wish the MessagingElement would handle this common case for us
remote atlas
That last approach would provide the most accurate informaton to the customer, but at the cost of a little bit of interaction required.
We don't have a recommended way to do it. Whatever works best for your use case is what you should go with, and you're best positioned to determine what that approach is.
dim cipher
Hmm okay
one last question
so this is my code right now:
<PaymentMethodMessagingElement
options={{
amount: 9900, // $99.00 USD
currency: 'USD',
// the country that the end-buyer is in
countryCode: 'US',
paymentMethodTypes: []
}}
/>
countryCode is US
The messaging element shows. However, when I use a VPN and route my traffic through MX (which is not a supported country for Klarna), the messaging element disappears
That means the messaging element is somehow taking into account traffic location right?
remote atlas
Does anything show up in the browser's console when this happens?
dim cipher
nothing shows up
remote atlas
I don't know why that would happen. The currency is still USD?
dim cipher
These show up but they seem unrelated and happen regardless of if I'm on VPN or not
Yeah, the currency is still USD
remote atlas
What do you see on this page with and without the VPN you're using? https://4242.io/test/payment-method-messaging-element/
remote atlas
Interesting. I don't know why it's behaving that way. It does seem like we are taking into account the location based on the IP, but to your point I don't know why we would do that if you're explicitly specifying a country. It seems like a bug to me, and I recommend you report it to Stripe support so you can get async updates as we investigate: https://support.stripe.com/contact/email
dim cipher
Okay I can do that later, but I'm guessing you'll flag it on your side too?
remote atlas
I will, yeah, but you won't know how things turn out on my end. 🙂