Giter Club home page Giter Club logo

ionic-cross-platform-iap-subacription's Introduction

Ionic Cross Platform In App Purchase Subscription With Firebase

Example of ionic cross platform app (ios, android and web) that let the user buy an auto renew subscription service and enjoy the service on all of his devices.

The Problem:

We want to sell an auto subscription of a service in our app but let the user the ability to get the service at another devices and platform without having to purchase it again and with the ability to track unsubscribe.

The Solution:

  • User sign in useing firebase auth.
  • User purchase a subscription (using cordova-plugin-purchase).
  • We store the receipt at firebase database.
  • We validate the receipt with firebase functions (using in-app-purchase) on any device after the user sign-in, based on the database receipt.

Try it:

If you like to see the app in action email me your relevant email address and i will add you to my testers at ituns connect and google play console.

You can also see the PWA.

Getting Started:

  1. Set the project:

    • Download the project.
    • At the project folder run:
      $ npm install
      
  2. Setup Firebase:

    • Go to firebase console and create a project.

    • At the side menu click Authentication and enable Email/Password provider.

    • At the overview screen click on: Add Firebase to your web app and copy this part:

      {apiKey: "xxxxxxxxxxxxx",
      authDomain: "xxxxx-xxxxx.firebaseapp.com",
      databaseURL: "https://xxxxx-xxxxx.firebaseio.com",
      projectId: "xxxxxx-xxxxxx",
      storageBucket: "xxxxx-xxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxxxxxxx"};
    • Replace the var firebaseConfig at file app.module.ts with the config you copied in the previous step.

  3. Create Apps in Appstore and Google Play:

    • ! When you create In App Purchase prodoct use the same prodoct id for ios and android.
    • Setup iOS Applications
    • Setup Android Applications
    • When you done go to file iap.services.ts and paste the product Id:
      private productId = "paste-product-id-here";
    • go to file config.xml and paste the app id:
      <widget id="paste-app-id-here" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  4. Setup apple password for firebase validate function:

    • Open the App in ituns connect.
    • Click Features.
    • From In-App Purchases, click App-Specific Shared Secret.
    • Copy the Shared Secret.
    • Go to file index.js in folder functions, and paste the Shared Secret:
      const iosConfig = { applePassword: "paste-the-shared-secret-here"}
  5. Setup google key for firebase validate function:

    • Open the app in google play console.
    • Select Development tools and Services & APIs.
    • Copy the license key for the application.
    • Go to file index.js in folder functions, and paste the key:
      const gpk = "paste-the-key-here"
    • Run:
      $ cordova plugin remove cc.fovea.cordova.purchase
      
    • Run:
      $ cordova plugin add cc.fovea.cordova.purchase --variable BILLING_KEY="paste-the-key-here"
      
      with the gpk.
  6. Setup Google Play Store API

    • Go to file index.js in folder functions
    • Follow this steps to set the :
      const androidConfig = {
          googlePublicKeyStrSandbox: gpk,
          googlePublicKeyStrLive: gpk,
          googleAccToken: "paste-googleAccToken-here",
          googleRefToken: "paste-googleRefToken-here",
          googleClientID: "paste-googleClientID-here",
          googleClientSecret: "paste-googleClientSecret-here"
      }
  7. Deploy vlaidateRecipits function:

    • Do this step after you done steps 4,5,6.

    • go to functions folder:

      $ cd functions
      
    • Run

      $ npm install
      
    • Go back to the root folder $ cd ../

    • Make sure at the root folder

    • Run:

      $ firbase login
      

      And follow the instructions.

    • Run:

      $ firebase deploy --only functions
      
    • When deploy success you will see the url of the function on firebase servers, copy the url.

    • Go to file iap.services.ts in folder src/services and paste the url:

      private functionUrl = "paste-url-here";
  8. Cors setup

    • Use gsutil to setup Cors for firebase project. This step is required for the application to communicate with the server.
    • If you do not have gsutil installed, install it.
    • The file cors.gcloud.json is in the root folder, in this file add to origin array any url address you using in your app.
    • Replace the xxxxxxxxx with your firebase app id an run:
    gsutil cors set cors.gcloud.json gs://xxxxxxxxx.appspot.com
    
  9. Test

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.