We are building an e-commerce app which includes the payment-gateway system for online ordering. Below is the technology stack we use.
Since there is no proper documentation regarding this we implemented it in below way.
app.component.ts
export class AppComponent {
rzp1: any;
title = 'app';
options = {
'key': environment.payment_key,
'amount': '2000', // 2000 paise = INR 20
'name': 'Merchant Name',
'description': 'Purchase Description',
'image': '/your_logo.png',
'handler': function(response) {
alert(response.razorpay_payment_id);
},
'prefill': {
'name': 'Harshil Mathur',
'email': '[email protected]'
},
'notes': {
'address': 'Hello World'
},
'theme': {
'color': '#F37254'
}
};
constructor(private winRef: WindowRefService) {
}
public initPay(): void {
this.rzp1 = new this.winRef.nativeWindow.Razorpay(this.options);
this.rzp1.open();
}
}
app.component.html
<button id="rzp-button1" (click)="initPay();">Pay</button>
This was just done for a testing purpose. We have seen Stripe Payment Gateway as suggested by Firebase team but we cannot use the same since Stripe doesn't provide support yet to India and our main business is carried out in India.
So we opted for RazorPay. With the help of this post and this documentation we were able to integrate it into our system, but we feel this is not the secure way to do this since we expose payment_key via environment variables. We will not be having much control over backend since its firebase.
What would be the best way to implement this with Firebase system? How can we make it more secure than it is now?
The key variable above is the "Key Id" as per Razorpay checkout docs. It is a public variable, and is unique for each account.
However, in order to use the rest of the server-to-server APIs, you'll need to use your Razorpay Key Secret, which you should never publish, and keep secret.
Quoting from the Razorpay Authentication docs:
All server side requests like capture, refund, getting details of previous payment must be authenticated with basic auth using the key-id as username and key-secret as password.
Send the requests to https://$keyId:[email protected]
Your Key-Secret is like your password. Never use it for client side requests and never share it with anyone.
Disclaimer: I work at Razorpay