Stripe Elements? 2

[azoom-sidonie-abe]

Hello there! I check this issue and seems like the problem hasn't been answered properly here (https://github.com/fuentesloic/nuxt-stripe/issues/21) so I'm re-posting with my issue here...

I'm getting the same error both onNuxtReady or onMounted

Has anyone solved this?

It will be much appreciated if I can get a help on this

*If I remove .value from stripe.value I get elements doesn't exist so I added .value

On initial load the Element form isn't loading but when I save my VScode file the hot reload happens and then the form appears

Below is my current code base

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'elements')

const stripe = await useClientStripe() as Stripe
const elements = ref<StripeElements | undefined>()

const collectAddress = async () => {
  const addressElement = elements.value?.getElement('address')
  if (addressElement) {
    const { complete, value } = await addressElement.getValue()
    if (complete) {
    // completed logic here

    }
  }
}
const init = async () => {
  const options = {
    mode: 'setup',
    currency: 'jpy',
  }

  elements.value = await stripe.value.elements(options)
  const addressElement = elements?.value?.create('address', {
    mode: 'billing',
  })

  addressElement?.mount('#payment-element')
}

onNuxtReady(async () => {
  await init()
})

[flozero]

hey @azoom-sidonie-abe sure can you provide me again stripe element documentation I will have a look next week

[azoom-sidonie-abe]

Hi @flozero

Sorry to bother you and I appreciate for your help!

Is it his one below that you are looking for? https://docs.stripe.com/js/elements_object/create

[flozero]

No worry if something its not clear we can try to help. I think so I will have a look next week or this weekend If I can. Hope the timeline will be good for you

[azoom-sidonie-abe]

Hi @flozero , I hope you had a nice weekend! Any luck with this one by any chance?

[flozero]

hey sorry no. Will try this weekend

[azoom-sidonie-abe]

Thank you! My company is actually planning on launching next week so it will be much appreciated if I can get this solved....!

[flozero]

hey @azoom-sidonie-abe sorry for the long time between you demands and the example.

I believe this https://github.com/flozero/nuxt-stripe/pull/40 is going to solve your problem. Once merged and published its going to close this one. Feel free to re open if its not answering you issue

Also don't hesitate to validate the implementation.