Ionic Stripe Shop | Documentation

The Ionic Stripe Shop is the complete solution to start your own eCommerce app or webshop today. It contains everything you need to sell your products immediately and receive payments on your account. It also comes with a complete Admin Management part that can be used by non-developers to manage the content of the app.

View a demo, preview it on your phone, read more about all the functionalities and download the template on the product page.

External Dependencies

The following external accounts are needed to work with this package as it is:

An account for the database (firebase.com)
An account to receive payments (stripe.com)
An account on Mashape to consume the Stripe Payments API (mashape.com)

Getting started

Unzip the package in your workspace. You will find two folders:

ionic-app
admin

Setup 1: Payment setup

We first need to define a couple of constants in our app. If you are working with Angular/Ionic v1.x, head over to app.js and you'll see the following:

// ---------------------------------------------------------------------------------------------------------
// !important settings
// Please fill in the following constants to get the project up and running
// You might need to create an account for some of the constants.

// Obtain your unique Mashape ID from here:
// https://market.mashape.com/noodlio/noodlio-pay-smooth-payments-with-stripe
var NOODLIO_PAY_API_URL         = "https://noodlio-pay.p.mashape.com";
var NOODLIO_PAY_API_KEY         = "<YOUR-UNIQUE-MASHAPE-ID>";
var NOODLIO_PAY_CHECKOUT_KEY    = {test: "pk_test_QGTo45DJY5kKmsX21RB3Lwvn", live: "pk_live_ZjOCjtf1KBlSHSyjKDDmOGGE"};

// Obtain your unique Stripe Account Id from here:
// https://www.noodl.io/pay/connect
// Please also connect your account on this address
// https://www.noodl.io/pay/connect/test
var STRIPE_ACCOUNT_ID           = "<YOUR-UNIQUE-STRIPE-ID>";

// Set your Firebase url
var FBURL                       = '<YOUR-FB-URL>';

// Define whether you are in development mode (TEST_MODE: true) or production mode (TEST_MODE: false)
var TEST_MODE = true;

The NOODLIO_PAY_API_URL is basically the location of the server and is fixed. The variable TEST_MODE simply takes the values true or false and defines whether we are in test mode (development) or production (actually charging the user). Now let's define two constants:

Mashape

To consume the Stripe Payments API, we'll need to obtain our unique NOODLIO_PAY_API_KEY. To do so, head over to Mashape and click on the right "Get your API Keys and Start Hacking" or press on "Sign up free".

After you are signed in, you'll find your unique API Key in the request example on the Stripe Payments API page:

curl -X POST --include 'https://noodlio-pay.p.mashape.com/charge/token' \
  -H 'X-Mashape-Key: <YOUR-MASHAPE-API-KEY>' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Accept: application/json' \
  ... other values

Replace the NOODLIO_PAY_API_KEY with this unique identifier.

Stripe Account

If you haven't already sign up for a Stripe Account. After that, you'll need to retrieve your unique Stripe Account ID (field: stripe_account), which you can obtain on the following pages (Note: you'll need to visit both links once):

For the production mode: https://www.noodl.io/pay/connect
For the development mode: https://www.noodl.io/pay/connect/test

The Stripe Account ID looks something like acct_12abcDEF34GhIJ5K. Replace the constant STRIPE_ACCOUNT_ID wherever you have defined it.

That's it. Our server is configured and ready to receive payments.

Setup 2: Firebase Admin Rights, Security Rules and Firebase Constants

We use Firebase as a database to host your shopping items, i.e. the products that you are selling. These items are managed through an admin panel that is provided with this package in the folder admin.

Creating a Firebase Account

If you already have a Firebase account, login, go to your Dashboard and create a new app.
Open this workspace by pressing Manage this app. In your browser, remember the url (i.e. something like: [your-app-name].firebaseio.com. We define this as the FBURL (needed in steps below)

Firebase Admin Rights

The instructions for this part are visually explained in the folder admin/img/examples.

Security Rules

To secure your app we will need to add Firebase security rules:

open the file firebase_rules.txt and copy the content
go to your Firebase and open your app [your-app-name].
On the right, press Security & Rules
Paste (overwrite) all content with the content of firebase_rules.txt

Firebase Constants

We need to replace the FBURL at two locations:

Open ionic-app/www/js/app.js and replace FBURL with the appropriate value (i.e. [your-app-name].firebaseio.com)
Open admin/js/app.js and replace FBURL with the appropriate value (i.e. [your-app-name].firebaseio.com)

Setup 3: Admin panel

The last step is to setup your Admin panel. You can unzip the files on your computer and then simply open index.html with Chrome to work with it.

Alternatively, host it in the cloud with for instance Cloud9:

go to www.c9.io
create an account or login
in your dashboard, create a new workspace (select nodejs)
open this workspace
delete all files in there
upload (drag and drop) all the files from this package to the workspace
open index.html and then press Run (green button in top)

After step 7, you will see something like the following in the terminal:

Your code is running at https://[admin-workspace-name]-[your-username].c9users.io.

Note: if you are not active for two days, you will need to login to your workspace and press again the green button Run to activate the admin. This can be overcome by uploading all your files to a custom server. Feel free to email me if you wish to do this.

Extending the Authorized Domains for oAuth redirect

If you are hosting the Admin panel on a foreign location (in the cloud), you will need to extend the authorized domains for oAuth redirects in Firebase. To do so:

Go to Firebase and open your app [your-app-name]
On the right press Login & Auth
In the first top field add the location of your admin panel. If you are hosting it on cloud9 then you would typically add: https://[admin-workspace-name]-[your-username].c9users.io

Setup 4: Ionic App Setup

Now that we have prepared the back-end, it's time to setup and run the front-end. If you are familiar with Ionic Framework, then you know the structure of such apps. If you are new to Ionic, then you probably need to setup the dependencies. Here is how to get started with Ionic:

$ npm install -g cordova ionic

Usually you would follow up by typing something like ionic start myApp tabs. This is not needed anymore since all the files are in the folder ionic-app. To run the application, the only thing you need to do is:

$ cd ionic-app
$ ionic-serve

If you are working locally, you can then visit http://localhost:8100/ in your browser to preview your application.

You can also unpack all the files in a cloud environment such as Cloud9 (see instructions above, they are similar).

Wrapping up

So far you have setup all the constants and variables. If everything went well, all should be working fine now. To proceed, you can now login to your admin panel and add items. These items will be immediately (after refreshing) shown in your Ionic App. You can try to make a test purchase in the Ionic App. You will see the payment immediately reflected on your Stripe Account. The orders will be also visible in both the admin management as the orders section of the app. Have fun earning money!

Questions?

If you have questions or remarks, please let me know by either typing a comment on this site, or by e-mailing me to: noodlio@seipel-ibisevic.com

Have fun!

Changelog

Read it on the product page

oneuptim/ionic-shop-docs