شرح استعامل وسيلة الدفع stripe في فلاتر | payment getway stripe in Flutter
كما نعلم ان وسائل الدفع من اكثر الامور التي يتعقد منها مطوري flutter ولهذا نقدم لكم هذه المقالات التي سوف تساعدكم على فهم امكانية الدفع اونلاين في تطبيقك وهذا يعد الدرس الثاني وفي هذا الدرس سوف نستعمل وسيلة الدقع stripe وهيا من وسائل الدفع الشائعه في الولايات المتحدده وجميع طرق الدفع تعمل بنفس المبدأ , عباره عن api تقوم بالتسجيل لديهم ويقدمون لك key خاص بك وهذا يكون بعد تسجيل الفيزا الخاصه بك وجميع البيانات بشكل صحيح وعندما يقوم اي مستخدم بعمل دفع اونلاين يتم تحويله الى الاضافة وهيا التي تتولى الامر من بعدك وتتحقق من عملية الدفع وان المبلغ قد وصلك لحسابك وبناء عليها تقوم انت ببناء اي وظيفة تريد تنفيذها بعد قبول العملية , ايضا يقدم stripe امكانية لتجربة الخدمة الخاصه بهم بشكل مجاني وسوف نشرح لكم كيف يتم ذلك من خلال هذه المقالة .
يعد محرك التقديم لمكونات واجهة المستخدم أحد عوامل البيع الرئيسية في Flutter. يمكّن هذا المحرك ، وهو ميزة غير شائعة جدًا في أطر التطبيقات ، Flutter من رسم وعرض مكونات واجهة المستخدم الخاصة به بشكل مستقل عن النظام المستهدف. القليل من الأطر يمكن أن يساوي مستوى التعقيد والتحكم وأداء وقت التشغيل الذي يحققه Flutter نتيجة للقيام بذلك. تتمثل الطريقة التقليدية لتقديم عناصر واجهة المستخدم مع إطار عمل تطبيق في بناء طبقة تجريد أو جسر يستدعي مكتبات واجهة المستخدم الأصلية للنظام ويترجم البيانات بين الاثنين. مع عيب زيادة الحمل في جسر التطبيق الذي يؤثر على الأداء ، فإن هذا يشجع النظام المستهدف على التعامل مع "الرفع الثقيل" لعرض الرسوم المتحركة والمكونات.
flutter_stripe: ^4.0.0
http: ^0.13.5
التعديل على ملف style.xml
ضغ الاكواد التاليه داخل ملف style.xml سواء كان في الوضع الليلي او الوضع الصباحي .
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
<!-- TODO document the necessary change -->
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="Theme.MaterialComponents">
<item name="android:windowBackground">?android:colorBackground</item>
</style>
</resources>
التغيير في ملف MainActivity.kt
استبدل الاكواد الموجوده لديك بالاكواد التاليه لتفادي عدم حدوث مشاكل مع استخدام الاضافة .
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
}
تفعيل الStripe.publishableKey
ضع الاكواد التاليه بداخل ملف الmain مع استبدال المفتاح التالي بالمفتاح الخاص بك والذي سوف نشرح كيف تقوم بالحصول عليه في المرحلة التاليه .
main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await di.init();
await Firebase.initializeApp();
Stripe.publishableKey =
'pk_test_51LWybIAMlW2bXtu82cXiAkcH57ImeZD0gfR2vU0gzmU24tWpRMeyxSF2hDx5wnDjVE3YnIc1F9TqS1eMUvbT7rjR00dCLL6xIC';
...
}
الحصول على publishableKey خاص بك
انتقل الى الموقع التالي https://dashboard.stripe.com/ وبعدها قم بتسجيل اميل خاص بك وسوف يتم ارسال رسالة لتفعيل الاميل الخاص بك من خلال رسالة تصلك على الاميل وبعدها يمكنك استخدام الموقع , الخطوة التاليه وهيا الانتقال الى وضع المطور ولا تنسى تفعيل ميزة الاداة التجربية لكي تتمكن من تجربة الاضافة .
استخدام طريقة الدفع مع تطبيقك في Flutter بدون مشاكل
التصميم الموجود هنا عباره عن زر يتم النقر عليه وبعدها يتم تفعيل ميزة الانتقال الى الدفع عن طريق مجموعة من طرق الدفع والتي تظهر في الصورة الخاصه بالمقال لا تنسى استبدال الSEC_KEY بالمفتاح الذي تم الحصول عليه من الاعلى كما هو موضح بالخطوات وبهذا تكون انتهيت من تفعيل طريقة الدفع في تطبيقك بشكل اختباري , يمكنك الاشتراك مع الموقع لكي يتم تفعيلها بشكل واقعي مع تطبيقك اذا كنت ترغب بذلك .
ui.dart
String SEC_KEY = 'asdasdasdasdasdasd';
MyButton(text: 'Payment now',
onPressed: (){
makePayment();
}),
Future<void> makePayment() async {
try {
paymentIntent = await createPaymentIntent(cubit.totalPrice.round().toString(), 'USD');
//Payment Sheet
await Stripe.instance.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: paymentIntent!['client_secret'],
style: ThemeMode.dark,
merchantDisplayName: 'Adnan')).then((value){
});
displayPaymentSheet();
} catch (e, s) {
print('exception:$e$s');
}
}
displayPaymentSheet() async {
// success payment
try {
await Stripe.instance.presentPaymentSheet(
).then((value){
print('value')
navigateTo(context, SplashCustom(img: 'assets/images/pyment_success_loti.json' , type: 'payment',));
paymentIntent = null;
}).onError((error, stackTrace){
print('Error is:--->$error $stackTrace');
});
} on StripeException catch (e) {
print('Error is:---> $e');
showDialog(
context: context,
builder: (_) => const AlertDialog(
content: Text("Cancelled "),
));
} catch (e) {
print('$e');
}
}
// Future<Map<String, dynamic>>
createPaymentIntent(String amount, String currency) async {
try {
Map<String, dynamic> body = {
'amount': calculateAmount(amount),
'currency': currency,
'payment_method_types[]': 'card'
};
var response = await http.post(
Uri.parse('https://api.stripe.com/v1/payment_intents'),
headers: {
'Authorization': 'Bearer $SEC_KEY',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: body,
);
// ignore: avoid_print
print('Payment Intent Body->>> ${response.body.toString()}');
return jsonDecode(response.body);
} catch (err) {
// ignore: avoid_print
print('err charging user: ${err.toString()}');
}
}
calculateAmount(String amount) {
final calculatedAmout = (int.parse(amount)) * 100 ;
return calculatedAmout.toString();
}
بيانات لفيزا تجربية يمكنك تجربتها
يمكنك استخدام البيانات التاليه لكي تجرب امكانية الدفع عن طريق الاضافة .
