شرح كيفية اضافة وسيلة الدفع عن طريق ماي فاتوره في flutter

شرح كيفية اضافة وسيلة الدفع عن طريق ماي فاتوره في flutter

كما نعلم ان وسيلة الدفع من اكثر العمليات التي عليها طلب كبير من قبل المستخدمين في فلاتر وذلك بسبب ان معظم العملاء يريدون اضافتها في تطبيقاتهم لكي يحصلون على ثقه من العميل وايضا يوفر على العميل الكثير من الوقت والعناء ولكن المشكلة الاكبر انه لكي تقوم بتنفيذها بشكل صحيح يفضل ان يكون لديك سجل تجاري او غيره بشكل رسمي ولكن في هذه المقاله والمقالات القادمه سوف نوفر لكم شروحات لكيفية تنفيذها بشكل بسيط مع الخطوات وسوف نبدء معكم اليوم بواحد من الطرق الشائعه بين الناس وهيا عن طريق استخدام package ماي فاتوره وهيا تستخدم بكثره في الدول العربيه لدعهما الطرق العربيه للدفع وفي المقالات القادمه سوف نشرح لكم طرق اخرى للربط .

تنتج مجموعة أدوات تطوير Flutter تطبيقات الهاتف المحمول ثنائية الأبعاد مع جميع الأجراس والصفارات وجماليات العلامات التجارية الممتازة. Alibaba وتطبيق AdWords هما مثالان فقط لتطبيقات الجوال التي تعمل بنظام Flutter. الآن إطار عمل معروف ، Flutter لتطوير تطبيقات الهاتف المحمول لديه القوة لإنشاء العديد من تطبيقات الويب بنجاح وبتكلفة معقولة والتي تستجيب بشكل أسرع عبر جميع أحجام الشاشات. يرمز Flutter ، إطار عمل Google ، إلى "جعل تطوير التطبيقات أمرًا بسيطًا!" إذا كنت مهتمًا بدمج هذه المزايا في تطبيق الهاتف المحمول الخاص بك ، فيمكنك الاستفاده من موقعنا في انجاز اعمالك بشكل اسرع ودائما تذكر ان لا شيء في العالم الذي نعيش فيه اصبح صعب

add dependencies my fatoorah

my_fatoorah: ^3.0.11

add Config platforms

حاول ان تقوم بإضافة الاكواد التاليه داخل ملفات ios لضمان عدم حدوث مشاكل مع اجهزة apple .

// ------------------- IOS --------------
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>


// ------------------- android --------------
<application
  ...
  android:usesCleartextTraffic="true"
  ...>
  ...
  </application>

generate payment ui by using flutter

في هذه الخطوة سوف نقوم بعمل زر يقوم بفتح dialog واخر يقوم بفتح listView في جميع الاحوال كلا الطريقتين يقومان بنفس الغرض , بعدها سوف تفتح معك واجهه لتجربة الدفع واختيار الفيزا المراد التجربه بها ويوجد بعض من الفيزا الافتراضيه التي تستطيع التجربة بها , سوف يطلب منك بيانات الفيزا وبعدها يرسل رساله الى رقم الهاتف المسجل وبناء على الكود الذي يصلك سوف يقوم بقبول او فشل العمليه وهذا بعد التحقق طبعا من حالة الفيزا المدخله .

payments.dart

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:my_fatoorah/my_fatoorah.dart';
import 'package:testapp/constants/constants.dart';
import 'package:testapp/payments/list.dart';

class GG extends StatefulWidget {
  @override
  State<GG> createState() => _GGState();
}

class _GGState extends State<GG> {
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black26,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MaterialButton(
                onPressed: () {
                  dialogPayment();
                },
                child: Text('dialog'),
                color: Colors.redAccent,
              ),
              const SizedBox(
                height: 10,
              ),
              MaterialButton(
                onPressed: () {
                  navToPush(context, ListPayments());
                },
                child: Text('listView'),
                color: Colors.white,
              ),
            ],
          ),
        ));
  }

  void dialogPayment() async {
    var response = await MyFatoorah.startPayment(
      context: context,
      request: MyfatoorahRequest.test(
        // currency
      currencyIso: Country.SaudiArabia,
        // is success
        successUrl: "https://openjournalsystems.com/file/2017/07/payment-success.png",
        // is error
        errorUrl: 'Your error call back',
        // Payment amount
        invoiceAmount: 100,
        // language
        language: ApiLanguage.Arabic,
        // The token for which the money will be received
        token: "rLtt6JWvbUHDDhsZnfpAhpYk4dxYDQkbcPTyGaKp2TYqQgG7FGZ5Th_WD53Oq8Ebz6A53njUoo1w3pjU1D4vs_ZMqFiz_j0urb_BH9Oq9VZoKFoJEDAbRZepGcQanImyYrry7Kt6MnMdgfG5jn4HngWoRdKduNNyP4kzcp3mRv7x00ahkm9LAK7ZRieg7k1PDAnBIOG3EyVSJ5kK4WLMvYr7sCwHbHcu4A5WwelxYK0GMJy37bNAarSJDFQsJ2ZvJjvMDmfWwDVFEVe_5tOomfVNt6bOg9mexbGjMrnHBnKnZR1vQbBtQieDlQepzTZMuQrSuKn-t5XZM7V6fCW7oP-uXGX-sMOajeX65JOf6XVpk29DP6ro8WTAflCDANC193yof8-f5_EYY-3hXhJj7RBXmizDpneEQDSaSz5sFk0sV5qPcARJ9zGG73vuGFyenjPPmtDtXtpx35A-BVcOSBYVIWe9kndG3nclfefjKEuZ3m4jL9Gg1h2JBvmXSMYiZtp9MR5I6pvbvylU_PP5xJFSjVTIz7IQSjcVGO41npnwIxRXNRxFOdIUHn0tjQ-7LwvEcTXyPsHXcMD8WtgBh-wxR8aKX7WPSsT1O8d8reb2aR7K3rkV3K82K_0OgawImEpwSvp9MNKynEAJQS6ZHe_J_l77652xwPNxMRTMASk1ZsJL",
      ),
    );
    log(response.paymentId.toString());
    log(response.status.toString());
    log(response.url.toString());
  }
}

how to create list payment by flutter

هذه عباره عن الlistView التي سوف يتم عرض فيها طرق الدفع .

listPayments.dart

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:my_fatoorah/my_fatoorah.dart';

class ListPayments extends StatelessWidget {
  const ListPayments({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pay Now'),
        centerTitle: true,
      ),
      body: MyFatoorah(
        onResult: (response) {
          log(response.paymentId.toString());
          log(response.status.toString());
          log(response.url.toString());
        },
        // test => test data | live => real data
        request: MyfatoorahRequest.test(
          // currency
          currencyIso: Country.SaudiArabia,
          // is success
          successUrl: 'https://openjournalsystems.com/file/2017/07/payment-success.png',
          // is error
          errorUrl: 'https://www.google.com',
          // Payment amount
          invoiceAmount: 100,
          // language
          language: ApiLanguage.Arabic,
          // The token for which the money will be received
          token:
          "rLtt6JWvbUHDDhsZnfpAhpYk4dxYDQkbcPTyGaKp2TYqQgG7FGZ5Th_WD53Oq8Ebz6A53njUoo1w3pjU1D4vs_ZMqFiz_j0urb_BH9Oq9VZoKFoJEDAbRZepGcQanImyYrry7Kt6MnMdgfG5jn4HngWoRdKduNNyP4kzcp3mRv7x00ahkm9LAK7ZRieg7k1PDAnBIOG3EyVSJ5kK4WLMvYr7sCwHbHcu4A5WwelxYK0GMJy37bNAarSJDFQsJ2ZvJjvMDmfWwDVFEVe_5tOomfVNt6bOg9mexbGjMrnHBnKnZR1vQbBtQieDlQepzTZMuQrSuKn-t5XZM7V6fCW7oP-uXGX-sMOajeX65JOf6XVpk29DP6ro8WTAflCDANC193yof8-f5_EYY-3hXhJj7RBXmizDpneEQDSaSz5sFk0sV5qPcARJ9zGG73vuGFyenjPPmtDtXtpx35A-BVcOSBYVIWe9kndG3nclfefjKEuZ3m4jL9Gg1h2JBvmXSMYiZtp9MR5I6pvbvylU_PP5xJFSjVTIz7IQSjcVGO41npnwIxRXNRxFOdIUHn0tjQ-7LwvEcTXyPsHXcMD8WtgBh-wxR8aKX7WPSsT1O8d8reb2aR7K3rkV3K82K_0OgawImEpwSvp9MNKynEAJQS6ZHe_J_l77652xwPNxMRTMASk1ZsJL",
        ),
      ),
    );
  }
}