sanderfish_unexpected

[unkempt pollen]

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

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

[long dew]

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.

• sanderfish_webhooks, 21 hours ago, 21 messages

[warm sundial]

        const { error, paymentIntent } = await stripe.confirmPayment({
          elements,
          clientSecret: payment.stripePaymentIntentClientSecret,
          confirmParams: {
            return_url: returnUrl,
            payment_method_data: {
              billing_details: {
                ...(billingDetails.email && { email: billingDetails.email }),
                ...(billingDetails.name && { name: billingDetails.name }),
                ...(billingDetails.phone && { phone: billingDetails.phone }),
                ...(billingDetails.address && {
                  address: billingDetails.address,
                }),
              },
            },

we attempt to confirm payments like this.

when a full phone address is passed here, it throws an error. See request: https://dashboard.stripe.com/acct_1MzhtSKXx9vuYqab/logs/req_IZCEjlFC8n5CCf

  "payment_method_data": {
    "referrer": "..",
    "type": "konbini",
    "billing_details": {
      "email": "...",
      "phone": "+8190...41782",
      "name": "... "
    },

[hybrid sentinel]

You are passing [phone] It expects the 11 digits number as 09081841782

[warm sundial]

right, but here in the docs it says "including extension" https://docs.stripe.com/api/payment_methods/create#create_payment_method-billing_details

[hybrid sentinel]

Hmm you are right! Just curious would it go through if you change to 09081841782?

[warm sundial]

I haven't set up a reproduction environment yet, so not sure

Ultimately we'd want to pass the phone in billing_details including the extension.

Konbini expects the phone without extension, but we're using confirmPayment . I would expect Stripe to strip the extension via this API

https://docs.stripe.com/payments/konbini/accept-a-payment?payment-ui=direct-api#web-submit-payment

[hybrid sentinel]

That's the confirmation_number, not phone number, right?

Oh wait

[warm sundial]

Right. Actually maybe there's something else going on — our customer shared the following screenshot

Ignore the red arrow, the issue is the form underneath the payment method selector

[hybrid sentinel]

https://docs.stripe.com/js/payment_intents/confirm_konbini_payment#stripe_confirm_konbini_payment-data-payment_method_options-konbini-confirmation_number

The confirmation number should be different I think?

An optional 10 to 11 digit numeric-only string determining the confirmation code at applicable convenience stores. May not be all 0 and could be rejected in case of insufficient uniqueness. We recommend to use the customer’s phone number.

[warm sundial]

"We recommend to use the customer’s phone number."

I'm unable to get Konbini to display at this customer's checkout at the moment, so having a bit of a hard time debugging what's happening exactly. https://compra.nihongonapratica.jp/se-virando-na-fabrica

[hybrid sentinel]

Yeah but this is also " 10 to 11 digit numeric-only"

[warm sundial]

Yeah. So it's phone number without extension

I noticed this in the request

"payment_method_options": {
"konbini": {
"confirmation_number": "[phone]"
}
},

which I assume comes from here

(screenshot is not from the same request, so the phone numbers are different)

but we have no control over that field afaik, the stripe element renders it, yet doesn't automatically format the input

[hybrid sentinel]

The orange, correct? I think that is what customer input in

hmmm

[warm sundial]

Yep the orange

Indeed that is customer input. But we can't format that like the Konbini docs suggest as it's Stripe's own field. I think 🤷‍♂️

[hybrid sentinel]

Well it depends on the customer input so we (Stripe or you) wouldn't have any influence here. You just need to notify the customer to input phone number without + as they normally do

[warm sundial]

Hmm yeah, this field is part of the PaymentElement

We can't add any notices to it

So the only way for us to handle it, would be to intercept the error, check if it's an invalid_request_error and if the error param is payment_method_options[konbini][confirmation_number], then display our own message instead of Stripe's

But I think the issue is that

• the field asks for a phone number
• it allows for non-numeric characters
• it doesn't provide a helpful error message

[hybrid sentinel]

Can you even intercept the error? (Given the fact it's an UI validation error)

[warm sundial]

I don't know haha

I don't think so

[hybrid sentinel]

I personally think the error message is clear enough for the customer to reinput, and both format still be a phone number. But I do agree we probably can restrict only numeric character to be inputed into that field

[warm sundial]

from the amount of failed payments this customer experienced, I would respectfully disagree with the error message being clear enough

"Invalid string: [phone]...9021241782; must be at most 11 characters"

I don't think a regular user would have any idea what to do after reading this

[hybrid sentinel]

Oh you mean the value? [phone]...9021241782

[warm sundial]

That is the UI validation error shown by Stripe

[hybrid sentinel]

I see I see. Hold on let me boost up an example to try it myself

[warm sundial]

thanks 🙂

[hybrid sentinel]

Alright it's not straighforward to setup an account eligible for Kombini :/

Sorry

[warm sundial]

Yeah tell me about it 😄

[hybrid sentinel]

But I will forward your feedback about the confusing value on the error message

Also, one thing to try to to catch the error on confirmPayment

[warm sundial]

right, we do actually

[warm sundial]

thanks!

so I guess I could catch and overwrite it there. But it wouldn't be translated etc

[hybrid sentinel]

Did you catch that error when listening to callback from confirmPayment?

[warm sundial]

we catch the error and then render it in the UI

but we can't currently translate the messages on our end

[hybrid sentinel]

the message coming back in English, isn't it?

Btw can I see the URL of your site? Probably we can test it directly

[warm sundial]

the message comes back in whatever the users browser language is

we're a connect platform, I can only get this to work in our customer's account

https://compra.nihongonapratica.jp/treta-na-pratica

[hybrid sentinel]

I can only input number here

How did they come up with a screenshot with +

[warm sundial]

Hmmm good question

I'm seeing the same actually

Ah

If you refresh, fill in the Whatsapp field, then click on Konbini

We prefill the PaymentElement with existing values

      <StripePaymentElement
        options={{
          defaultValues: {
            billingDetails,
          },

https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails

so the issue is that Stripe uses the phone value here to prefill the Konbini phone number field

[hybrid sentinel]

We prefill the PaymentElement with existing values
Could you elaborate a bit more? Which existing values?

And I can see the behavior! Just want to clarify where does it come from

[warm sundial]

Any customer information from the form above

...
  const { fields } = getFormFieldValues(form.fields);
  const billingDetails = getBillingDetailsFromFields(fields);

  return (
    <div>
      <StripePaymentElement
        options={{
          defaultValues: {
            billingDetails,
          },
...

export default function getBillingDetailsFromFields(fields) {
  if (!fields) {
    return {};
  }

  const email = findFieldByType(fields, 'email')?.value?.toLowerCase();

  const billing = getStripeBilling(fields);
  const shipping = getStripeShipping(fields);
  const address = getAddress(billing, shipping);

  const billingDetails = {
    email: email,
    name: billing.name,
    ...(billing.phone && { phone: billing.phone }),
    ...(address && { address }),
  };

  return billingDetails;
}

We do this to support other payment methods that require address info, like Afterpay and Klarna.

[hybrid sentinel]

Ah I see, so a workaround could be, when you prefill you could "standardlize" the phone number format

But in case it was in wrong format, I agree our message is confusing for the value

[warm sundial]

potentially, but that would effect all customers with all payment methods.

we would have to strip away the country extension. I don't think that's what our customers would expect.

[hybrid sentinel]

Does other PM accept the extension?

[warm sundial]

yes, haven't seen this error on any other payment methods.

[hybrid sentinel]

Thanks. So I think I can forward your feedback for

1. A better error message, avoid the confusing value like [phone]...9012345678
2. Ask Kombini to also accept extension phone number

Confident that we will improve 1. 2. would be debatable and takes longer 🙂

[warm sundial]

I would say, don't use the default phone value passed to the payment element for Konbini https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails-phone

Everywhere else in Stripe API, phone number is just a string

But Konbini expects a specific format

[hybrid sentinel]

How can we not use the defualt phone value 🙂 It's the prefill parameter and we need to respect the prefill instructions

Most of the merchants would expect to be able to prefill a valid phone number like 09012345678

[warm sundial]

Right. Then handle the extension 😉

If using the Address element, pretty sure the phone value collected there would also be the wrong format.

thanks for your help — any chance you can keep me updated about an improvement here?

To be honest, it's kind of odd that the field is called "Phone number" and the phone number gets passed into it.

Konbini works with "confirmation numbers" which can be a phone number

An optional 10 to 11 digit numeric-only string determining the confirmation code at applicable convenience stores. May not be all 0 and could be rejected in case of insufficient uniqueness. We recommend to use the customer’s phone number.

I don't think it's expected behaviour