Ionic stripe with angular-payments


I am using angular-payments on ionic. The stripe payment form is loaded via an ionic.popup as follows:

                    $rootScope.buyForm = $ ({
                            scope: $scope,
                            title: "Purchase Guide",
                            templateUrl: 'templates/stripe.html'

My stripe.html file exists within the www/templates/ directory.
It contains a stripeForm as follows:

<form stripe-form="stripeCallback" name='paymentForm'>
<button class='button buy-button' type="submit" ng-show='!paymentinprogress'>Purchase</button>

Everything works fine along with generating stripe tokens, sending the token to my https server and charging the card. But the problem is all this works with the test stripe mode.

Once, I move to the stripe live mode, and replace the stripe keys to the live ones. I get the following warning on my browser:

6 524842 warn You are using Stripe.js in live mode over an insecure connection. This is considered unsafe. Please conduct live requests only on sites served over https. For more info, see

And on my ios app, the app just doesn’t load, it gives a white blank screen.

Should I be fetching the stripe.html from a https server, if yes, then are there any examples to point me in the right direction. What’s the best way to do this, via ionic popup, or the inappbrowser?

1 Like

Did you ever find anything out about this?

Are you using Ionic 1.x? You should be indeed fetching the data to a HTTP server (like this one).

If you want the source code of a working example, then try out this free starter. It actually uses the native Stripe Checkout form and if I am not mistaking also makes use of the package angular-payments (or angular-stripe).

If you wish to learn how to setup your own payment server, then you can make use of this starter which includes the code of a ready-to-go NodeJS Stripe payment server.

Finally, if you are looking on how to integrate Stripe in an Ionic2 app, then try out this starter.

1 Like