angular-ippopay

    1.0.2 • Public • Published

    angular-ippopay

    IppoPay Payment Gateway for your Online Business.

    Install

    with npm

    npm install --save angular-ippopay

    Usage

    IppoPay Payment Gateway uses sensible defaults, so only minimal configuration via props is necessary.

    Basic configuration

    How to do configuration in your Angular Project?

    Step 1

    Add the below script in angular-cli.json or angular.json.

      "scripts": [
        "./node_modules/angular-ippopay/index.js"
      ]

    Step 2

    In your Typescript file. follow the instructions.

    To initialize the IppoPay Payment.

    //To Declare the Ippopay Payment
    
    declare var Ippopay: any;
    
    // For Success and Error Handlers. You can get the Payment status in the below function, it may be success or error. 
    
    const ippopayHandler = ( function (e) {
      if(e.data.status == 'success'){
            console.log(e.data)
        }
        if(e.data.status == 'failure'){
            console.log(e.data)
        }
    });
    window.addEventListener('message', ippopayHandler);
    
    //To Initialize the Ippopay Payment
    
    constructor(){
        Ippopay.init();
    }
    
    
    

    To Open the Ippopay Payment Popup. Get the Order ID (ORDER_ID) from Step 3.

    Ippopay.open('ORDER_ID','PUBLIC_KEY');
    

    To Close the Ippopay Payment Popup

    Ippopay.close();
    

    Step 3

    Create order from Server side using below API and get the Order id.

      POST API LINK :
      https://public_key:secret_key@api.ippopay.com/v1/order/create
    
      BODY:
      amount : YOUR_TRANSACTION_AMOUNT
      currency : YOUR_CURRENCY_CODE
      payment_modes : OPTIONAL /*  Available modes are cc,dc,nb,upi */
      customer : OPTIONAL /*note : auto render in payment popup*/

    Example Request

      {
        "amount": YOUR_TRANSACTION_AMOUNT,
            "currency": YOUR_CURRENCY_CODE,
            "payment_modes": "cc,dc,nb,upi" ,
            "customer": {
              "name": Customer_Name,
              "email": Customer_Email,
              "phone": {
                    "country_code": Phone_Country_Code ,
                    "national_number": Phone_Number
                }
              }
      }

    In response for the above request, you will get Order ID (order_id - params).

    Step 4

    When you click place order button our popup will be loaded so you can use below test card credentials to complete the order.

      Card Number 4111 1111 1111 1111
      Expiry 05/20
      CVV 123
    
      Card Number 4242 4242 4242 4242
      Expiry 05/23
      CVV 123

    Success and Error Handlers

    React IppoPay gives you the handlers for Payment status and details.

    After Payment done, the below line sends the Payment details and status to ippopayHandler function.

    window.addEventListener('message', this.ippopayHandler);

    You can get the Payment status in the below function, it may be success or error.

      const ippopayHandler = ( function (e) {
      if(e.data.status == 'success'){
            console.log(e.data)
        }
        if(e.data.status == 'failure'){
            console.log(e.data)
        }
    });

    Sample Integration - App.component.ts

    import { Component, OnInit } from '@angular/core';
    import "@angular/compiler";
    declare var Ippopay: any;
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      constructor() {
        console.log('Called Constructor');
        Ippopay.init();
      }
      ngOnInit() {
        console.log('Called ngOnInit method');
        const ippopayHandler = ( function (e) {
          if(e.data.status == 'success'){
                console.log(e.data)
            }
            if(e.data.status == 'failure'){
                console.log(e.data)
            }
        });
        window.addEventListener('message', ippopayHandler);
        Ippopay.open('ORDER_ID','PUBLIC_KEY');
      }  
    }

    Author

    This component is written by IppoPay.

    License

    IppoPay 2020 © All Rights Reserved. IppoPay

    Install

    npm i angular-ippopay

    DownloadsWeekly Downloads

    11

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    12.1 kB

    Total Files

    3

    Last publish

    Collaborators

    • ippopay