Dan Bridson
I cannot get this working on Andoid builds. It works on iOS fine, but when I click to bring up the payment form on Android, no form appears. Any ideas why this could be happening? :-D Thanks.
The easiest way to setup Stripe payments
** Important update (04/18/2016): Read about it here, or read how to upgrade to the latest version here **
You might also like: Ionic Shop or Ionic Shop (Advanced Edition)
Noodlio Pay is an easy, straightforward solution for accepting payments on your website, in your app, or elsewhere on the web. Thanks to the REST setup, your application can immediately start making requests to the API, which validates input and charges your clients for their purchases. As we are using Stripe, all funds will immediately be transferred to your account.
Essentially, Noodlio Pay replaces your server-side, saving you the time to learn a new server language, test, validate and so on the server-side for your payments. In other words, it's hassle-free payment!
This template pack consists of two examples (with and without Stripe Checkout.js) that illustrate how to consume the API on the client-side with Ionic/Angular.
Functionalities include:
You can try out the Checkout example on your phone with Ionic View. Please download it from here, sign in and enter the following app ID: b8b71a84.
HTTP POST
requests to the Noodlio Pay API from the client-side and we'll do the rest for you.HTTP POST
requests (for instance Angular
, React
, Javascript
, etc.). In addition, we support dedicated languages such as CURL
, Java
, NodeJS
, PHP
, Python
, Objective-C
, Ruby
and .NET
.Read the latest documentation in this repository
The use of the API hosted on Mashape is free and you can make unlimited requests. Click here for an overview of complementary licenses
Read the latest on this page
Hey there! You'll need to log in before you can leave a comment here.
I cannot get this working on Andoid builds. It works on iOS fine, but when I click to bring up the payment form on Android, no form appears. Any ideas why this could be happening? :-D Thanks.
Hi Dan, as discussed by email you found a solution. I am adding it here for other users. As you found the issue was that older versions of Android use the built-in browser for webviews. If you install Crosswalk, you will make it use Chrome view instead, and that should solve the problem.
Hi, I just purchased your stripe module for ionic app. Its working for payment but not working with the subscriptions. Please help me to use the subscription and plans for the same. Looking forward to from you…
One more this its working in IOS but on Android its not working.
Hi Manpreet. Subscriptions are not included in the package, but I will be working on it to include in the upcoming week(s). I will notify you when I upload a new version. As for the Android issue, it could be due to many other external problems. What Android version are you using? Best is if you send me logs to noodlio@seipel-ibisevic.com, preferably with screenshots such that I can dig into it. Have you already checked the comments below; Dan for instance had the same issue when trying to run it on older versions of Android. If you install Crosswalk then the device will use Chrome view instead, solving the problem.
Not sure why the comments are sorted by oldest first. Just wanted to make sure that everyone sees that there is a solution for the Android quirk. Have a look at FAQ/Troubleshooting at the end of the description.
Just purchase this plugin...The stripe checkout part is not as your screen shot in browser with ionic serve. It is the default Stripe popup. In iOs, it is not working at all. It throw this error: ERROR Internal navigation rejected - <allow-navigation> not set for url='https://checkout.stripe.com/v3/65PIwZDmpglm2Z7zMJWg.html?distinct_id=ce61e568-609d-8945-06cf-a398c809b102'
Hi Xiaoyu. Yes indeed, in the browser the Stripe Checkout form becomes a popup (like in this demo: https://noodlio-templates.firebaseapp.com/stripe-charge/). On your phone it covers your screen like on the screenshots. Try out the app with Ionic View. As for the error, I haven't seen that one before. Have you set up your Stripe Publishable Keys in app.js? Otherwise, please send me some screenshots of your logs so I can have a look at it.
Hi, I try to build for Android now. But I run into the same error. I do not know what you mean by "remove the *.GZ file inside the bower package". What bower package and where is the file?
Hi, I have a few questions on the node.js server running. 1. What is the reason for the Node.js server? 2. Why upon running the project, I get "CANNOT GET/"in both Heroku and C9 when loading the url? Is that the desired response? 3. When posting the payment via a browser, why does it says in the developer console "CANNOT POST [URL]//charge"?
Hi Keith. 1. When processing payments through Stripe you need to distinguish between the client-side (the Ionic app) and the server-side (the NodeJS server). This is for safety reasons as you don't want anyone to intercept your payments, thus processing it on own account via the client-side or even misuse your account by using your secret API key. 2. Yes that is the desired response. You are not supposed to visit the server-side as a client. 3. Either you put a wrong url (I see two times //) or your server is not running properly.
Hi, I'm running the plugin for few week now, it work perfectly. But today i just found out that the popup not showing up anymore. it just shown a blank page. It work find in browser, but not in android and IOS. Anyone encounter the same issues?
bab, just noticed the same thing. No error or anything.
Hi guys. Will investigate into the issue. Most likely smth to do with the Stripe API. https://status.stripe.com/
All working fine again. The issue was on Stripe's end, but they have resolved it now.
I noticed that when using `ionic serve` the payment method launches in a new tab. Is that normal? Also, in regards to server side url, that should not be a key correct? I'm not sure which URL to put in there.
Figured it out :)
Hi ! I just purchased your plugin and i have a problem when i am using the node server side. I use Cloud9, I have inserted my secret key from my Stripe account and when I run server.js, I get the error : Error: Cannot find module 'request' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/home/ubuntu/workspace/server.js:18:18) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.runMain [as _onTimeout] (module.js:441:10) I am new to NodeJS and I don't know how to fix this. Thanks by advance.
Hi @schulz. Have you installed the requested packages first? I.e. did you run npm install. The error comes from that reason I suspect. If you still keep getting the error, could you send me a screenshot of your package.json to noodlio@seipel-ibisevic.com? Thanks.
i tried using the app in the demo version but i am unable to navigate in ionicview, as the keyboard takes the space and the form fields behind it are hidden. can you please fix this.? or let me know if i am doing anything wrong while trying to use the demo
@guarav: will have a look. Which phone are you testing it in?
iPhone 6 and iPhone 6s
I have some problems when integrating this app with my ionic app are you sure that : "https://js.stripe.com/v2/" contain StripeCheckout ? because i have allways this problem "StripeCheckout is not defined ",scond issue is,whh sometimes when i clic on button "buy" the stripe is oppening on a pop-up,and sometimes on a new Tab ? .thanks
Hi there. Yes you should define https://js.stripe.com/v2/ in your index.html but also use a library for Angular (just have a look at all the dependencies in app.js). As for the difference between pop-up and new tab: on your Phone it will always open the pop-up. When you develop on your computer then it opens a new tab, this is standard and defined by Stripe itself.
@Guarav I am not able to replicate the issue. Could you send me screenshots to noodlio@seipel-ibisevic.com? Also not sure what you mean with navigation as there is non in this starter? It's a blank starter.
@Semin I am seeing the same problem as @Guarav on iPhone 6 both with built in keyboard and Swype keyboard. The payment form comes up as a dialog. When you click on a field , the keyboards (either one) slide up. But the keyboards cover the bottom half of the dialog and there is no way to navigate to the Pay $1.00 button or the email field. The only thing you can do is click the cancel "x". The keyboard doesn't have a "next" option to traverse through all the fields. The form looks great! I'm on the latest iOS 9.3.1. Generally in a browser based app, the window would scroll allowing you to see the focused field. I'm not sure how Ionic deals with this. Please be sure to share how you fixed it as we'd all like to know. :-) Thanks! James
@James. Hey James, I think it has something to do with the Checkout.js of Stripe. I will let you guys know when I found a solution somewhere. HOWEVER, there is a quick fix that you might want to have a look at. With the latest update (2.0), Stripe Charge has been renamed to Noodlio Pay. Instead of hosting your own server, you just simply send HTTP requests to a hosted API via Mashape. So what you could do is create your own Checkout form (see the 4th image in the screenshots) and then control how the keyboard (Ionic Keyboard Plugin) behaves. The update is free anyway, try it out with the example in the folder example-regular.
Hi Semin... to donations what is the best way with Ionic? :D
Hi Juan. Simply use Noodlio Pay HTTP (see: https://github.com/noodlio/noodlio-pay-ionic-example) or without coding: www.noodliopay.com
Has anyone got this error? and how did they fix it. please 2 day i have been looking around. no luck. XMLHttpRequest cannot load https://noodlio-pay.p.mashape.com/tokens/create. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8102' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. controllers.js:3763 null
Please send a screenshot of your code to my personal email.
That is a CORS error. Add a plugin to your google chrome called 'allow-control-allow-origin' and it should work. That error should only come in the browser. If you run it on a simulator or a device it should work.
don't buy anything from this Noodlio he is the biggest scammer here
don't buy anything from this Noodlio he is the biggest scammer here
Has anyone got this error? and how did they fix it. please 2 day i have been looking around. no luck. XMLHttpRequest cannot load https://noodlio-pay.p.mashape.com/tokens/create. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8102' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. controllers.js:3763 null
Please send a screenshot of your code to my personal email.
That is a CORS error. Add a plugin to your google chrome called 'allow-control-allow-origin' and it should work. That error should only come in the browser. If you run it on a simulator or a device it should work.
Hi Semin... to donations what is the best way with Ionic? :D
Hi Juan. Simply use Noodlio Pay HTTP (see: https://github.com/noodlio/noodlio-pay-ionic-example) or without coding: www.noodliopay.com
@James. Hey James, I think it has something to do with the Checkout.js of Stripe. I will let you guys know when I found a solution somewhere. HOWEVER, there is a quick fix that you might want to have a look at. With the latest update (2.0), Stripe Charge has been renamed to Noodlio Pay. Instead of hosting your own server, you just simply send HTTP requests to a hosted API via Mashape. So what you could do is create your own Checkout form (see the 4th image in the screenshots) and then control how the keyboard (Ionic Keyboard Plugin) behaves. The update is free anyway, try it out with the example in the folder example-regular.
@Semin I am seeing the same problem as @Guarav on iPhone 6 both with built in keyboard and Swype keyboard. The payment form comes up as a dialog. When you click on a field , the keyboards (either one) slide up. But the keyboards cover the bottom half of the dialog and there is no way to navigate to the Pay $1.00 button or the email field. The only thing you can do is click the cancel "x". The keyboard doesn't have a "next" option to traverse through all the fields. The form looks great! I'm on the latest iOS 9.3.1. Generally in a browser based app, the window would scroll allowing you to see the focused field. I'm not sure how Ionic deals with this. Please be sure to share how you fixed it as we'd all like to know. :-) Thanks! James
@Guarav I am not able to replicate the issue. Could you send me screenshots to noodlio@seipel-ibisevic.com? Also not sure what you mean with navigation as there is non in this starter? It's a blank starter.
Hi there. Yes you should define https://js.stripe.com/v2/ in your index.html but also use a library for Angular (just have a look at all the dependencies in app.js). As for the difference between pop-up and new tab: on your Phone it will always open the pop-up. When you develop on your computer then it opens a new tab, this is standard and defined by Stripe itself.
I have some problems when integrating this app with my ionic app are you sure that : "https://js.stripe.com/v2/" contain StripeCheckout ? because i have allways this problem "StripeCheckout is not defined ",scond issue is,whh sometimes when i clic on button "buy" the stripe is oppening on a pop-up,and sometimes on a new Tab ? .thanks
iPhone 6 and iPhone 6s
@guarav: will have a look. Which phone are you testing it in?
i tried using the app in the demo version but i am unable to navigate in ionicview, as the keyboard takes the space and the form fields behind it are hidden. can you please fix this.? or let me know if i am doing anything wrong while trying to use the demo
Hi @schulz. Have you installed the requested packages first? I.e. did you run npm install. The error comes from that reason I suspect. If you still keep getting the error, could you send me a screenshot of your package.json to noodlio@seipel-ibisevic.com? Thanks.
Hi ! I just purchased your plugin and i have a problem when i am using the node server side. I use Cloud9, I have inserted my secret key from my Stripe account and when I run server.js, I get the error : Error: Cannot find module 'request' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/home/ubuntu/workspace/server.js:18:18) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.runMain [as _onTimeout] (module.js:441:10) I am new to NodeJS and I don't know how to fix this. Thanks by advance.
Figured it out :)
Hi Dan, as discussed by email you found a solution. I am adding it here for other users. As you found the issue was that older versions of Android use the built-in browser for webviews. If you install Crosswalk, you will make it use Chrome view instead, and that should solve the problem.
All working fine again. The issue was on Stripe's end, but they have resolved it now.
Hi guys. Will investigate into the issue. Most likely smth to do with the Stripe API. https://status.stripe.com/
bab, just noticed the same thing. No error or anything.
Hi, I'm running the plugin for few week now, it work perfectly. But today i just found out that the popup not showing up anymore. it just shown a blank page. It work find in browser, but not in android and IOS. Anyone encounter the same issues?
Hi Keith. 1. When processing payments through Stripe you need to distinguish between the client-side (the Ionic app) and the server-side (the NodeJS server). This is for safety reasons as you don't want anyone to intercept your payments, thus processing it on own account via the client-side or even misuse your account by using your secret API key. 2. Yes that is the desired response. You are not supposed to visit the server-side as a client. 3. Either you put a wrong url (I see two times //) or your server is not running properly.
Hi, I have a few questions on the node.js server running. 1. What is the reason for the Node.js server? 2. Why upon running the project, I get "CANNOT GET/"in both Heroku and C9 when loading the url? Is that the desired response? 3. When posting the payment via a browser, why does it says in the developer console "CANNOT POST [URL]//charge"?
Hi, I try to build for Android now. But I run into the same error. I do not know what you mean by "remove the *.GZ file inside the bower package". What bower package and where is the file?
Hi Xiaoyu. Yes indeed, in the browser the Stripe Checkout form becomes a popup (like in this demo: https://noodlio-templates.firebaseapp.com/stripe-charge/). On your phone it covers your screen like on the screenshots. Try out the app with Ionic View. As for the error, I haven't seen that one before. Have you set up your Stripe Publishable Keys in app.js? Otherwise, please send me some screenshots of your logs so I can have a look at it.
Just purchase this plugin...The stripe checkout part is not as your screen shot in browser with ionic serve. It is the default Stripe popup. In iOs, it is not working at all. It throw this error: ERROR Internal navigation rejected - <allow-navigation> not set for url='https://checkout.stripe.com/v3/65PIwZDmpglm2Z7zMJWg.html?distinct_id=ce61e568-609d-8945-06cf-a398c809b102'
Not sure why the comments are sorted by oldest first. Just wanted to make sure that everyone sees that there is a solution for the Android quirk. Have a look at FAQ/Troubleshooting at the end of the description.
Hi Manpreet. Subscriptions are not included in the package, but I will be working on it to include in the upcoming week(s). I will notify you when I upload a new version. As for the Android issue, it could be due to many other external problems. What Android version are you using? Best is if you send me logs to noodlio@seipel-ibisevic.com, preferably with screenshots such that I can dig into it. Have you already checked the comments below; Dan for instance had the same issue when trying to run it on older versions of Android. If you install Crosswalk then the device will use Chrome view instead, solving the problem.
One more this its working in IOS but on Android its not working.
Hi, I just purchased your stripe module for ionic app. Its working for payment but not working with the subscriptions. Please help me to use the subscription and plans for the same. Looking forward to from you…
I cannot get this working on Andoid builds. It works on iOS fine, but when I click to bring up the payment form on Android, no form appears. Any ideas why this could be happening? :-D Thanks.
I noticed that when using `ionic serve` the payment method launches in a new tab. Is that normal? Also, in regards to server side url, that should not be a key correct? I'm not sure which URL to put in there.
Hey there! You'll need to log in before you can leave a rating here.
Great starter. Got it up and running in no time following the instructions in the readme.md included in the starter. Hooked it up with my Stripe test account and successfully committed payments. Great value for money.
Works great for me!
Works perfectly for me. I got an error when installing and Semin helped me rapidly. It's a great way to start using ionic and stripe together.
{{ rating.comment }}
{{ rating.comment }}
Works perfectly for me. I got an error when installing and Semin helped me rapidly. It's a great way to start using ionic and stripe together.
Works great for me!
Great starter. Got it up and running in no time following the instructions in the readme.md included in the starter. Hooked it up with my Stripe test account and successfully committed payments. Great value for money.