Paytabs payment integration using dart, flutter web and api

Question

I have a flutter web project and I was trying to implement a payment solution. I found out that paytabs is a good choice for my situation. I wanted to add their api but I kept getting the CORS erorr over my flutter website. So I tried their ready payment page but I am also unable to implement since I have no previous knowledge about web development. I only use dart and flutter. But I would like to implement the api since it gives higher control. This is the url used for post requests https://www.paytabs.com/apiv2/create_pay_page Using the http package I always have the CORS appearing as an error. Documentation for the paytab service: https://dev.paytabs.com/docs/paypage/ Hope you can help

Answer 1

There are not payment plugins available for flutter. but we can integrate PayTabs by using flutter platform channel.

step 1-> Create the Flutter platform client final Map result = await methodChannel.invokeMethod('getPayTabs'); Exemple :`

Future<void> _getPayTabs() async {
String batteryLevel;
try {
  debugPrint("this is dart getPayTabs");
  final Map result = await methodChannel.invokeMethod('getPayTabs');
  debugPrint("trasiction data $result");
} on PlatformException {
  debugPrint("trasiction data Failed");

}

step 2-> Importing the SDK android project

1. In Android Studio, Right click on the app choose New > Module
2. Choose the Downloaded paytabs_sdk-v4.0.1.aar. If not, download here
3. Right click on your App and choose Open Module Settings
4. Add the Module dependency
5. Choose the: paytabs_sdk-v4.0.1 module to be included
6. Confirm the Module import by changing the Android view to Project view in the sidebar
7. Add below dependencies.
8. You can start with code changes.

9. You have to include the following dependencies:

   allprojects {
   repositories {
   ...
   maven {
   url 'https://jitpack.io'
   
   }
   }
   }
   

   implementation 'com.android.support:design:28.0.0'
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.squareup.retrofit2:retrofit:2.4.0'
   implementation 'com.google.code.gson:gson:2.8.5'
   implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
   implementation 'com.github.dbachelder:CreditCardEntry:1.4.9'
   

step 3-> Add an Android platform-specific implementation
Start by opening the Android host portion of your Flutter app in Android Studio:

1. Open the file MainActivity.kt located in the kotlin folder in the Project view. (Note: If editing with Android Studio 2.3, note that the kotlin folder is shown as if named java.)
2. Inside the configureFlutterEngine() method, create a MethodChannel and call setMethodCallHandler(). Make sure to use the same channel name as was used on the Flutter client side.

3. You need to override your Activity’s onActivityResult