Ionic Capacitor razor pay

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.