:iphone: Razorpay Sample Application for Cordova, Ionic v1 and Ionic v2
License: MIT License
This repository will showcase a collection of integration samples of razorpay-cordova plugin with
Cordova plugin is available under https://github.com/razorpay/razorpay-cordova
Razorpay is a tech company. All our engineers handle support too. So can create a ticket at razorpay.com/support and expect a response from the dev responsible for the android SDK.
MIT Licensed
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
Hi,
After calling RazorpayCheckout.open app is crashing .I installed plulgin using similar code in sample app like below
$ionicPlatform.ready(function () {
$scope.Rpay = function () {
if (!called) {
// RazorpayCheckout.open(options, successCallback, cancelCallback);
RazorpayCheckout.on('payment.success', successCallback)
RazorpayCheckout.on('payment.cancel', cancelCallback)
RazorpayCheckout.open(options)
called = true
}
}
});
Could you please tell what are things i need to cross check to resolve. As of now i am using test mode api key which is working in sample app
When payment is done within the app then it works fine and success callback is called but in case of UPI payments such as GPAY and PhonePe, the call goes to another and payment is done and when it is complete the call comes back to my app but then the success callback is not called, instead the app restarts.
Hi,
i am using 'plugin name="com.razorpay.cordova" spec="^1.3.14"' .
its perfect in browser and ionic android build.
but i am not able to made iOS build.
Hello,
i want to navigate this to another page or i want to call another function after success call back. How to do that?
this.router.navigate does't work for me.
Hi,
Received the following error while running my Ionic project with latest razorpay-cordova 🚔
dyld: Library not loaded: @rpath/Razorpay.framework/Razorpay
Referenced from: /Users/suvajit/Library/Developer/CoreSimulator/Devices/B756A5AD-9704-481A-90C6-CB2822540DDE/data/Containers/Bundle/Application/3D93C137-3D8C-479D-95A1-75933380BC7F/MyApp.app/MyApp
Reason: image not found
(lldb)
The same error is reproduced on Razorpay Sample App for Ionic 3.
The error does not occur in 1.3.5.
I have used Cordova Razorpay plugin, I have a issue in reading a OTP in a remember cards section. The OTP is reading in a corresponding Text Box but its not working properly, it shows "OTP is required" in the next step. But I was typing the OTP text box manually it will be working, only Auto Reading OTP have a problem kindly solve this issue asap.
Thanking You.
public pay(description, amount) {
let options = {
description: description,
image: 'http://www.ilove9months.com/wp-content/uploads/2014/12/logo-icon.png',
currency: 'INR',
key: this.razor.env.RAZORPAY,
amount: amount,
name: 'foo',
prefill: {
email: this.auth.userProfile.emailId,
contact: this.auth.userProfile.mobileNo,
name: this.auth.userProfile.full_name
},
theme: {
color: '#EE4993'
},
modal: {
ondismiss: function () {
console.log('dismissed');
}
}
};
this.platform.resume.subscribe((event) => {
RazorpayCheckout.on('payment.success', this.razorpaySuccess)
RazorpayCheckout.on('payment.cancel', this.razorpayCancel)
RazorpayCheckout.onResume(event);
});
RazorpayCheckout.open(options);
}
My Ionic App is being destroyed by the android, even after integrating the resume code.
I am able to complete the checkout flow, but I am not getting any callback called.
May I know what I am doing wrong here?
ionic build android fails.
To reproduce the error.
Please download the ionic 2 sample app from https://github.com/razorpay/razorpay-cordova-sample-app and run the following commands
npm install
cd rzp-ionic2-example
mkdir www
cordova platform add android
ionic build android
Please find below excerpt from the error message:
FAILURE: Build failed with an exception.
Could not expand ZIP '/home/jaz/web/rzp-ionic2-example/platforms/android/build/intermediates/exploded-aar/com.razorpay/checkout/1.2.0/jars/classes.jar'.
BUILD FAILED
Total time: 2 mins 49.599 secs
Error: /home/jaz/web/rzp-ionic2-example/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
FAILURE: Build failed with an exception.
Could not expand ZIP '/home/jaz/web/rzp-ionic2-example/platforms/android/build/intermediates/exploded-aar/com.razorpay/checkout/1.2.0/jars/classes.jar'.
gettting ERROR ReferenceError: RazorpayCheckout is not definedon ioinc 5 sample code
I tried to host this as PWA and i am getting error:
URL: https://testingrazorpay.firebaseapp.com/
HomePage.html:14 ERROR ReferenceError: RazorpayCheckout is not defined
at HomePage.webpackJsonp.191.HomePage.pay (home.ts:39)
at Object.eval [as handleEvent] (HomePage.html:14)
at handleEvent (core.es5.js:11914)
at callWithDebugContext (core.es5.js:13206)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794)
at dispatchEvent (core.es5.js:8814)
at core.es5.js:9406
at HTMLButtonElement. (platform-browser.es5.js:2687)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.es5.js:4140)
And its not working when app is tested in IonicView application
Hi,
We have built an e-commerce app which we plan to launch in couple of months. We have chosen razor pay as our payment gateway and have successfully integrated in our app. The payment functionality works fine in android app. However fails to compile for iOS.
We are faced with below error -
In file included from /Plugins/com.razorpay.cordova/Razorpay/Main.m:2:
/Plugins/com.razorpay.cordova/Razorpay/RazorpayPayment.h:1:9: fatal error: 'Razorpay/RazorpayCheckout.h' file not found
#import <Razorpay/RazorpayCheckout.h>
Request you to kindly assist us in resolving this issue at the earliest.
Actually, I downloaded your code and run the Ionic 3 razor pay example and also install the Razorpay plugin. But, while running the project it shows me an error like RazorpayCheckout is not defined. Kindly help me to solve the issue.
Runtime Error RazorpayCheckout is not defined Stack ReferenceError: RazorpayCheckout is not defined at HomePage.webpackJsonp.191.HomePage.pay (http://localhost:8100/build/main.js:73:9) at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:163:24) at handleEvent (http://localhost:8100/build/vendor.js:12273:138) at callWithDebugContext (http://localhost:8100/build/vendor.js:13565:42) at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:13153:12) at dispatchEvent (http://localhost:8100/build/vendor.js:9173:21) at http://localhost:8100/build/vendor.js:9765:20 at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:33938:53) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37)
Hi all,
I am trying to hit an API endpoint to verify Payment in the success call back of RazorPayCheckout but it is not happening still alert with paymentid is coming correctly.
is there any workaround to resolve this issue??
PS:
I am developing the app in Ionic3
When we click on the Google Pay and then Click on Pay then Google Pay or PhonePe app is not opening in IOS Platform. In Android its working fine.
Hi,
Please provide sample app for Ionic 5+React+ Capacitor.
Thanks
Integration steps for razorpay with cordova android is not available in sample example. We have referred https://github.com/razorpay/razorpay-cordova#things-to-be-taken-care but doesn't work out. Still our app killed and order payment is success. We are using VueJS front end. Help us in resolving this ASAP.
Here is the description :
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:3:9: error:
unknown type name 'RazorpayCheckout'
typedef RazorpayCheckout Razorpay;
^
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:5:21: error:
cannot find protocol declaration for 'RazorpayPaymentCompletionProtocolWithData'
@interface Main () <RazorpayPaymentCompletionProtocolWithData, ExternalWalletSelectionProtocol> {
^
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:5:64: error:
cannot find protocol declaration for 'ExternalWalletSelectionProtocol'
@interface Main () <RazorpayPaymentCompletionProtocolWithData, ExternalWalletSelectionProtocol> {
^
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:21:15: error:
receiver type 'Razorpay' (aka 'int') is not an Objective-C class
razorpay = [Razorpay initWithKey:(NSString *)[options objectForKey:@"key"]
^
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:23:4: error:
bad receiver type 'Razorpay *' (aka 'int *')
[razorpay setExternalWalletSelectionDelegate:self];
^~~~~~~~
/Volumes/app/platforms/ios/MyApp/Plugins/com.razorpay.cordova/Main.m:30:4: error:
bad receiver type 'Razorpay *' (aka 'int *')
[razorpay open:tempOptions];
^~~~~~~~
6 errors generated.
package.json
{
"name": "MyApp",
"version": "0.0.1",
"author": "MyApp Team",
"homepage": "https://MyApp.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"sign:apk": "sh ./scripts/android.sh",
"build:dev": "ng build --configuration=dev",
"build:android:local": "ionic cordova build --release android --verbose && npm run sign:apk",
"build:android:dev": "ionic cordova build --release android --verbose --configuration=dev && npm run sign:apk",
"build:ios:local": "ionic cordova build --release ios --verbose",
"build:ios:dev": "ionic cordova build --release ios --verbose --configuration=dev"
},
"resolutions": {
"@babel/preset-env": "^7.8.7"
},
"private": true,
"dependencies": {
"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/fire": "5.0.0",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ionic-native/core": "^5.26.0",
"@ionic-native/native-storage": "^5.34.0",
"@ionic-native/splash-screen": "^5.26.0",
"@ionic-native/status-bar": "^5.26.0",
"@ionic/angular": "^5.1.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"chart.js": "^2.9.3",
"cordova-android": "9.1.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-cocoapod-support": "^1.6.2",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-res": "^0.12.0",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"firebase": "5.5.0",
"install": "^0.13.0",
"ionic-plugin-keyboard": "^2.2.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"ng2-charts": "^2.3.2",
"npm": "^7.20.3",
"razorpay-cordova": "^0.1.0",
"rxjs": "^6.5.5",
"trackjs": "^3.10.0",
"tslib": "^1.13.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.26",
"@angular/cli": "^8.3.26",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.2.2",
"com.razorpay.cordova": "github:razorpay/razorpay-cordova",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.2.1",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"npm-force-resolutions": "0.0.3",
"protractor": "^5.4.4",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"es6-promise-plugin": {},
"ionic-plugin-keyboard": {},
"com.razorpay.cordova": {},
"cordova-plugin-nativestorage": {}
},
"platforms": [
"android",
"ios"
]
}
}
Hi,
We have built an e-commerce app which we plan to launch in couple of months. We have chosen razor pay as our payment gateway and have successfully integrated in our app. The payment functionality works fine in android app. However fails to compile for iOS.
We are faced with below error -
In file included from /Plugins/com.razorpay.cordova/Razorpay/Main.m:2:
/Plugins/com.razorpay.cordova/Razorpay/RazorpayPayment.h:1:9: fatal error: 'Razorpay/RazorpayCheckout.h' file not found
#import <Razorpay/RazorpayCheckout.h>
Request you to kindly assist us in resolving this issue at the earliest.
Please Provide sample app for ionic 4 for subscription
First of all thanks for such a wonderful plugin , you make us work really easier , Please give my regards to your development team .. you guys really did a great work !!!! Basically I am using rzp-cordova-example in my application , everything is fine , i successfully able to integrate in my application as per your instructions
Free recharge is working fine but i am getting one Security error with other options , here is the error i am getting :
Uncaught SecurityError: Blocked a frame with origin "https://api.razorpay.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.
Is the above error related to my KEY , please let me know how to resolve it.
After Adding meta tags in index.html above error removes but now i am getting this following error when i try to pay through NetBanking
MetaTags i used are as follows :
<meta http-equiv="Content-Security-Policy"
content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
Error which i am getting now is :
Uncaught DOMException: Blocked a frame with origin "https://api.razorpay.com" from accessing a cross-origin frame.
at Yt.write (https://checkout.razorpay.com/v1/checkout-frame.js:2:6651)
at ne.writePopup (https://checkout.razorpay.com/v1/checkout-frame.js:2:15193)
at ne.generate (https://checkout.razorpay.com/v1/checkout-frame.js:2:13826)
at ne (https://checkout.razorpay.com/v1/checkout-frame.js:1:7779)
at window.Razorpay.ti.createPayment (https://checkout.razorpay.com/v1/checkout-frame.js:2:16038)
at Ge.submit (https://checkout.razorpay.com/v1/checkout-frame.js:3:27388)
at Ge.preSubmit (https://checkout.razorpay.com/v1/checkout-frame.js:3:26538)
at HTMLFormElement.e (https://checkout.razorpay.com/v1/checkout-frame.js:1:19306)
Please let me now , what causing me this problem though i am searching on google too about it.
Appreciate!!!!!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.