@capacitor-community/stripe not working on web with Ionic/react

[Jayrajrodage]

Platform

• Web

Describe the bug
I am getting this error "Failed to fetch dynamically imported module": and this warning "Capacitor WebPlugin "Stripe" config object was deprecated in v3 and will be removed in v4."

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Additional context
i Initialized the plugin as per the official '@capacitor-community/stripe' docs https://stripe.capacitorjs.jp/docs/react/
versions
"@capacitor/core": "^5.5.1",
"@capacitor-community/stripe": "^5.4.1",
"@ionic/react": "^7.5.5",

Please help me resolve this issue @rdlabo

[coachaaron]

Any update here? Having similar issue....

[toddaa]

Same exact problem here. Any insight would be much appreciated.

[rdlabo]

Currently, vite is not supported; either stop using vite or use the Stripe object without reactProvider.

import { Stripe } from '@capacitor-community/stripe';

[rdlabo]

Hi, @hideokamoto . Do we plan to support Vite in the React Provider, wondering if it should be Deprecated or not?
Tell us what you think.

Note: React with using the Stripe object will work fine.

[hideokamoto]

I would be very happy if we could use this provider component in the React application built by Vite. However, I'm not well-versed in developing custom components for the Vite environment.

Therefore, we would appreciate get more time for working on this issue. It's possible that we need to gather more detailed context to better comprehend what is happening.

[eofcharma]

Hi, @hideokamoto . Do we plan to support Vite in the React Provider, wondering if it should be Deprecated or not? Tell us what you think.

Note: React with using the Stripe object will work fine.

Hello

On this quote, "Note: React with using the Stripe object will work fine." Can you elaborate what setup do you have with react?

[FredericoGauz]

Hi, @hideokamoto . Do we plan to support Vite in the React Provider, wondering if it should be Deprecated or not? Tell us what you think.
Note: React with using the Stripe object will work fine.

Hello

On this quote, "Note: React with using the Stripe object will work fine." Can you elaborate what setup do you have with react?

I would appreciate guidance on that as well. Thank you for the plugin!

[ottojaa]

Unfortunately at the moment I think it's very difficult (or impossible) to make this plugin work with vite without updates in the stripe-pwa-elements.

Tried couple things (to no avail):

1. I tried using vite-plugin-static-copy to include the assets from stripe-pwa-elements/dist/esm in the build assets, and while this enabled the app to launch, the Stencil components were not properly defined (errors like can't read property $hostElement of undefined). I didn't have time to dig deep into this, but seemed like the copied assets were "not used" by the @capacitor-community/stripe plugin as I additionally made patch that added logging to the copied assets, where I could observe that the dynamically created components such as stripe-payment-sheet were correctly created, but seemingly not used by this plugin. Not sure how to connect these two.

2. Tried rewriting the CapacitorStripeProvider without using the one provided by this library, only using the Stripe object provided by this plugin -> Failed to fetch dynamically imported module

Some additional information that may be useful:

I had this exact same issue with ionic-team/pwa-elements earlier on (which made upgrade to Vite impossible), and they were able to make their package work with Vite in their 3.2.0 release (which is why I gave updating back to Vite another shot). Seeing that that specific change didn't do much more than upgrade the stencil version, might be worth trying to update the stencil version used by stripe-pwa-elements?

Unfortunately I ran out of time and ultimately had to revert to webpack for the time being, which is a shame because Vite's DX is a huge improvement over webpack / CRA. If I have more time at some point, I could try and see if the package upgrade does the trick.