Angular 7 & Ionic 4 | Adding Scratch Cards like Google Pay in Ionic Application using Javascript Liberary

Compatible with Ionic 4/3 and Angular 2 – 7 Web Applications

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.

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)

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

Install Scratch Card JS in Application

Run following NPM command for ScratchCardJS module

Now we will simply Add a Scratch Card in Home Component

Open home.page.html file then add following HTML

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

 

Option parameters

imageForwardSrc: Image source in PNG, JPG or SVG

imageBackgroundSrc: If you want to show 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

add following in home.page.scss

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

Run the following command

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

 

Leave a Reply

avatar
  Subscribe  
Notify of