How to Integrate Razorpay in Angular 2?

Question

I\'m using angular 2. I\'ve tried below URL\'s to integrate Razorpay [https://docs.razorpay.com/docs/checkout-form][1]

When i follow this URL, i got these errors lik

Answer 1

Ok am a little late to the party , but i was stuck in same problem.

Razorpay is undefined because its defined on window object, so you need something like window.Razorpay

And as @Pradeep said in comment declare var Razorpay:any , no this won't work either

And @Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file you can't put script tags in angular 2 components html , because of sanitization ref this

Now coming to solution, how to do it. First put

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

at index.html Now you have Razorpay object on window , but how to access it in .ts file ? Follow this link and create a WindowRef service and inject it in provider as article says, then in your MyComponent.ts file put

import { WindowRef } from './WindowRef';
@Component({...})
class MyComponent {

    constructor(private winRef: WindowRef) {
    }
    rzp1:any;
    options = {
       "key": "rzp_test_HTQz79bVMhpN4L",
       "amount": "2000",
       "name": "Merchant Name",
       ....
       .....
    };

    public initPay():void {
       this.rzp1 = new this.winRef.nativeWindow.Razorpay(this.options);
       this.rzp1.open();
    }
}

And MyComponent.html will have

<button id="rzp-button1" (click)="initPay();">Pay</button>

And Voila!! you have razorpay integrated

Even if you are trying out some other payment gateways like paytm or so, this approach will help

Answer 2

Step 1:

Declare razorPay at where you imported modules. declare var Razorpay: any;

import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';

declare var Razorpay: any; 

 @Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css']
})

Step 2:

Add script file checkout.js to index

Step 3: Add following required function

 payNow( ) { 
        
          var options = {
            "key": "rzp_test_dveDexCQKoGszl",
            "amount":((this.buyNow==1)?this.shared.totalAmountWithDisocuntBuyNow:this.shared.totalAmountWithDisocunt)*100, // 2000 paise = INR 20
            "name": " MARKET",
            "description": "Order #",
           
            "handler": function (response){
                console.log(response);
                alert(response.razorpay_payment_id);
 
         
              
               },
            "prefill": {
                "name":  this.shared.orderDetails.billing_firstname + " " + this.shared.orderDetails.billing_lastname,
                "email": this.shared.customerData.customers_email_address,
                "contact": this.shared.customerData.customers_telephone,
           
            },
            "notes": {  },
            "theme": {
                "color": "blue"
            }
        };
        var rzp1 = new Razorpay(options);

       rzp1.open();
  
     // body...
   } 
   paid()
   {alert();}

Answer 3

Add anywhere in your component html file:

<button  (click)="initPay()">Pay</button>

and update your your component.ts file like so:

import { Component } from '@angular/core';

declare var Razorpay: any; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'client';
    options = {
        "key": 'your app id', // Enter the Key ID generated from the Dashboard
        "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise or INR 500.
        "currency": "INR",
        "name": "Acme Corp",
        "description": "A Wild Sheep Chase is the third novel by Japanese author  Haruki Murakami",
        "image": "https://example.com/your_logo",
        "handler": function (response) {
            alert(response.razorpay_payment_id);
        },
        "prefill": {
            "name": "amin uddin",
            "email": "amidenf9701@gmail.com",
            "contact": "7992239847"
        },
        "notes": {
            "address": "note value"
        },
        "theme": {
            "color": "#F37254"
        }
    };
    initPay() {
        var rzp1 = new Razorpay(this.options);
        rzp1.open();
        console.log("works");
    }
}

Answer 4

declare Razorpay inside polyfills.ts file

// polyfills.ts file
declare global {
    interface Window {
        Razorpay: any;
    }
 }

MyComponent.ts file

@Component({...})
class MyComponent {

constructor() {
}
rzp1:any;
options = {
   "key": "rzp_test_HTQz79bVMhpN4L",
   "amount": "2000",
   "name": "Merchant Name",
   ....
   .....
};

public initPay():void {
   this.rzp1 = new window.Razorpay(this.options);
   this.rzp1.open();
}
}