Thursday, 10 December 2020

Ionic 5 IOS & Stripe Payment Request Button - Stripe.js integrations must use HTTPS

I'm trying to add a Payment Request Button to my Ionic 5 app. However, no matter how I run the app, I always get the following message and the button won't show.

[warn] - You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

I'm loading the Stripe API over https

  <script src="https://js.stripe.com/v3/"></script>

I've imported it in to my page

declare var Stripe;

// Check the availability of the Payment Request API first.
const prButton = elements.create('paymentRequestButton', {
    paymentRequest,
});

paymentRequest.canMakePayment().then(result => {
   if (result) {
       prButton.mount('#payment-request-button');
   } else {
       document.getElementById('payment-request-button').style.display = 'none';
   }

);

I've tried running it in Safari on Mac (running with --ssl and a valid certificate), Xcode Emulator, A Real iPhone and the result is always the same.

Also worth noting is that I'm using Capacitor, not Cordova. I've tried this in my capacitor.config.json but it had no effect.

 "iosScheme": "https",

Update:

So it turns out that it's because the app runs with the local urlScheme of capacitor:// rather than https:// and the development team at Ionic currently have no plans to rectify this. Is there any way to make the Payment Request Button appear in a non-https environment?



from Ionic 5 IOS & Stripe Payment Request Button - Stripe.js integrations must use HTTPS

No comments:

Post a Comment