r2dliu-elements-error

[wanton pasture]

Hello! When you log elements right before you call createPaymentMethod what do you get?

[vast moss]

what do you want me to grab for you

[wanton pasture]

That's very odd - I was expecing logging elements to not give you anythign if you got the No type or elements provided error

Do you have a site that reproduces this error that I can take a look at?

[vast moss]

all local right now unfortunately 😦

[wanton pasture]

That's okay - do you have the full block of code that I can take a look at instead?

[cedar depot]

r2dliu-elements-error

[vast moss]

for sure, this is a vue project

import { onMounted, ref } from 'vue'
import { loadStripe } from '@stripe/stripe-js'
import axiosInstance from '@/services/AxiosClient'

const stripe = ref()
const elements = ref()
const price = ref()
const submit = ref()
const error = ref()

onMounted(async () => {
  stripe.value = await loadStripe(process.env.VUE_APP_STRIPE_PUBLIC_KEY)

  try {
    // For now there is only one product and one price.
    // If we offer others, alter ui to use dropdown or other select
    price.value = await axiosInstance.get('/stripe/products/').then((res) => {
      console.log(res.data['products'][0]['prices'][0]['unit_amount'])
      return res.data['products'][0]['prices'][0]['unit_amount']
    })
  } catch (e) {
    console.log(e)
  }
  const appearance = {
    theme: 'stripe',
  }
  const options = {
    mode: 'subscription',
    amount: price.value,
    currency: 'usd',
    appearance: appearance,
    loader: 'always',
  }

  elements.value = stripe.value.elements(options)
  const paymentElement = elements.value.create('payment', options)

  paymentElement.mount('#payment-element')
})

const handleError = (e) => {
  error.value.textContent = e.message
  submit.value.disabled = false
}

const handleSubmit = async (e, values) => {
  if (submit.value.disabled) {
    return
  }

  submit.value.disabled = true

  // Trigger form validation and wallet collection
  const { error: submitError } = await elements.value.submit()
  if (submitError) {
    handleError(submitError)
    return
  }

  // Create the PaymentMethod using the details collected by the Payment Element
  console.log(elements.value)
  const { error, paymentMethod } = await stripe.value.createPaymentMethod({
    elements: elements,
    params: {
      billing_details: {},
    },
  })

  if (error) {
    console.log('error', error)
    handleError(error)
    return
  }
}

[wanton pasture]

Ah! Instead of passing elements try passing elements.value into createPaymentMethod

[vast moss]

I love being a moron

fixed with that and addition of paymentMethodCreation: 'manual' to options

[wanton pasture]

phew! Glad we got that sorted out 👍