search

capacitor-community / stripe

Stripe Mobile SDK wrapper for Capacitor
https://capacitor-community-stripe.netlify.app/
MIT License
192 stars 77 forks source link

Stripe web stuck in fallback when upgrading to ^4.0.0 #213

Closed floppydisken closed 1 year ago

floppydisken commented 2 years ago

Platform

Describe the bug After upgrading to v4.0.0+ the CapacitorStripeProvider gets stuck in fallback mode.

To Reproduce Steps to reproduce the behavior:

  1. Upgrade /demos/react project to v4 of the plugin with the accompanying upgrade to the @capacitor/* plugins to v4
  2. npm run start
  3. Open browser and observe the neverending "Loading..."

Expected behavior To properly initialize the provider for the web project.

wtorsi commented 1 year ago

The same, any solution?

wtorsi commented 1 year ago

The problem comes from customElements.whenDefined and probably the solution is here https://github.com/webcomponents/polyfills/pull/447

floppydisken commented 1 year ago

The problem comes from customElements.whenDefined and probably the solution is here webcomponents/polyfills#447

I didn't find a solution. Did you test the polyfill?

I tested two things:

  1. Run a cusomElements.whenDefined("stripe-payment-sheet") in the browser to test if it resolves if the custom element is already defined. This worked fine.
  2. Create a production build and import the polyfill before the app script.

With no luck.

phal0r commented 1 year ago

I experienced the same problem and it is bug of this plugin. See this line: https://github.com/capacitor-community/stripe/blob/master/src/react/provider.tsx#L31

It creates a Promise, but never resolves, when web platform is detected.

if you change this

new Promise<void>(resolve => Capacitor.isNativePlatform() ? resolve() : defineCustomElements()).then(() => {...

to this:

let prom = Capacitor.isNativePlatform() ? Promise.resolve() : defineCustomElements()
prom.then(() => { ....

it starts working again.