#nina_messaging-element-options

1 messages · Page 1 of 1 (latest)

ionic mirageBOT
#

đź‘‹ 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/1428156667857731714

đź“ť Have more to share? Add more details, code, screenshots, videos, etc. below.

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.

viscid laurel
small bridge
#

Correct

viscid laurel
#

Okay and can you provide me with the JavaScript you are using to initialize it?

Also, are you initializing Stripe elements with a client secret or are you using deferred intents?

small bridge
# 
const elements = stripe.elements();
const options: StripePaymentMethodMessagingElementOptions = {
      amount: 12300,
      currency: 'USD',
      countryCode: 'US',
    };

    paymentMessageElement = elements.create('paymentMethodMessaging', options);

    if (stripeFinanceMessagingEl.value) {
      await paymentMessageElement.value.mount(stripeFinanceMessagingEl);

    }
#

I give you a demo

viscid laurel
#

Well for one thing, if you are going to processing a payment in CAD, you need to pass CAD as the currency to the messaging element creation.

#

All the parameters (amount, currency, countryCode) should match the Payment Intent and location of the Customer to ensure the message accurately reflects the options the customer will be presented with in the Payment Element.

small bridge
#

What I’m certain about is that the Payment Element doesn’t show up because I didn’t specify a payment_method, and my IP is in Canada while the currency I passed in is USD.
However, I don’t understand why the StripePaymentMethodMessagingElement can still display in this case.

viscid laurel
#

the Payment Element doesn’t show up because I didn’t specify a payment_method

What do you mean by that?

#

The messaging element will display the options you configure it to display based on the values you provide

small bridge
#

I use dynamic payment , so I didn't specify the payment_menthod_opthion

#

So the messaging element doesn't depend on the user IP? But the payment element depend user IP

viscid laurel
#

What do you mean by "payment element doesn't show up"? Do you mean nothing renders at all?

#

Correct, that is my understanding. You need to figure that out and specify the correct information.

small bridge
#

So the issue is that the Payment Messaging Element and the Payment Element rely on different conditions to determine whether payment method should be displayed, which leads to inconsistent behavior between them.

viscid laurel
#

But Klarna is available in CAD for CA customers

#

Can you share a front-end where I can see this behavior?

small bridge
#

give me second

#

Now I stay in Canada, But I switch the currency to USD, the financing message can display, but the payment element could not show here.

7de2eefb-e746-476b-afcc-4f1264851389.png image.png
viscid laurel
#

Can you share the payment intent ID?

small bridge
#

pi_3SIbkTElKfp1TfOj0dgXSYkr

viscid laurel
#

And are you specifying the countryCode: "US"?

#

Can you try removing that parameter altogether?

small bridge
#

yes, I specifying the countryCode: "US"

viscid laurel
#

Okay , try not doing that.

small bridge
#

Property 'countryCode' is missing in type '{ amount: number; currency: any; }' but required in type 'StripePaymentMethodMessagingElementOptions'

#

Looks like this one is required

viscid laurel
small bridge
viscid laurel
#

Essentially you are telling us that your customer is in the US and paying with USD, so that's the information we use

#

If you are going to pass the countryCode, it needs to be correct.

#

But that interface definition appears incorrect

small bridge
#

I pass this one ```
const options: StripePaymentMethodMessagingElementOptions = {
amount: 12300,
currency: 'USD',
countryCode: 'US',
};

viscid laurel
#

Right

#

You are passing incorrect information

#

If you are in Canada, then you should pass countryCode "CA"

small bridge
#

I know, I want to confirm with you why I pass currency: 'USD',
countryCode: 'US',, it can display in messaging element . But in payment Element , it won't

viscid laurel
#

That is correct. You are providing incorrect data to the messaging element so it displays even when Klarna won't be available

#

What version of Stripe.js are you using?

#

I'm looking at the StripePaymentMethodMessagingElementOptions definition here and it looks like countryCode is optional

small bridge
#

I think this inconsistency happens because the Payment Element takes the user's IP address into account, while the Messaging Element doesn’t have this restriction.

#

I use 5.0.0

#

Looks like if I doesn't pass countryCode: 'US', it won't display

viscid laurel
#

Right, which is accurate

#

since Klarna isn't an option

small bridge
#

Additional, If I create an experiment, how can I ensure that the Payment Messaging Element and the Payment Element display the same payment methods consistently?

viscid laurel
#

Have you tested anything?

#

The countryCode was causing the IP localization failure. Our docs point out that we use the IP address if you do not provide the countryCode.

If not set, the buyer's country will be inferred from the request.