giulio-prina-ricotti_code

[regal idol]

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

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

[south lynx]

Hi there! Did you have a SetupIntent ID that you can share? If not, can you share your account ID or any relevant request IDs so I can start investigating?

[warm kraken]

hi, the problem is this error appears before the setup intent is created. Our frontend page renders the elements but if we select paypal as the payment method, the error appears and the paypal element is not rendered

acct_1ONGDfJFeAJUoOoX

[south lynx]

Got it. Do you have a deployed page that you can share? If not, can you provide the exact line of code that's crashing and the full error message? If you open your browser dev tools, you should also be able to find the exact network request that's failing

[warm kraken]

export function useStripe(
  hostElement: ShallowRef<HTMLElement | null>,
  config: UseStripeConfig
) {
  const {
    providerPaymentMethodId,
    paymentMethodTypes,
    elementsType = 'payment',
    mode = 'payment'
  } = config

  const { handleError } = useErrorHandler()
  const { createIntent: createPaymentIntent } = usePayment()
  const { $stripe, $fetchApi } = useNuxtApp()

  const stripe = shallowRef<StripeWithInternals | null>(null)
  const stripeElements = ref<StripeElements | undefined>()
  const paymentElement = ref()
  const paymentElementError = ref<string>()
  const canPay = ref(false)
  const paying = ref(false)
  const elementsLoading = ref(false)
  const cardHolder = ref('')

  const { transaction } = useTransaction()

  async function initializeStripeForm() {

    // Use cached Stripe instance from plugin (preloaded on app init)
    stripe.value = await $stripe.getStripe() as StripeWithInternals | null

    elementsLoading.value = true

    const elementsOptions: Parameters<Stripe['elements']>[0] = {
      mode,
      currency: transaction.value.currency,
      loader: 'auto',
      paymentMethodTypes: paymentMethodTypes,
      fonts: [
        {
          cssSrc: 'https://use.typekit.net/fsy5fjk.css'
        }
      ],
      appearance,
    }

    // Only add amount for payment mode
    if (mode === 'payment') {
      elementsOptions.amount = transaction.value.value
    }

    stripeElements.value = stripe.value?.elements(elementsOptions)

    paymentElement.value = stripeElements.value?.create(elementsType as any, {
      buttonHeight: 55,
      buttonTheme: {
        paypal: 'white'
      }
    })

I'm going to send a link in a bit of time adding the engineer working on this, to make things easier

[limpid siren]

Hi there 👋 does that error actually break anything? It's usually just a warning we throw to let you know that we're showing payment methods in testmode that haven't yet been activated for use in livemode.

[warm kraken]

Hi! In the end the issue is resolved, we thought the error was blocking the button from being rendered but instead it was a parameter wrongly configured. Thanks @limpid siren !