Ionic Stripe Integration with Noodlio Pay

Ionic Stripe Integration with Noodlio Pay

The easiest way to setup Stripe payments

Free!

(3)
Noodlio

Noodlio

Member since 2014

Details

Version:
This package: 2.0 Noodlio Pay: 1.1
Size:
4mb
Ionic:
1.0 beta 14,1.0.0,1.0.1
Platforms:
iOS, Android, Windows Phone
View ID:
b8b71a84
Released:
8 years ago
Updated:
8 years ago
Category:
Starters
Tags:
stripe, checkout, charge, payment, nodejs, node, paypal, noodlio, saas

** 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 - Smooth Payments with Stripe

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:

  • Validate Credit Card Details
  • Retrieve a StripeToken for the Transaction
  • Customize the meta data and image
  • Charge the user by sending a HTTP Post request to the Noodlio Pay API
  • Two starter apps which can be easily configured following the Ionic Documentation

Try it out

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.

Key benefits

  • It's quick: You can have a working payment server set up within a few minutes.
  • No server-side setup needed: Simply send HTTP POST requests to the Noodlio Pay API from the client-side and we'll do the rest for you.
  • Cost efficient: Hosting a complete server-side 24/7 can be a costly undertaking. This won't be a worry anymore: because the Noodlio Pay server is already hosted for you, you don't have to spend money on unused server capacity.
  • Instantaneous: Thanks to the Stripe setup, you'll see the funds transferred immediately to your Stripe Account
  • Unlimited: There are no restrictions on the number of requests that you can send through the Noodlio Pay server.
  • Broad support: You can charge your customers with any client-side language through 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.
  • Tested, pre-configured and maintained: Our team is constantly monitoring, testing and updating the server to conform to the latest developments.
  • Secure: Our servers are secure and we never store any transaction data.

How it works

Read the latest documentation in this repository

Pricing

The use of the API hosted on Mashape is free and you can make unlimited requests. Click here for an overview of complementary licenses

FAQ, Troubleshooting and Questions

Read the latest on this page

Hey there! You'll need to log in before you can leave a comment here.

Dan Bridson

Dan Bridson   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

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.

Manpreet Singh

Manpreet Singh   ·   8 years ago

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…

Manpreet Singh

Manpreet Singh   ·   8 years ago

One more this its working in IOS but on Android its not working.

Noodlio

Noodlio   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

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.

Xiaoyu Hou

Xiaoyu Hou   ·   8 years ago

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'

Noodlio

Noodlio   ·   8 years ago

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.

Xiaoyu Hou

Xiaoyu Hou   ·   8 years ago

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?

Keith Fong

Keith Fong   ·   8 years ago

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"?

Noodlio

Noodlio   ·   8 years ago

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.

bab

bab   ·   8 years ago

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?

Brent Daugherty

Brent Daugherty   ·   8 years ago

bab, just noticed the same thing. No error or anything.

Noodlio

Noodlio   ·   8 years ago

Hi guys. Will investigate into the issue. Most likely smth to do with the Stripe API. https://status.stripe.com/

Noodlio

Noodlio   ·   8 years ago

All working fine again. The issue was on Stripe's end, but they have resolved it now.

Chase Roossin

Chase Roossin   ·   8 years ago

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.

Chase Roossin

Chase Roossin   ·   8 years ago

Figured it out :)

Schulz

Schulz   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

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.

Gaurav

Gaurav   ·   8 years ago

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

Noodlio

Noodlio   ·   8 years ago

@guarav: will have a look. Which phone are you testing it in?

Gaurav

Gaurav   ·   8 years ago

iPhone 6 and iPhone 6s

mohamed

mohamed   ·   8 years ago

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

Noodlio

Noodlio   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

@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.

James Saxon

James Saxon   ·   8 years ago

@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

Noodlio

Noodlio   ·   8 years ago

@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.

Juan David Nicholls

Juan David Nicholls   ·   8 years ago

Hi Semin... to donations what is the best way with Ionic? :D

Noodlio

Noodlio   ·   8 years ago

Hi Juan. Simply use Noodlio Pay HTTP (see: https://github.com/noodlio/noodlio-pay-ionic-example) or without coding: www.noodliopay.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Joe

Joe   ·   7 years ago

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

Noodlio

Noodlio   ·   7 years ago

Please send a screenshot of your code to my personal email.

Darrell T Bowdon

Darrell T Bowdon   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

farhaan abdulla

farhaan abdulla   ·   6 years ago

don't buy anything from this Noodlio he is the biggest scammer here

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

farhaan abdulla

farhaan abdulla   ·   6 years ago

don't buy anything from this Noodlio he is the biggest scammer here

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Joe

Joe   ·   7 years ago

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

Noodlio

Noodlio   ·   7 years ago

Please send a screenshot of your code to my personal email.

Darrell T Bowdon

Darrell T Bowdon   ·   7 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   8 years ago

Hi Semin... to donations what is the best way with Ionic? :D

Noodlio

Noodlio   ·   8 years ago

Hi Juan. Simply use Noodlio Pay HTTP (see: https://github.com/noodlio/noodlio-pay-ionic-example) or without coding: www.noodliopay.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Noodlio

Noodlio   ·   8 years ago

@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.

James Saxon

James Saxon   ·   8 years ago

@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

Noodlio

Noodlio   ·   8 years ago

@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.

Noodlio

Noodlio   ·   8 years ago

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.

mohamed

mohamed   ·   8 years ago

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

Gaurav

Gaurav   ·   8 years ago

iPhone 6 and iPhone 6s

Noodlio

Noodlio   ·   8 years ago

@guarav: will have a look. Which phone are you testing it in?

Gaurav

Gaurav   ·   8 years ago

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

Noodlio

Noodlio   ·   8 years ago

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.

Schulz

Schulz   ·   8 years ago

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.

Chase Roossin

Chase Roossin   ·   8 years ago

Figured it out :)

Noodlio

Noodlio   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

All working fine again. The issue was on Stripe's end, but they have resolved it now.

Noodlio

Noodlio   ·   8 years ago

Hi guys. Will investigate into the issue. Most likely smth to do with the Stripe API. https://status.stripe.com/

Brent Daugherty

Brent Daugherty   ·   8 years ago

bab, just noticed the same thing. No error or anything.

bab

bab   ·   8 years ago

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?

Noodlio

Noodlio   ·   8 years ago

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.

Keith Fong

Keith Fong   ·   8 years ago

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"?

Xiaoyu Hou

Xiaoyu Hou   ·   8 years ago

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?

Noodlio

Noodlio   ·   8 years ago

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.

Xiaoyu Hou

Xiaoyu Hou   ·   8 years ago

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'

Noodlio

Noodlio   ·   8 years ago

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.

Noodlio

Noodlio   ·   8 years ago

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.

Manpreet Singh

Manpreet Singh   ·   8 years ago

One more this its working in IOS but on Android its not working.

Manpreet Singh

Manpreet Singh   ·   8 years ago

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…

Dan Bridson

Dan Bridson   ·   8 years ago

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.

Chase Roossin

Chase Roossin   ·   8 years ago

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.

Henrik Laursen   ·     ·   8 years ago

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.

Mark   ·     ·   8 years ago

Works great for me!

Schulz   ·     ·   8 years ago

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.

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Schulz    ·     ·   8 years ago

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.

Mark    ·     ·   8 years ago

Works great for me!

Henrik Laursen    ·     ·   8 years ago

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.