Stripe Elements?

[nuwanvc]

Can I use stripe elements with this module?

[flozero]

Hey @nuwanvc hope you doing good. Could you provide some docs about it will try to have a look this weekend

[stevenhurth]

Yes, you can. Once you get a handle on the client side stripe instance, you can call .elements() on it.

The automatic typescript resolution doesn't work with the module, but I was able to do the following for types to properly resolve (some code removed for brevity)

import {Stripe, StripeElements} from "@stripe/stripe-js";

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

const init = async () => {
  const intent = await useSubscriptionApi().getPaymentIntent();

  elements.value = stripe.elements({
    clientSecret: intent.clientSecret
  });

  const paymentElement = elements.value.create("payment");
  paymentElement.mount("#payment-element");
}

[flozero]

Thank you @stevenhurth <3

Closing this for now don't hesitate to re open if we are missing something

[nuwanvc]

@stevenhurth @flozero Thanks for taking time to help me with the issue. I will try your method.

[phillipmohr]

Thanks! I had to change a couple things to make it work: const stripe = useClientStripe() as Stripe; to const stripe = await useClientStripe() as Stripe;

and

elements.value = stripe.elements(); to elements.value = stripe.value.elements();

Otherwise it doesn't work for me. However, I'm still getting this typescript error for stripe.value.elements() Property 'value' does not exist on type 'Stripe'.ts(2339). Is this a bug?

EDIT: Unfortunately, I'm not able to get this working consistently. Sometimes I get the error Cannot read properties of null (reading 'elements'). Are you planning to update the docs for Stripe Payments soon? @flozero

[samulefevre]

Hello, i used onNuxtReady to make it works. Only way i found.

[BenWaNH]

Someone could post a concrete, functionnal example to use element... ? It's not really clear how to use module to display a payment form. I tried several examples, stripe is loading correctly in variable but when i use mount function from Stripe nothing seems happen :'(