Hi All, how can I integrate razor pay payment gateway in ionic capacitor project.
there is a cordova plugin for that but i need to implement for ionic capacitor project
please help
thanks
Payment gateways are not built into an app, there’s sensitive merchant data that you’ll need to make the payment to work and you do not want that distributed with every app you release, plus other design patterns to observe. Instead you’d need to build a payment API which sits in a remote server somewhere on the web which the app makes a payment request to.
Then, the API collates the relevant info related to the pay request and sends it to razor which processes it and responds appropriately.
Here is a workflow from another post, it should give you an idea of what to do. Razor pay docs have step by step instruction on how to do it plus samples. https://razorpay.com/integrations/
The Express App is just a sample of the tech stack that can sit between your Ionic app and Razor pay gateway.
With that you should be able to put something together.
okay let me try this
I tried webview in mobile integration as per Razorpay docs https://razorpay.com/docs/payment-gateway/web-integration/webapp/ and it does not work and If anybody can get it to work without having to write native code then do lemme know
Use javascript approach
https://razorpay.com/docs/payment-gateway/web-integration/
I tried but it does not work in android and ios apps. does it work for you on apps?
i am in development mode so did’t checked in on live mode but yeah it is working on development mode
put <script src="https://checkout.razorpay.com/v1/checkout.js"></script> inside index.html
on payment page declare razorpay at to as
declare var Razorpay;
and on button click take information(price etc) then add this as below
const options = {
"key": "YOUR_KEY_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
"currency": "INR",
"name": "Acme Corp",
"description": "Test Transaction",
"image": "https://example.com/your_logo",
"order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
"handler": function (response){
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature)
},
"prefill": {
"name": "Gaurav Kumar",
"email": "gaurav.kumar@example.com",
"contact": "9999999999"
},
"notes": {
"address": "Razorpay Corporate Office"
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
you may get error on order_id. then just remove that order_id section from options
If I have understood this correctly … this is working for you in test mode when you built your apk file?
If you follow the instructions order_id is from the previous response so that shouldn’t give you an error.
Hi everyone,
in this way razor pay working on browser only. in native platform it stacked on payment processing screen.
I have started mobile application and it stacked in below screen.
on web it is working. in this state on web, a external window opens and gives a message that the payment is successful. Please see the image below
after clicking success button that mobile screen modal closes and gives success msg.
Please help how it will work on mobile in ionic 5 capacitor application. I have tried this also
https://medium.com/@yaseen_nadaf/integrate-razorpay-with-angular-1a7080cf8e79
also I want to mention that razorpay backend is not configured. For testing removed order_id.
Waiting for your response
Hi
you need use the below options
try this in Razorpay options
callback_url: ‘’,
redirect: true,
Thanks. this plugin solved my problem
Thanks for your rply.
This is solved using this https://github.com/razorpay/razorpay-cordova