Nuxt + Stripe

[wintry vault]

Is there any documentation on how to implement Stripe with Nuxt.js I don't get my head arround it

[sturdy lynx]

hey @wintry vault,
i worked with this: https://dev.to/medusajs/medusa-nuxtjs-stripe-how-to-create-a-nuxtjs-ecommerce-storefront-from-scratch-using-medusa-part-3-3jg0
but it is with nuxt2, therefore i combined it with the normal medusa plugin docu

basically it looks now like this (please do not rate my code, it's just a basic implementation for testing, i want to refactor it in the next step):

  onMounted(async () => {
    await setUpStripe();
  });

  const setUpStripe = async () => {
    value = await loadStripe('pk_test_***');
    if (!stripe) {
      return;
    }
    const client = useMedusaClient();
    const backendData = useBackendDataStore();

    if (!backendData.cart) {
      console.warn('no cart therefore no payment possible');
      return;
    }
    const newCart = await client.carts.createPaymentSessions(backendData.cart.id);
    const isStripeAvailable = newCart.cart.payment_sessions?.some(
        (session) => (
            session.provider_id === "stripe"
        )
    );
    if (!isStripeAvailable) {
      return;
    }
    const secondCart = await client.carts.setPaymentSession(newCart.cart.id, {
      provider_id: "stripe"
    });
    clientSecret.value = secondCart.cart.payment_session?.data.client_secret as string;
    const elements = stripe.value.elements({clientSecret: clientSecret.value});
    paymentElement.value = elements.create('card');
    if (!paymentElement.value) {
      return;
    }
    paymentElement.value.mount('#payment-element');

    await client.carts.update(backendData.cart.id, {email: '[email protected]'});
  };

  const processPayment = async () => {
    const {error, paymentIntent} = await stripe.value.confirmCardPayment(clientSecret.value, {
      payment_method: {
        card: paymentElement.value,
        billing_details: {
          name: 'some name',
          email: '[email protected]',
          phone: '',
          address: {
            city: 'adress',
            country: 'at',
            line1: 'address 1',
            line2: '',
            postal_code: 'postalCode'
          }
        }
      }
    });


    const client = useMedusaClient();
    const backendData = useBackendDataStore();

    if (!backendData.cart) {
      return;
    }

    await client.carts.complete(backendData.cart.id);
    console.log('payment done');
  };

</script>