Payment Sheet Opens and Closes Quickly on Android Phone, But Works in Localhost

[mkanjipuram]

Platform

• [ ] Web
• [ ] iOS
• [ *] Android

Describe the bug The paymentSheet opens and closes quickly in Android Phones. However, on the ionic local server it runs without a issue. Stripe Initialize works well, Create Payment Sheet also returns success in Promise, and then I call the Present Payment Sheet.

Present Payment Sheet works well on the browser localhost, but opens quickly and closes on the android phone. Added many alerts to see if there is any error message, but it always returns success path, yet opens and quickly closes the payment sheet.

To Reproduce

httpPost(body) {
    alert('API Calling')
    return this.http.post<any>(baseUrl + '/api/paymentsheet', body).pipe(first());
  }

async paymentSheet() {
    alert('In Payment Sheet Function');
    let data = {
      name: name
      email: email
      amount: this.orderData.OrderTotal,
      currency: "usd",
      orderNo: this.orderData.OrderNo
    };

Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
      alert('PaymentSheetEventsEnum.Completed')
    });
    alert('after add listener');
    const data$ = await this.httpPost(data);
    const { paymentIntent, ephemeralKey, customer } = await lastValueFrom(data$);
    alert('paymentIntent:' + paymentIntent);
    alert('ephemeralKey ' + ephemeralKey);
    alert('customer ' + customer);
    alert('Calling Create Payment Sheet');

Stripe.createPaymentSheet({
      paymentIntentClientSecret: paymentIntent,
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      merchantDisplayName: 'Nabe Eats',
      setupIntentClientSecret: paymentIntent,
    })
      .then(result => {
        alert('Payment Sheet creation successful:'+ result);
        alert('Called Create Payment Sheet');
        this.presentSheetNow(paymentIntent, ephemeralKey)
        // handle success case here
      })
      .catch(error => {
       alert('Payment Sheet creation failed:'+ error);
        // handle error case here
      });
  }

async presentSheetNow(paymentIntent, ephemeralKey){
    alert('Inside presentPaymentSheet');
    const result = await Stripe.presentPaymentSheet();
    if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
      this.splitAndJoin(paymentIntent);
      if (paymentIntent) {
        this.router.navigateByUrl('/home/success/' + ephemeralKey);
      }
    } else if (result.paymentResult === PaymentSheetEventsEnum.Failed){
      this.router.navigateByUrl('cancel/' + this.orderData.OrderNo)
    }
  }

Expected behavior Not sure why its closing on the android and works fine in localhost.

Using Function:

• [ *] Payment Sheet

[mkanjipuram]

Also, the payment does get created with incomplete status on stripe perfectly with customer name, email, and everything.

[mkanjipuram]

Here is my package.json on front end.

```

"@angular/animations": "~9.1.13", "@angular/cdk": "~8.2.3", "@angular/common": "~9.1.13", "@angular/core": "~9.1.13", "@angular/forms": "~9.1.13", "@angular/material": "^8.2.3", "@angular/platform-browser": "~9.1.13", "@angular/platform-browser-dynamic": "~9.1.13", "@angular/router": "~9.1.13", "@capacitor-community/stripe": "^4.2.2", "@capacitor/android": "4.7.0", "@capacitor/app": "^4.1.1", "@capacitor/browser": "^4.1.1", "@capacitor/camera": "^4.1.4", "@capacitor/core": "^4.0.0", "@capacitor/device": "^4.1.0", "@capacitor/geolocation": "^4.1.0", "@capacitor/preferences": "^4.0.2", "@capacitor/push-notifications": "^4.1.2", "@capacitor/share": "^4.1.1", "@capacitor/splash-screen": "^4.2.0", "@ionic-native/barcode-scanner": "^5.31.1", "@ionic-native/clipboard": "^5.30.0", "@ionic-native/core": "^5.0.7", "@ionic-native/device": "^5.26.0", "@ionic-native/file": "^5.33.0", "@ionic-native/in-app-browser": "^5.36.0", "@ionic-native/location-accuracy": "^5.31.1", "@ionic-native/market": "^5.25.0", "@ionic-native/media": "^5.33.0", "@ionic-native/mobile-accessibility": "^5.34.0", "@ionic-native/network": "^5.30.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "@stripe-elements/stripe-elements": "^2.0.2", "@types/moment-timezone": "^0.5.30", "angularx-qrcode": "^2.1.0", "clone-deep": "^4.0.1", "confetti-js": "0.0.18", "cordova-clipboard": "^1.3.0", "cordova-plugin-device": "^2.0.3", "cordova-plugin-file": "^6.0.2", "cordova-plugin-inappbrowser": "^5.0.0", "cordova-plugin-market": "^1.2.0", "cordova-plugin-media": "^5.0.3", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-request-location-accuracy": "^2.3.0", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "ionic5-star-rating": "https://github.com/JeongJun-Lee/ionic5-star-rating/tarball/master", "jetifier": "^1.6.5", "moment": "^2.24.0", "moment-timezone": "^0.5.33", "ng-image-slider": "^2.6.4", "ng-otp-input": "^1.7.1", "ngx-clipboard": "^14.0.1", "ngx-pinch-zoom": "^2.5.5", "ngx-wheel": "^4.0.5", "phonegap-plugin-mobile-accessibility": "^1.0.5", "rxjs": "^7.8.0", "source-map": "^0.7.3", "stripe": "^12.1.1", "tslib": "^1.10.0", "w3-css": "^4.1.0", "zone.js": "~0.10.2"

[mkanjipuram]

Finally, it probably works on localhost because of the import { defineCustomElements } from '@stripe-elements/stripe-elements/loader'; that is being used for angular. I removed that part, and the createPaymentSheet does not do anything. However, in the emulator, the stripe bottom sheet opening and closing quickly remains the same.

In Android Emulator, I do see a Plugin not found issue, not sure whats going wrong in android? Please help!

[rdlabo]

In many cases, API mistakes (paymentIntent or ephemeralKey) cause such symptoms. Please check our demo.

[rdlabo]

This Issue is closed due to lack of progress. Thank you.