Ionic/Angular – Scratch Cards like Google Pay in Ionic Application using Javascript Liberary

These days you may have seen many Payment applications like Google pay, Paytm, PhonePe, etc having scratch cards where users can scratch like real one to reveal offers or points.

In Ionic as well we can create similar Scratch Cards effect, loved by users as it involves user interactions and a touch of suspense. These Scratch cards are very much popular and seen in many applications.

Also Read: Ionic | Crop Images using Ionic 4 native plugin with Image Picker

Here we will create an Ionic 4 Application using the latest CLI with Angular 7.

For Scratch Card effect we will use ScratchCardJS library using NPM

Let’s Scratch It! 😛

Make sure you have the latest version of Ionic CLI installed (Current is v4.12.0)

$ npm i ionic

Create a new Ionic 4 Application with Blank template by running following NPM command

$ ionic start Ionic4ScratchDemo blank
$ cd Ionic4ScratchDemo

Install Scratch Card JS in Application

Run following NPM command for ScratchCardJS module

$ npm install --save scratchcard-js

Now we will simply Add a Scratch Card in Home Component

Open home.page.html file then add following HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4 Scratch Cards
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content text-center>
  <div class="sc__wrapper">
    <div id="js--sc--container"></div>
  </div>
</ion-content>

Next, we will call ScratchCard method on the above element from the home.component.ts file.

import { Component, OnInit } from '@angular/core';
import { ScratchCard, SCRATCH_TYPE } from 'scratchcard-js'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage  implements OnInit {

  ngOnInit() {
    this.createNewScratchCard();
  }

  createNewScratchCard() {
    const scContainer = document.getElementById('js--sc--container')
    const sc = new ScratchCard('#js--sc--container', {
      scratchType: SCRATCH_TYPE.CIRCLE,
      containerWidth: 300,//scContainer.offsetWidth,
      containerHeight: 300,
      imageForwardSrc: './assets/images/scratchcard.png',
      //imageBackgroundSrc: './assets/images/scratchcard-background.svg',
      htmlBackground: '<div class="cardamountcss"><div class="won-amnt">30</div><div class="won-text">Points<br>Won!</div></div>',
      clearZoneRadius: 40,
      nPoints: 30,
      pointSize: 4,
      callback: () => {
        console.log('Now the window will reload !')
      }
    })
    // Init
    sc.init();
  }

}

 

Option parameters

imageForwardSrc: Image source in PNG, JPG or SVG

imageBackgroundSrc: If you want to show an image after the scratch or you can add HTML in htmlBackground

You can play with other options nPoints, clearZoneRadius, pointSize.

callback method is called after a specified percentage in nPoints of the card is scratched.

SCSS Styling

In file global.scss add the following code

#js--sc--container{
    max-width: 300px;
    width:100%;
    height: 300px;
    margin: auto;
    position: relative;
    canvas{
        position: absolute;
        top:0px;
        left:0px;
        z-index: 99;
        border-radius: 5px;
    }
    .cardamountcss{
        z-index: 9;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        position: absolute;

        .won-amnt{
            font-size:5em;
            color: #424242;
        }
        .won-text{
            font-size: 4em;
            color: #424242;
        }
    }
    .sc__inner{
        background-color: #ffffff;
        height: 100%;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #26005f;
    }
}

add following in home.page.scss

.scratch-card-bottom{
    margin-top:20px;
    .card-bottom-text{
        font-size:1.2em;
    }
}

That’s it now you can run your ScratchCard in the browser to win 30 Points 😛

Run the following command

$ ionic serve --open

You can build your application amazing by using this nice ScratchCard library in Angular Web Application as well.