camilo-dominguez_error | Stripe Developers | Page 1

fluid joltBOT Feb 21, 2025, 6:56 PM

#

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

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

#

next notch Feb 21, 2025, 7:01 PM

#

Hi, which document are you seeing this?

#

Our document: https://docs.stripe.com/elements/address-element#create-an-address-element does show a client_secret being passed

buoyant falcon Feb 21, 2025, 7:09 PM

#

Hey how is it going?

#

here it is https://docs.stripe.com/js/elements_object/create_without_intent

Stripe JS Reference

#

You can see on the Docs that the Elements object says that clientSecret is optionally required nad it specify that it is required for Payemnt and Link Auth but not for the Address element.

#

BTW here is the link for the stripe.js Elements object as well. https://docs.stripe.com/js/elements_object/create

Stripe JS Reference

next notch Feb 21, 2025, 7:23 PM

#

Yeah, you're creating the elements without creating the PaymentIntent so I see what you're saying here and that should work.

From your code, what does your elements creation look lke?

Can you double check that please?

buoyant falcon Feb 21, 2025, 7:33 PM

#

yeah

#

remember this is not for payment this is for the address element.

#

const appearance = stripeStyling;
const element = this.stripe.elements({
        locale: this.locale,
        appearance,
        fonts: stripeFonts,
      });```js

#

const addressElement = element.create("address", {
        mode: this.formType,
        autocomplete: {
          mode: "google_maps_api",
          apiKey: "OUR_KEY",
        },
        display: {
          name: "split",
        },
        blockPoBox: true,
        allowedCountries: [getCountryAbbreviation(this.billingCountry)],
        defaultValues: this.setAddressDefaultValues(),
      });```js

next notch Feb 21, 2025, 7:38 PM

#

Let me test this, it might be a while as it does not look like I have a working integration path with this specific flow.

#

Hang tight

buoyant falcon Feb 21, 2025, 7:39 PM

#

thanks

fluid joltBOT Feb 21, 2025, 7:46 PM

#

next notch Feb 21, 2025, 8:01 PM

#

Ok, it works when I pair the Address Element with with the 'Accept a Payment' flow: https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment#collect-addresses

I just followed this integration guide: https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment#collect-addresses

added the Address Elements:

const addressElement = elements.create("address", {
mode: "billing",
allowedCountries: ["NO", "CA", "US"],
autocomplete: {mode: 'disabled'},
validation: { phone: { required: 'always', }, },
fields: { phone: 'always', },
});
addressElement.mount("#address-element");

buoyant falcon Feb 21, 2025, 8:02 PM

#

So the address and the payment element needs to be on the same page?

#

We are using this on our shipping page and later on the payment page we dont load the address element.

modest ledge Feb 21, 2025, 8:05 PM

#

Hi taking over as pgskc has to step away

buoyant falcon Feb 21, 2025, 8:05 PM

#

Hey @next notch thanks for the help

modest ledge Feb 21, 2025, 8:07 PM

#

You should be able to load the address element by itself

#

Not sure why you are getting this

#

Do you have a published test page I can look at?

buoyant falcon Feb 21, 2025, 8:08 PM

#

No, sorry it is a private page.
The element loads but then this error crops up. It is not blocking or anything but the error is there.

modest ledge Feb 21, 2025, 8:09 PM

#

How are you collecting address and passing it along to the payment element though?

#

It was really designed to be on the same page

#

Assuming you're using payment element in your flow

buoyant falcon Feb 21, 2025, 8:10 PM

#

So for the payment page we just pre-populate the billing address information, not the shipping.
We use this on our shipping page just for the ease of use and the autocomplete.

modest ledge Feb 21, 2025, 8:11 PM

#

How do you collect it and pass it through though

buoyant falcon Feb 21, 2025, 8:11 PM

#


  const manualPaymentMethod = this.useManualPaymentMethodCreation ? { paymentMethodCreation: "manual" } : {};
    this.element = stripe.elements({
      locale: this.locale,
      appearance,
      clientSecret: this.clientSecret,
      fonts: this.fonts,
      ...manualPaymentMethod,
    });

    const paymentElement = this.element.create("payment", {
      defaultValues: {
        billingDetails: {
          email: this.billingDetails.email,
          name: this.fullName,
          address: this.billingDetailsStripe.address,
        },
      },

      business: {
        name: "Our Business",
      },
      fields: {
        billingDetails: {
          address: {
            country: "never",
          },
        },
      },
      wallets: {
        applePay: "never",
        googlePay: "never",
      },
    });

#

So basically we store the information that comes from the event in our db and then we pass that back from the backend to the front when we load the payment element.

modest ledge Feb 21, 2025, 8:12 PM

#

So basically everything works as expected

#

You just see the above console error?

buoyant falcon Feb 21, 2025, 8:13 PM

#

yeah, which spends our budget from our sentry allocation.

modest ledge Feb 21, 2025, 8:15 PM

#

Ok interesting

#

I'm not sure

#

Let me check with a colleague

#

Can you try passing:

          mode: 'payment',
          amount: 1000,
          currency: 'usd',
}}```
into your Elements options for the Address Element? Just to see if the error goes away

buoyant falcon Feb 21, 2025, 9:03 PM

#

yeah

#

But why do I need to pass mode payment if the mode is "shipping", I can pass amount and currency and see.

#

#

Now we get this error

next notch Feb 21, 2025, 9:14 PM

#

Hopping back on here. I see you're using the elements separately. I think the previous advice was given to see if it ruled something out which it does not appear to be the case.

#

I see that this is not blocking you to collect the address. I'll share this with the product owning team as I was able to reproduce this as well on my test. Thank you for bringing this to our attention.

buoyant falcon Feb 21, 2025, 9:17 PM

#

You are welcome!

next notch Feb 21, 2025, 9:43 PM

#

@buoyant falcon instead of passing that mode:payment information under the address element, can you pass it in the Elements container?

const element = this.stripe.elements({
mode: 'payment',
amount: 1000,
currency: 'usd',
locale: this.locale,
appearance,
fonts: stripeFonts,
});

#camilo-dominguez_error