unable to start the stripe gateway

[Aksoom-Hussain]

Platform

• [x] Web
• [ ] iOS
• [x] Android

Describe the bug

Unable to find a Capacitor plugin to handle requestCode an android

D/TestOverScroll: getScaledOverscrollDistance: b
D/Capacitor: Unable to find a Capacitor plugin to handle requestCode, trying Cordova plugins 425177417
V/Capacitor/StripePlugin: Notifying listeners for event paymentSheetFailed
D/Capacitor/StripePlugin: No listeners found for event paymentSheetFailed
V/Capacitor/StripePlugin: Notifying listeners for event paymentSheetFailed
D/Capacitor/StripePlugin: No listeners found for event paymentSheetFailed
D/Capacitor/AppPlugin: Firing change: true
V/Capacitor/AppPlugin: Notifying listeners for event appStateChange
D/Capacitor/AppPlugin: No listeners found for event appStateChange
D/Capacitor: App resumed

To Reproduce using these 2 function in vue.js nuxt 3 1 initializing the listener and placing the keys 2 calling the payment sheet crashing the app 3 in web it give error

async function startStripe() {
  await store
    .getStripe(route.params.id, 0)
    .then(async () => {
        Stripe.initialize({
    publishableKey: user.stripe_publishable_key,
  });
      // prepare PaymentSheet with CreatePaymentSheetOption.
      console.log(user.stripe_publishable_key);
      console.log(stripe.value.customer);
        Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
          console.log('PaymentSheetEventsEnum.Completed');
        });
      await Stripe.createPaymentSheet({
        paymentIntentClientSecret: stripe.value.paymentIntent,
        customerId: stripe.value.customer,
        customerEphemeralKeySecret: stripe.value.ephemeralKey,
      }).then((result) => {
        console.log(result);
      }).catch((err) => {
        console.log(result);
      });
    })
    .catch((err) => {
      console.log(err);
    });
}
async function startgate() {
        // present PaymentSheet and get result.
      await Stripe.presentPaymentSheet().then((result) => {
      console.log(result);
      if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
        console.log(result);
        //await store.stripe(route.params.id,0)
      }
      }).catch((err) => {
        console.log(err);
      });
}

Expected behavior unable to start the stripe gateway

[rdlabo]

@Aksoom-Hussain Thanks for issue. Where is console.log that undefined displayed?

I suggest you console.log(["where's log", result]); . Thanks.

[Aksoom-Hussain]

the undefined log come after

await Stripe.createPaymentSheet()

the function is not return so it show undefined

[rdlabo]

@Aksoom-Hussain createPaymentSheet 's then ? or catch ? In many cases, the back-end implementation is the problem (e.g., API keys do not match)

[Aksoom-Hussain]

I follow all the previous issues requested make tweaks

with that I was able to run it on the android app but the web issue still persist

it say issue is with present in web.ts as shown in screenshot

[rdlabo]

Is it async problem? Since Stripe.initialize is intended to be executed only once, it is not appropriate to put it here. You should run it beforehand with constructor or something similar.

[Aksoom-Hussain]

tried on beforemounted() function

getting this error in vue.js 3 nuxt 3

[rdlabo]

OK, I see. It seems @stripe-elements 's lazy load and SSG/SSR issue. ( Not this plugin ).

[rdlabo]

I'm not Nuxt user, so can't support your project. Please check https://github.com/capacitor-community/stripe/blob/master/src/web.ts#L47-L83, and get log.

( did you run npm install @stripe-elements/stripe-elements ? )

[Aksoom-Hussain]

yes stripe elements is installed and in node_module

[rdlabo]

@Aksoom-Hussain Please read https://github.com/capacitor-community/stripe/blob/master/src/web.ts#L47-L83 .

1. console log Stripe object.
2. check stripe-payment-sheet in body.

However, if you suffer from this, perhaps you should build it yourself at https://stripe.com/docs/payments/elements instead of @stripe-elements on web.

[Aksoom-Hussain]

1 stripe objects is always get undefine on first initialize 2 html have empty stripe-payment-sheet tag and all JS import in name of stripe

[rdlabo]

Wait...

  await store
    .getStripe(route.params.id, 0)
    .then(async () => {
        Stripe.initialize({
    publishableKey: user.stripe_publishable_key,
  });

This is not await Stripe.initialize. Why Stripe.initialize run into then?

await store.getStripe(route.params.id, 0);
await Stripe.initialize({
    publishableKey: user.stripe_publishable_key,
});

[Aksoom-Hussain]

the first await is for the API call then it initialize the stripe

[rdlabo]

if stripe objects is always get undefine is true, can't run Stripe.initialize .

[Aksoom-Hussain]

yes that only case for the web, android is working fine

the stripe initialize get this error in web

[rdlabo]

https://github.com/ionic-team/stencil/issues/3195 help you? vite may be one of reason of issue.

This is not this plugin issue. I can't help you.

[Aksoom-Hussain]

ok let me check

[rdlabo]

Sorry I can't help you. A solution might be to not bundle them in vite and use script tags for loading @stripe-elements...

[Aksoom-Hussain]

https://stenciljs.com/docs/vue

is it possible to make your library bundle Vue compatible as stencil also have it, that will help in future scope

[rdlabo]

is it possible to make your library bundle Vue compatible as stencil also have it,

Can't. This is not problem about @capacitor-community/stripe. This plugin contains neither StencilJS nor Web Components.