使用 dart、flutter web 和 api 的 Paytabs 支付集成 [英] Paytabs payment integration using dart, flutter web and api

问题描述

我有一个 Flutter Web 项目，我正在尝试实施一个支付解决方案.我发现 paytabs 是适合我的情况的不错选择.我想添加他们的 api，但我一直在我的 flutter 网站上收到 CORS 错误.所以我尝试了他们的现成支付页面，但我也无法实施，因为我以前对 Web 开发一无所知.我只使用飞镖和颤振.但我想实现 api，因为它提供了更高的控制.这是用于发布请求的网址

3. 您需要覆盖 Activity 的 onActivityResult

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

解决方案

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

这篇关于使用 dart、flutter web 和 api 的 Paytabs 支付集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！