aaron-todd_code

[pearl coral]

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

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

[crude oxide]

the previous thread was aarontodd_86098

[steady olive]

I believe the canonical guide was updated for the flow. let me see if i can find your previous thread

[crude oxide]

yeah, the entire Discord help has changed. Seems like before I could just type in the dev-help channel

[steady olive]

Yeah we've changed the intake process on discord, see: #help message

[crude oxide]

Everything with in that link matches with 1 exception. I'm running the following :

const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement)
    })

yes, I did see help channel. Lead me here

[steady olive]

Oh you're using Card Element
the docs you shared are for PaymentElement

[crude oxide]

I'm using the PaymentElement component

which I swear was working for me

but I do see the disconnect. but im not sure how to correct it

[steady olive]

its this part: card: elements.getElement(CardElement)

if you're using PaymentElement, you can just pass in the elements instance as shown in the example here
https://docs.stripe.com/js/payment_methods/create_payment_method_elements

[crude oxide]

I changed to this:

const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: elements,
    })

results in TypeError: Converting circular structure to JSON

I took the type out of the object, since the doc you sent doesnt included it, but that errored and said it was a required field

[steady olive]

I think you're using a different sytax than what the docs say
Try using

  .createPaymentMethod({
    elements,
    params: {
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })```

[crude oxide]

const { error, paymentMethod } = await stripe.createPaymentMethod({
      card: elements,
      params: {
        billing_details: {
          name: 'Jenny Rosen',
        },
      },
    })

results in IntegrationError: Unexpected property: card. Put additional API properties in params.

[steady olive]

you don't need to pass card

just pass elements as shown in my example above

[crude oxide]

same thing: IntegrationError: Unexpected property: card. Put additional API properties in params.

wait, 1 sec

ok, fixed a typeo

IntegrationError: elements.submit() must be called before stripe.createPaymentMethod(). Call elements.submit() as soon as your customer presses pay, prior to any asynchronous work

got it!!

called submit...and then had to add the paymentMethodCreation option to Elements

[steady olive]

Great!

[crude oxide]

is there a web page I should be watching for these types of API signature changes?

[steady olive]

The code you had previously is for CardElement
I'm unsure why it worked for you in the first place.

When I mentioned there has been a change in the docs, I was only referring to the Payment Element relevant docs.

[crude oxide]

ok, super weird.

[steady olive]

and that never used card parameter iirc

yeah weird indeed

[crude oxide]

well thanks for straightening me out on this one