issambd | Stripe Developers | Page 1

daring beacon Dec 1, 2021, 5:29 PM

#

Do you have a request ID I can take a look at? Can you also add some logging to your code to confirm that postal_code is valid before you pass it to us

hexed iris Dec 1, 2021, 5:34 PM

#

Yes, I have input validation implemented, postal_code is valid. I don't understand what you mean with a request ID? can I find it in Stripe's logs?

daring beacon Dec 1, 2021, 5:34 PM

#

You would be able to find it in your dashboard, alternatively if you have the Setup Intent ID that would also work!

hexed iris Dec 1, 2021, 5:35 PM

#

alright, lemme register a new payment methode and get the setupIntent

#

id: "seti_1K1wi8LzSPzAEiPDyVsjDt09"

daring beacon Dec 1, 2021, 5:43 PM

#

That's so strange - let me try a couple of things out on my end

hexed iris Dec 1, 2021, 5:43 PM

#

alright

daring beacon Dec 1, 2021, 6:03 PM

#

Hmm... I'm not able to replicate it in my test setup - let me try out a few additional things

hexed iris Dec 1, 2021, 6:03 PM

#

alright

#

thank you

daring beacon Dec 1, 2021, 6:12 PM

#

Ah! I think I'm on to something - what does you code look like that is creating the Payment Element?

hexed iris Dec 1, 2021, 6:13 PM

#

Lemme send you a screenshot

#

#

options contains ClientSecret and appearences

daring beacon Dec 1, 2021, 6:18 PM

#

I think the issue is that you need to specify that you don't want to collect postalCode from the Payment Element (so you'd set postalCode: never - https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-postalCode).

hexed iris Dec 1, 2021, 6:19 PM

#

I am sorry I don't understand. I am actually trying to cllect it, how does specifing this helps?

daring beacon Dec 1, 2021, 6:20 PM

#

If you're trying to collect it through the Payment Element, why are you passing it in with your confirm_params?

hexed iris Dec 1, 2021, 6:21 PM

#

I am trying to collect it through confirm_params bc that's what the docs say, I pass it along the other adress attributes

#

all other attributes are saved but the postal code

#

Take a look at this

daring beacon Dec 1, 2021, 6:22 PM

#

Yeah so setting postalCode: never means that you don't want to collect postal code through the UI, but it should still keep the postal code that you're pass in to your confirm_params

hexed iris Dec 1, 2021, 6:23 PM

#

aha, the UI does not ask for postal_code anyways, lemme explicitly disable it then and test it again

#

I have a problem, the options object does not contain a fields property as specified in the docs, take a look at those definitions

#

wait, I am not using a payment element that's why

#

I am actually using this : Element components

#

which I guess is different from the javascript version

#

I am sorry that doesn't sound coherent, but my point is the react Element does not have fields property like the vanilla javascript one

rich moat Dec 1, 2021, 6:34 PM

#

that's expected

#

Sorry, we have many different integration paths, so step 1 would be to understand what exact flow and integration path you use, and then that path has its own params/logic really

hexed iris Dec 1, 2021, 6:35 PM

#

Alright, this is my important statement import { Elements } from "@stripe/react-stripe-js";

#

this is the version : "@stripe/react-stripe-js": "^1.6.0",

rich moat Dec 1, 2021, 6:36 PM

#

Do you have a screenshot of what it looks like?

hexed iris Dec 1, 2021, 6:36 PM

#

hexed iris

you mean this?

rich moat Dec 1, 2021, 6:36 PM

#

no that's code

#

I mean what you see on your page

hexed iris Dec 1, 2021, 6:36 PM

#

oh, one second

#

This is the stripe iframe

rich moat Dec 1, 2021, 6:47 PM

#

hum

hexed iris Dec 1, 2021, 6:47 PM

#

those fields are chosen automatically

rich moat Dec 1, 2021, 6:48 PM

#

yeah sorry, trying to grasp your context and you seem quite lost too yourself 😅

hexed iris Dec 1, 2021, 6:48 PM

#

Yes I am sorry, lemme know if I can give you any further infos about my code

rich moat Dec 1, 2021, 6:48 PM

#

Like the code you shared seems to be the normal card element, but the screenshot you shared looks like PaymentElement, and I am totally lost with your context and what you are asking.

#

Do you have a page I can look at?

hexed iris Dec 1, 2021, 6:50 PM

#

I don't think you can, I am working on a teams app, which is not accessible outside of MS teams, but I can quickly go through my code, to help you understand the context

#

This is my Element

#

//import
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";


//element 
<Elements stripe={stripePromise} options={options} >
   <SetupForm setInd={setInd} noTenant={noTenant} order={order} setNavIndex={setNavIndex} />
</Elements>

//options
 const options = {
    clientSecret,
    appearance: {
      variables: {
        colorPrimary: "#616161",
        colorBackground: "#F0F0F0",
        colorText: "#616161",
        colorDanger: "#df1b41",
        fontFamily: "Ideal Sans, system-ui, sans-serif",
        spacingUnit: "5px",
        // borderRadius: "4px",
        fontSizeBase: "14px",
      },
      rules: {
        ".Label": {
          padding: "0  0 10px 0",
        },
        ".Input": {
          border: "none",
          marginBottom: "20px",
          padding: "10px",
          fontSize: "14px",
        },
        ".Input:focus": {
          outline: "none",
          border: "red bold 5px !important",
        },
      },
    },
  };

rich moat Dec 1, 2021, 6:52 PM

#

Is there any chance you could move away from your entire app and just build a really simple and basic example to debug this further?

hexed iris Dec 1, 2021, 6:53 PM

#

Humm, could you quickly look at my code first?

rich moat Dec 1, 2021, 6:53 PM

#

I can try but I worry we're talking past each other 😦

#

and the channel is quite busy with lots of questions

hexed iris Dec 1, 2021, 6:54 PM

#

Oh sorry, lemme try to build a separate project for this then

#

this will take a moment

rich moat Dec 1, 2021, 6:54 PM

#

ahhh wait

#

what's <SetupForm?

#

that's what is inside that should matter

hexed iris Dec 1, 2021, 6:55 PM

#

it's the component that is warpped by the Element

#

lemme show you what's indie

#

import : import { useStripe, useElements, PaymentElement } from "@stripe/react-stripe-js";

#

this : <PaymentElement />

rich moat Dec 1, 2021, 6:56 PM

#

see you clearly use PaymentElement there 😅

#

Okay, so now that I know that. What's your question? I'm a bit confused overall by what is even blocking you

hexed iris Dec 1, 2021, 6:57 PM

#

I am passing the billing data inside stripe.confirmSetup

rich moat Dec 1, 2021, 6:57 PM

#

can you re-share that exact code?

hexed iris Dec 1, 2021, 6:57 PM

#

yes sir

#

      elements,
      redirect: "if_required",
      confirmParams: {
        payment_method_data: {
          billing_details: {
            address: {
              city,
              line1,
              line2,
              postal_code,
            },
            email,
            name,
          },
        },
      },
    }); ```

#

all the billing data is saved but the postal code

#

this is my problem

#

should I procceed with building a seperate project?

rich moat Dec 1, 2021, 7:07 PM

#

nah, can you try and hardcode exact values first?

#

      elements,
      redirect: "if_required",
      confirmParams: {
        payment_method_data: {
          billing_details: {
            address: {
              city: 'city',
              line1: 'line1',
              line2: 'line2',
              postal_code: '90210',
            },
            email: 'myemail@example.com',
            name: 'my name'
          },
        },
      },
    });```

#

like try this and see if postal code works

hexed iris Dec 1, 2021, 7:08 PM

#

okay

#

unsuccessful, this is the stripe confirm request

#

Request ID : req_UYKnGoJbclFi3H

rich moat Dec 1, 2021, 7:15 PM

#

thanks let me try I have an inkling what this might be

hexed iris Dec 1, 2021, 7:16 PM

#

req_P6BDABV6ILKV1J

#

Im sorry that was the wrong ID

rich moat Dec 1, 2021, 7:17 PM

#

all of those are wrong ids 😅

hexed iris Dec 1, 2021, 7:17 PM

#

Ah shit, I am really sorry, lemme check

rich moat Dec 1, 2021, 7:17 PM

#

but it's fine I found it

#

I'm trying to repro to see if it's a bug

hexed iris Dec 1, 2021, 7:17 PM

#

alright, thank you

#

pretty sure it's this one : req_Pd2IuDOzVKD6Q4

rich moat Dec 1, 2021, 7:20 PM

#

yep that's the one I found!

#

which country are you based in? Are you in the US/CA/UK or elsewhere?

hexed iris Dec 1, 2021, 7:28 PM

#

in DE

rich moat Dec 1, 2021, 7:32 PM

#

ah okay so I have a feeling there's a bug where we don't show the postal code but we still don't treat your postal code in the params, but struggling to reproduce, give me a bit more time

hexed iris Dec 1, 2021, 7:33 PM

#

take your time

rich moat Dec 1, 2021, 8:13 PM

#

okay I can't repro with non React just yet. Can you try one quick thing for me?

#

Can you disable country and postal code collection entirely?

hexed iris Dec 1, 2021, 8:14 PM

#

I can disable postal code, but country comes with thr iframe, I have no idea how to disable it

#

country is part of the UI generated by the payment element

rich moat Dec 1, 2021, 8:15 PM

#

nah you're misunderstanding how all of this works :p

#

country and postal code are part of our default UI! Just we only collect postal code in some countries (US/UK/CA) and you're in one where we don't so you don't see it

#

but I think something is thinking we collect it and ignoring your own param

#

            fields: { 
              billingDetails: { 
                address: { 
                  country: 'never',
                  postalCode: 'never',
                },
              } 
            },
          }}
        />```

#

that's how you disable both (I'm testing too, just less good with React myself)

hexed iris Dec 1, 2021, 8:17 PM

#

I meant that I litrally have an input field where the user inputs their postal code, then the value is sent with the setupintent

#

lemme try your code

#

I get this error

#

You specified "never" for fields.billing_details.address.country when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address.country when calling stripe.confirmPayment or stripe.confirmSetup. If you opt out of collecting data via the payment Element using the fields option, the data must be passed at confirm-time.

rich moat Dec 1, 2021, 8:25 PM

#

okay then pass country in that confirm call where you pass the address details

#

sorry slowly fixing my React install to get to the same state

hexed iris Dec 1, 2021, 8:28 PM

#

Look at that

#

"postal_code": "90210",
"country": "DE"

#

now the postal code is saved when the country is also passed in the intent object

rich moat Dec 1, 2021, 8:34 PM

#

okay so I do think there's a real bug. Now all I need is to figure out how to repro myself but React and me don't mesh well lol

#

but you should be unblocked since you don't want Elements to collect the postal code or country for you

hexed iris Dec 1, 2021, 8:34 PM

#

rich moat but you should be unblocked since you don't want Elements to collect the postal ...

is there a way to make it do so?

rich moat Dec 1, 2021, 8:34 PM

#

make it do what?

hexed iris Dec 1, 2021, 8:34 PM

#

collect both country and postal code

#

as you have seen the UI only collects the country and ignores the postal code

rich moat Dec 1, 2021, 8:35 PM

#

it doesn;t

#

country and postal code are part of our default UI! Just we only collect postal code in some countries (US/UK/CA) and you're in one where we don't so you don't see it

#

that's what I said earlier

#

we only collect postal code in specific countries where it really helps with conversion/increase in authorization/decrease in fraud

#

so it works, but it doesn't do what you want, so you need to disable country and postal code and explicitly pass those yourself which you already collect as part of the full address

#

would be weird to put the postal code in Elements and line 1 earlier in your form

hexed iris Dec 1, 2021, 8:36 PM

#

I see, well this is good enough for me, I really appreciate your help

#

have a good day 🙂

rich moat Dec 1, 2021, 8:40 PM

#

sure thing, sorry for the long back and forth, there's clearly something wrong here so I'm also working to repro and make sure we get a fix out

#issambd